记录本人在广州面试中遇到的一些问题（主要是技术一面），公司中小企业居多，也有大厂（非BAT）。岗位一般写的中级前端开发或1～3年经验岗位。问题主要选取一些高频和基础的问题。（问题的回答只是本人的理解，非参考答案，有些答案只给个提示，详解可谷歌百度或在掘金内搜索相关文章）
题目
- 考察频率指相关问题的考察频率，并非只是提到的点。
JavaScript基础
1、声明提升类问题 （考察频率：高）
变量声明和函数声明都会提升，但函数会提升到变量前。 具体解释可参考《你不知道的JavaScript（上卷）》
2、js存储方式（考察频率：中）
- cookie
- sessionStorage
- localStorage
- indexedDB
3、什么情况下会遇到跨域，怎么解决？（考察频率：高）
- 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。
- jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。
4、Promise中的执行顺序（考察频率：高）
参考阮一峰老师书中的例子
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
复制代码上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
5、JavaScript事件循环机制相关问题（考察频率：高）
- 事件循环机制的概念
关键字：单线程非阻塞、执行栈、事件队列、宏任务(setTimeout()、setInterval())、微任务(new Promise())
可参考： zhuanlan.zhihu.com/p/33058983
- 宏任务、微任务、同步任务的执行顺序
setTimeout(function () {
console.log(1);
});
new Promise(function(resolve,reject){
console.log(2)
resolve(3)
}).then(function(val){
console.log(val);
})
console.log(4);
// 2
// 4
// 3
// 1
复制代码先按顺序执行同步任务，Promise新建后立即执行输出2，接着输出4，异步任务等同步任务执行完后执行，且同一次事件循环中，微任务永远在宏任务之前执行。这时候执行栈空了，执行事件队列，先取出微任务，输出3，最后取出一个宏任务，输出1。
6、for循环中的作用域问题（考察频率：高）
写出以下代码输出值，尝试用es5和es6的方式进行改进输出循环中的i值。
for (var i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
复制代码- 输出5个6，因为回调函数在for循环之后执行，所有函数共享一个i的引用。
- es5:
for (var i=1; i<=5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j*1000);
})(i);
}
复制代码- es6:
for (let i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
复制代码7、闭包的作用（考察频率：中）
闭包的目的是外部函数可以访问内部函数的作用域（局部作用域）。比如访问到内部作用域的变量。
8、原型及原型链（考察频率：中）
参考小册《Web 前端面试指南与高频考题解析》
原型的理解
- 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
- 所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象
- 所有的函数，都有一个prototype属性，属性值也是一个普通的对象
- 所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值
原型链的理解
一段代码如下：
// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = function () {
alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
console.log(this.name)
}
// 测试
f.printName()
f.alertName()
f.toString()
复制代码因为f本身没有toString()，并且f.__proto__（即Foo.prototype）中也没有toString。当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。
如果在f.__proto__中没有找到toString，那么就继续去f.__proto__.__proto__中寻找，因为f.__proto__就是一个普通的对象而已嘛！
f.__proto__即Foo.prototype，没有找到toString，继续往上找 f.__proto__.__proto__即Foo.prototype.__proto__。Foo.prototype就是一个普通的对象，因此Foo.prototype.__proto__就是Object.prototype，在这里可以找到toString。 因此f.toString最终对应到了Object.prototype.toString 这样一直往上找，你会发现是一个链式的结构，所以叫做“原型链”。如果一直找到最上层都没有找到，那么就宣告失败，返回undefined。最上层是什么 —— Object.prototype.__proto__ === null
9、重绘和回流（考察频率：中）
- 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
- 回流：当Render Tree（DOM）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
- 回流要比重绘消耗性能开支更大。
- 回流必将引起重绘，重绘不一定会引起回流。
- 参考：juejin.im/post/5a9923…
10、实现一个深拷贝（思路）（考察频率：中）
对象中可能又存在对象，所以需要深拷贝。首先需要知道这是一个递归调用，然后要判断一些特殊类型（数组，正则对象，函数）进行具体的操作，可以通过Object.prototype.toString.call(obj)进行判断。
- 参考：juejin.im/post/5abb55…
11、js浮点数运算精度问题（0.1+0.2!==0.3）
比如在 JavaScript 中计算 0.1 + 0.2时，到底发生了什么呢？
首先，十进制的0.1和0.2都会被转换成二进制，但由于浮点数用二进制表达时是无穷的，例如。
JavaScript 代码:
0.1 -> 0.0001100110011001...(无限)
0.2 -> 0.0011001100110011...(无限)
IEEE 754 标准的 64 位双精度浮点数的小数部分最多支持 53 位二进制位，所以两者相加之后得到二进制为：
JavaScript 代码: 0.0100110011001100110011001100110011001100110011001100
因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了 0.30000000000000004。所以在进行算术计算时会产生误差。
参考：blog.csdn.net/helloxiaoli…
浏览器相关
12、浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程。 （考察频率:高）
加载过程：
- 浏览器根据 DNS 服务器解析得到域名的 IP 地址
- 向这个 IP 的机器发送 HTTP 请求
- 服务器收到、处理并返回 HTTP 请求
- 浏览器得到返回内容
渲染过程：
- 根据 HTML 结构生成 DOM 树
- 根据 CSS 生成 CSSOM
- 将 DOM 和 CSSOM 整合形成 RenderTree
- 根据 RenderTree 开始渲染和展示
- 遇到