前言
之前写了一篇关于前端模拟面试的文章——前端模拟面试【一面】 今天咱们接着进行前端模拟面试二面。因为有很多是一面中提及了的问题，这边不再写相关答案，会简单过一下。
一面之后，最好有个时间复习一下一面中答得不好的知识点。二面也可以挑一些答得不好的进行提问，看是否真正掌握
面试始终是面试，我希望通过这些面试题，能够检验平时工作学习的成果，能够真正提高大家的前端基础能力和实战能力，而不是纸上谈兵
html
1. 有哪些常用的 <meta> 标签
meta 标签由 name 和 content 属性来定义，来描述一个 HTML 文件的原信息，比如作者等
（1）charset,html文档的编码形式
<meta charset="UTF-8" >
（2）http-equiv,设置http缓存过期日期
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞
（3）vieport，移动端控制视口的大小和比例。
＜meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,minimum-scale=1.0,user-scalable=no">
CSS
1. 有哪些居中的方法
/* line-height 和 height */
line-height=height
/* flex */
justify-content: center // 水平居中
align-item:center; // 垂直居中
/* posotion 百分比 */
position: relative;
position:absolute;
transform: translate(-50%, -50%)
/* position 负值 */
margin负值
/* margin */
水平居中 margin:0 auto;
/* table 布局 */
display: table;
vertical-align: middle;
2. 响应式布局有哪些方法，详细说说rem布局法
3. 有没有使用过css的扩展语法，比如less，sass
- Less、Sass/Scss是什么？
Less 是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。Sass 是一种动态样式语言，Sass语法属于缩排语法，比 css 比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
- less和sass的相同之处
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用
JavaScript表达式赋值
-
less和sass的区别
Less和Sass的主要不同就是他们的实现方式。Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。关于变量在Less和Sass中的唯一区别就是Less用@，Sass用 $。
参考：https://www.jianshu.com/p/029792f0c97d
4. BFC（ 块级格式上下文）
（1）定义：是一个独立的渲染区域，只有块级的box参与，它规定了内部的元素如何布局，并不影响这个区域外的元素
（2）特性：
box 垂直方向上的距离由 margin 决定，属于同一个 bfc 的两个相邻的 box 的 margin 会重叠【内部的元素】
bfc的区域不会与float box重叠【两列布局原理】
bfc就是页面上一个隔离的容器，容器内的元素不会影响容器外的元素。反之如此。【本身概念】
计算 bfc 的高度时，float元素也会参与计算【清除浮动】
（3）哪些情况会生成BFC
根元素
float不为none的
position为absolute和fixed的
overflow不为visible的
（4）应用
- margin 重叠问题解决
- 两列布局
- 清除浮动
5. 前端的布局单位有哪些，有什么区别
em
rem
px
pt
pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度
5. flex布局
6. 盒模型（标准盒模型，怪异盒模型）
box-sizing： border-box 怪异盒模型
box-sizing： content-box 标准盒模型
区别：怪异盒模型的width包括padding，标准盒模型不包括
7. 浏览器是如何解析css选择器的: 从右到左
8. 浮动
（1）浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素。
与浮动元素同级的元素的非浮动元素（内联元素）会跟随其后
（2）如何清除浮动
父级div设置高度
最后一个浮动元素添加样式clear：both。或给父级元素设置伪元素并添加该样式
父级div设置overflow： hidden/auto
9.伪类和伪元素的区别
伪类：
格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。
伪元素 ::
伪元素可以创建一些文档语言无法创建的虚拟元素。
- 比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。
- 伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。
而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
10. 什么情况下会触发重排重绘
11. 如何避免重排重绘
12. 如何实现即时通讯 websocket
13. link 和 @import
link除了加载 CSS 还有其他功能
@import 是在页面加载完之后加载，页面闪烁
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。兼容性 link 比 @import 好
DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。
JS
1. dom事件流
捕获型事件： document->当前元素
冒泡型事件：当前元素->document
2. 事件代理
3. cookie，sessionStorage,localStorage的区别和特性
4. 闭包。
（1）定义： 闭包是有权访问一个函数作用域变量的函数，创建闭包的常见方式就是在一个函数内部创建另一个函数。
（2）特点： 如果内部函数引用了外部函数中的变量，相当于授权该变量能被延迟使用。因此，当外部函数调用完成后，这些变量的内存不会被释放（值会被保存），闭包仍然可以使用这个值。
（3）缺点：会导致内存泄漏
5. settimeout(0)
创建一个异步线程，放到调用栈，当主线程空闲时立即执行。最小的settimeout时间间隔是4ms。
6. iframe
(1)缺点
iframe 会阻塞主页面的 onload 事件
搜索引擎检索程序无法解读这种页面，不利于seo
iframe 和主页面共享连接池，而浏览器对相同的连接有限制，所以会影响页面的并行加载。
解决： xxx.src="xxx.html"。将iframe的src设置为主页面的html
7. 内存泄漏
（1）定义： 当一块内存不再被应用程序使用的时候，由于某种原因，这块内存没有返还给操作系统
（2）会导致的问题： 运行缓慢，崩溃，高延迟等。
（3）常见的内存泄漏及解决方式：
- 意外的全局变量
一个未申明的变量会在全局对象中创建一个新的变量。即window对象下。（windows对象是一直存在的，不会被销毁，除非页面卸载）
指向window对象的this下绑定的变量
解决：use strict. 使用严格模式，能避免创建意外的全局变量。
- 被遗漏的定时器和回调函数
解决：离开页面的时候及时清除，比如微信小程序页面假如设置了 setTimeout，那 onHide 的时候，要记得 clearTimeout
dom之外的引用：如果某时刻需要移除某元素，需要将它所有的引用清除比如事件绑定等。
闭包：闭包是可以获取到父级作用域的匿名函数。
8. requestAnimation 与 settimeout，setInterval
注意： 动画若每秒达到60帧，用户就无法感知画面的间隔感。requestAnimation就是这个频率。除此之外，还有下列优点
（1）会把每一帧的所有dom集中起来，在一次重绘或重排中就完成。
（2）在隐藏或不可见的元素中，rrequestAnimation 将不会进行重排重绘，意味着减少cpu,gpu和内存使用量
（3）requestAnimation 优于 setTimeout 的地方在于它是浏览器专门为动画提供的api，在运行的浏览器会自动化方法的调用，并且如果页面不是激活状态，动画会自动停止，有效节省了cpu的开销。
9. get请求和post请求的区别
（1）传送方式：get(地址栏) post（报文）
最直观的区别就是 GET 把参数包含在 URL 中，POST 通过 【request body】 传递参数。
（2）传送长度。GET请求在URL中传送的参数是有长度限制的，而POST么有。
（3）get发送一个tcp包，post发送2个【加分项】
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
header 和 body 分开发送是部分浏览器或框架的请求方法，不属于 post 必然行为。
（4）get请求会被浏览器主动缓存，而post不会，除非手动设置。
（5）get只能用url编码，post支持多种编码方式【见下文】
（6）GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
（7）GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
10. 原生ajax请求
（1）创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else {
xhr = new ActiveObject('Microsoft.XMLHttp');
}
(2)连接服务器
xhr.open('GET'，url,true)
(3)向服务器发送请求
xhr.send();
(4)接收服务器的返回
xhr.onReadyStatechange = function(){}
xhr.responseText: 字符串形式的响应数据
xhr.responseXML: xml格式的响应数据
xhr.status/xhr.statusText： 一数字和文本形式返回的http状态吗
xhr.getAllResponseHeader()： 获取所有的相应头
getResponseHeader()： 获取相应肉中的第一个字段的值
readyState 属性
0： 未初始化，还没调用 open() 方法
1: 载入，已经调用send(),正在发送请求
2：载入完成，send()已完成，已收到响应
3: 解析，正在解析响应内容
4: 完成，响应内容解析完毕，可在客户端使用
function ajax(url, fnSucc, fnFaild) {
var xhttp;
// 第一步：创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
// 现代浏览器
xhttp = new XMLHttpRequest();
} else {
// IE6等老版本浏览器
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 第四步：处理响应
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
fnSucc(xhttp.responseText)
} else {
if (fnFaild) fnFaild(xhttp.responseText)
}
}
};
// 第二步：初始化XMLHttpRequest方法
xhttp.open('GET', url);
// 第三步：XMLHttpRequest向服务器发送请求
xhttp.send();
}
11. ajax的post方法中content-type有哪些类型
content-type是指http/https发送信息至服务器的内容编码类型。服务器根据编码类型使用特定的解析方式。
（1）application/json
（2）application/x-www-form-urlencoded
（3）application/xml
（4）multipart/form-data
12. 原型链
13. 微和宏任务分别包括哪些
14. 正则
15. fetch 和 ajax 的区别
https://juejin.im/entry/599cfac56fb9a0249b4841b8
es6
1. es6中新增的数据类型 symbol
综合
1. pc端与h5的区别
（1）事件
（2）兼容性
（3）布局
2. 哪些时候会引起页面的重排重绘。怎么避免
3. 了解w3c标准吗，说说
https://75.team/post/first-impression-of-w3c.html
框架
1. vue中不同组件中如何通信
2. vue的生命周期
3. 如何理解vue的响应式系统
4. 既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?
5. vue中key有什么用
小程序
1. 小程序生命周期
应用，页面，组件
应用：【onLaunch】【onShow】【onHide】
用户首次打开小程序，触发 onLaunch 方法（全局只触发一次）。
小程序初始化完成后，触发 onShow 方法，监听小程序显示。
小程序从前台进入后台，触发 onHide 方法。
小程序从后台进入前台显示，触发 onShow 方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
页面：【onLoad】【onShow】【onReady】【onHide】【onUnload】
组件:
- 【created】 组件实例化，但节点树还未导入，因此这时不能用setData
- 【attached】 组件初始化完毕，节点树完成，可以用setData渲染节点，但无法操作节点
- 【ready】 组件布局完成，这时可以获取节点信息，也可以操作节点
- 【moved】 组件实例被移动到树的另一个位置
- 【detached】 组件实例从节点树中移
参考：https://www.cnblogs.com/lilicat/p/10456481.html
打包工具
webpack与gulp的区别
webpack的构建流程
如何用webpack来优化前端性能
如何提高webpack的打包速度
如何提高webpack的 构建速度
如何配置webpack多页面应用
算法
1. 快速排序
网络
- TCP 三次和四次握手
git
1. 版本回退
安全问题
1. xss，csrf
最后
1. 在上个公司的收获，评价下上个公司
2. 你的优缺点
3. 你的爱好
4. 职业规划
5. 你有什么想问的吗
结束语
模拟面试结束了，虽然是模拟的面试，但自己能够及时在真正面试前认识到很多自己的不足，并及时复习，我觉得也是一件很棒的事情。
但愿能够给大家带来一点启发，也欢迎大家关注我的公众号，期待和大家一起交流成长
