meta标签及常用方式

meta用于提供一些与页面有关的元信息。

必须属性

content

可选属性

http-equiv
name
scheme

常用的meta

<!--设置文档使用utf-8字符集编码-->
<meta charset = "utf-8">
<!--width - 可视区域的宽度，值可为数字或关键词device-width -->
<!--height - viewport的高度-->
<!--initial-scale - 初始的缩放比例-->
<!--minimum-scale - 允许用户缩放到的最小比例-->
<!--maximum-scale - 允许用户缩放到的最大比例-->
<!--user-scalable - 用户是否可以手动缩放-->
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
<!--content="telephone=yes" 在iPhone 手机上默认值是（电话号码显示为拨号的超链接）：-->
<!--可将telephone=no，则手机号码不被显示为拨号链接-->
<!--使设备浏览网页时对数字不启用电话功能（不同设备解释不同，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码。-->
<meta name="format-detection" content="telephone=no" />
<!--忽略识别邮箱-->
<meta name="format-detection" content="email=no" />
<!--网站开启对 web app 程序的支持-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--在 web app 应用下状态条（屏幕顶部条）的颜色；(改变顶部状态条的颜色)-->
<!--默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--http-equiv="Content-Type" 表示描述文档类型-->
<!--HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容-->
<meta http-equiv="Content-Type" content="text/html">
<!-- UC默认竖屏 ，UC强制全屏 -->
<meta name="full-screen" content="yes">
<!--使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。-->
<!--应用模式-->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 QQ强制全屏 -->
<!--设置屏幕方向-->
<meta name="x5-orientation" content="portrait">
<!--设置全屏-->
<meta name="x5-fullscreen" content="true">
<!--设置屏幕模式-->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

BFC

BFC，块格式化上下文文（block formatting context），在面试中经常会碰到这个问题。在这里总结归纳下。

###定义
BFC是在页面渲染时，块级盒布局出现的区域，同时也是浮动元素交互的区域。这样讲其实很晦涩，不妨这样理解：
在一个文档中，如果所有元素都处于文档流中，那他们都属于同一个BFC，可以说它是环境或者属性。但是不代表一个文档里只有一个BFC。

###激活BFC的条件
激活BFC的条件有很多，总结如下：

1. float属性为left或right；
2. position属性为absolute或fixed;
3. 块容器但不是块级盒模型的元素，简单来说就是display属性为inline-block、table-cell、table-caption、flex或inline-flex；
4. overflow属性为auto、scroll或hidden

###BFC的作用
在BFC的布局中，box会紧贴着BFC的左边缘，自上向下排列，即使存在浮动元素，这样就会出现浮动元素覆盖在box上的情况。
利用BFC，我们可以解决很多问题：

1. 同属于一个BFC时，box垂直方向的距离会由各自的margin值决定，也就是会发生合并情况。解决方法就是将box置于不同的BFC中，这样margin值会分开计算，不会合并

2. 在BFC中若有浮动元素，就会出现类似文字环绕的情况。这时只要为被覆盖的元素设置一个新的BFC即可解决问题

3. 高度的塌陷。在一个BFC中，若都为浮动元素，则父元素的高度会塌陷，这时我们就需要为父元素设置BFC，就是常说的清除浮动。关于清除浮动的最佳实践如下：

   .clearfix:before,
   .clearfix:after {
   content: '';
   display: table
   }
   .clearfix:after{
   clear: both
   }

1. 处理html并构建DOM树；
2. 处理CSS并构建CSSOM树
3. 将DOM和CSSOM合并为渲染树
4. 根据渲染树进行布局
5. 将各个节点绘制到屏幕

ps: 进来避免重绘、重排 比如：1. 元素集合属性变化 2. DOM树结构变化

1. 个人介绍（公司，项目介绍）
2. virtual dom作用
3. cli工具与dva-cli工具区别
4. 标记清除
5. 首屏优化，性能优化
6. shouldComponentUpdate作用，生命周期
7. JSX console.log 是什么
8. 控制内存溢出
9. 项目亮点
10. jquery链式调用原理
11. pm角色工作
12. redux connect参数
13. react事件原理
14. 首屏加载时间计算 performance 埋点 时间戳
15. 跨域

css中px，em，rem区别

px

绝对单位，页面按精确像素展示

em

相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem

相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

tips

另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取。

所有浏览器默认的未修改的字体大小为16px

2016转行做了前端，一开始，在联亿家做了三个月的页面仔，主要还是对前端这个行业的熟悉。帮公司做了官网。接下来，开始写一些移动端的需求，主要是h5页面，这个时候，还是产出静态模板，交给后端套数据，很低级的开发工作。写了一些项目后，接触到了vue，向公司提出了前后端分离的开发方式，后端只负责数据的产出，第一个vue的spa项目是联亿家的代理商后台，vue+vue-router+vuex，算是最初的实践。接下来又陆陆续续做了几个spa项目，但发现已经是重复的机械工作，同时，公司的前端就我一个，无人交流学习，发展太慢，产生了换公司的念头。2017年10月来了乐刻，前端团队6个人，转向了react技术栈，也接触到了node，负责公司的业务后台，新需求新功能的实现，原有功能的迭代，解决历史遗留问题，团队的工程化建设，通用业务组件的产出，带领实习生。
工作中的亮点：1. 能独立解决问题，寻求资源的能力 2. 由工作中的启发，构建了通用业务组件或者说模板 3. 新建项目的配置过于繁琐也促使产出了一个cli工具 4. 对于现有技术的选型分析。
工作中的不足：1.计算机基础还不够，需加强 2.与行业交流太少，只知埋头干 3. 移动端、混合开发经验过少

判断是否为函数表达式？

1. 若没有函数名称，必定是表达式
2. 若有函数名称，根据上下文来判断

ex

  function foo(){} // 声明，因为它是程序的一部分
  var bar = function foo(){}; // 表达式，因为它是赋值表达式的一部分

  new function bar(){}; // 表达式，因为它是new表达式

  (function(){
    function bar(){} // 声明，因为它是函数体的一部分
  })();

function foo(){} // 函数声明
  (function foo(){}); // 函数表达式：包含在分组操作符内

ps：函数声明会被提升，在编译阶段，就会存在函数定义，函数表达式则为undefined

通常将配置文件拆分为3块不同内容，根据环境的不同执行不同的配置。base为dev和prd环境都会用到的配置，dev为开发环境配置，config为生产环境。base导出模块后，dev和config通过模块加载后继承base配置，并添加各自相应配置。

1. 浅拷贝，遍历对象，把属性和属性值放在新对象

var shallowCopy = function(obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj，并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

2. 深拷贝，在遍历时，若是对象，递归调用深拷贝函数即可

var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

DOM

DOM的结构

DOM，文档对象模型，针对htÅml与xml的API。它是一种树形结构

最外层的是根节点，html，其余所有的节点都包裹在其中。
节点的类型总共12种，在标准中用12中数值常量表示，比较关键的是前3种：

1. Node.ELEMENT_NODE 元素节点
2. Node.ATTRIBUTE_NODE 特性节点
3. Node.TEXT_NODE 文本节点

每个节点都有一个childNodes属性，保存着NodeList类数组，即获取节点后，通过node.childNodes访问。
每个节点都有一个parentNide属性，指向父节点。
若是想要访问NodeList数组中的节点，有以下几种方法：

• node.childNode[0]
• node.childNode.item(0)

childNodes列表中的每个节点都是兄弟节点，通过previousSibling和nextSibling访问，

节点的获取

• getElementById
• getElementByTagName
• getElementByName

h5新增

• getElementByClassName
• querySelector
• querySelectorAll

DOM操作

节点的添加、移动

appendChild()用于向childNodes列表尾部添加一个节点，若是传入的节点已经存在，相当于将该节点从原位置移动到新位置。
insertBefore()用于在childNodes列表的指定位置放置节点，方法接受两个参数：要插入的节点，参照节点，若参照节点为null，与appendChild操作相同

节点替换

replaceChild()，方法接受两个参数：要插入的节点，要移除的节点

节点移除

removeChild()，参数为要移除的节点

节点克隆

cloneNode()，参数为boolean，表示是否进行深复制，true为进行深复制

创建元素节点

createElement()，参数为要创建的标签

属性节点

• getAttribute
• setAttribute
• removeAttribute

元素遍历

新的API定义了DOM元素5个新特性，以保证返回的节点都为元素节点

• childElementCount
• firestElementChild
• lastElementChild
• previousElementSibling
• nextElementSibling

classList

新的h5API

• add(value) 添加新类
• contains(value) 判断是否存在指定类
• remove(value) 删除类
• toggle（value）切换类

自定义数据属性 data-*

通过元素的dataset属性来访问，其是一个对象

HTTP

什么是http协议

http，超文本传输协议，作为TCP/IP协议的一部分，构成了互联网的基础。

http的method

http状态码

http报文格式

request报文结构

1. 第一行：请求方法，请求url，http协议版本
2. 若干请求头，包括通用头部，请求头部，实体头部
3. 头部与消息实体间有分隔符
4. 消息实体

response报文结构

1. 第一行：http协议版本，状态码，状态描述
2. 若干响应头，包括通用头部，响应头部，实体头部
3. 头部与消息实体间有分隔符
4. 消息实体

https

http + 加密 + 认证 + 完整性保证 = https

http 2.0

输入url到显示页面这中间发生了什么

1. 输入url
2. 浏览器检查缓存，若存在且新鲜，直接跳至解码
3. 解析url，获取协议，主机 端口 路径
4. 组装http请求报文
5. 解析目标ip
6. 建立tcp连接
7. 发送请求报文
8. 服务器接受并解析请求报文
9. 服务器处理
10. 组装响应报文
11. 返回响应报文
12. 浏览器接受响应报文
13. 浏览器检查状态码并处理
14. 响应解码
15. 解析html 构建dom树 下载资源 构建cssom树 执行js脚本
16. 显示网页

CSS各种居中

##水平居中

###行内元素
行内元素只需通过设置text-align:center即可实现水平居中

###块级元素
块级元素设置margin: 0 auto即可实现水平居中。

##水平垂直居中
在实际开发中，我们经常要实现的就是水平垂直居中。

###行内元素

设置heigth和line-heigth相同，同时设置text-align:center

###块级元素

####1. 绝对定位居中

.center{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

####2. flexbox

.center{
    display: flex;
    align-items: center;
    justify-content: center
}

####3. table

.center-table{
    display: table;
    table-layout: fixed;
    width: 100%
}
.center-cell{
    display: table-cell;
    vertical-align: middle;
}

####4. 负margin

.center{
    width: 400px;
    heigth: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;
}

####5. transform

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}