前端面试知识点【JS篇】
JS
写在前面：
首先，本文主要是自己在学习过程中，总结的一些面试中会遇到的常见知识点。主要是方便自己随时查看复习，当然能为友友们提供帮助也是我的荣幸。
然后，内容没有分类，基本上是遇到了就会补充，会有点乱，希望文章的目录可以帮到您。
另外，如果不出意外的话，会有一些错误或不完善的地方，欢迎留言或私信指正，批评的话就不用了。
最后，本文会一直完善和更新。
祝大家生活愉快，早日oc。
1、var、const和let的区别
他们的区别主要体现在：
变量提升方面：var存在变量提升、但let和const不存在变量提升。
块级作用域方面：let和const具有块级作用域，而var没有。
重复声明方面：var在声明变量时是可以重复声明的，而了let和const不可以。
暂时性死区：let和const存在暂时性死区，如果不声明是无法使用的。而var可以先使用，后声明。
暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
初始值：var和let在定义时可以不设置初始值，但const必须设置初始值。而且初始值是原始数据类型的话，值不可修改，但引用数据类型的属性可以修改。
const定义引用数据类型的值可以修改，但是指针指向不会改变。
题目：
const b = [1, 2];
b = []; //报错，因为const定义常量赋值后不能重新再给常量赋值
b.push(2); //成功，输出为[1,2,2]
b[0] = 2; //成功，输出为[2,2]
b[20] = 2; //成功，输出为[1,2,<18 empty items>,2]
2、JS的事件执行机制(event loop)
首先，JS从script开始执行主线程的执行，
执行的时候，首先判断该任务是同步任务还是异步任务，
遇到同步任务放在主线程上立即执行，异步任务根据异步事件的类型，会被放到对应的宏任务和微任务队列中去。
在当前执行栈为空时，主线程会查看微任务队列是否有事件存在
如果存在，执行微任务，直至微任务的队列为空，然后取出宏任务队列中最靠前的事件，把对应的回调加入执行栈。
如果不存在微任务，就取出宏任务队列中最靠前的事件，把对应的回调加入执行栈
循环异步任务队列，直至事件全部执行完毕。
（每一个宏任务和宏任务的微任务执行完后都会对页面 UI 进行渲染。）
await 是一个让出线程的标志。await 后面的表达式会先执行一遍，将 await 后面的代码加入到 微任务队列中，这个微任务是 promise 队列中微任务，然后就会跳出整个 async 函数来继续执行后面的代码。
宏任务主要有：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件。
微任务主要有：Promise. then、Promise.catch、process.nextTick()
JS 中任务的执行顺序优先级是：主栈全局任务> 宏任务中的微任务 > 下一个宏任务。
promise构造函数是同步执行的；then方法是异步执行的微任务
当微任务中有process.nextTick时，先执行Process.nextTick
宏任务的定时器执行顺序：setTimeout——>setInterval——>setImmediate
3、为什么js是单线程的？
如果js是多线程的，那么当他们同时运行，操作一个dom时，下达两个不同的命令，dom将无法执行
扩展：
进程：是cpu分配资源的最小单位（是拥有资源和独立运行的最小单位）
线程：是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程可以有多个线程。）
浏览器是多进程的。每打开一个页面，其实就是打开了一个进程。
4、为什么js是异步的？
如果js不存在异步，只能自上而下执行，那么当上一个任务执行很长时间后，下面的任务就都会阻塞。对用户来说，页面就卡死了，这样用户体验较差。
JS主要是通过事件循环来实现异步的。
5、GUI渲染线程主要工作内容(页面渲染)
- 解析html文档生成DOM树
- css代码转换为cssom (css object model)
- 结合DOM和CSSOM生成渲染树
- 生成布局（layout）
- 将布局绘制(paint)在屏幕上
6、浏览器解析渲染页面
浏览器解析渲染页面分为一下五个步骤：
- 根据 HTML 解析出 DOM 树（与css解析并行，script会阻塞DOM解析和渲染）
DOM 树解析的过程是一个深度优先遍历，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。
- 根据 CSS 解析生成 CSS 规则树（与HTML解析并行，不会阻塞DOM解析，但会阻塞渲染）
解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。浏览器在 CSS 规则树生成之前不会进行渲染。
- 结合 DOM 树和 CSS 规则树，生成渲染树
DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。
- 根据渲染树计算每一个节点的信息（布局）
布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
重排（回流）：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
- 根据计算好的信息绘制页面
绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
重排（回流）：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染
7、为什么JS 会阻塞 DOM 解析？
因为浏览器无法知道DOM树的内容，如果先解析了DOM，而最后js又把DOM全部删除了，那么浏览器就白解析了一次，因此需要在js执行完后，再解析DOM。
扩展：
为什么css不会阻塞DOM解析，而会阻塞DOM渲染？
在浏览器解析过程中，HTML与 CSS是并行的，所以不会阻塞DOM的解析。然后渲染的时候，渲染树必须结合DOM树和CSS树，如果CSS没有解析完成，那么就无法渲染。
为什么CSS会阻塞JS的执行？js会触发页面渲染？
如果js想要获取到DOM的最新样式，则必须先把对应的CSS加载完成后，否则获取的样式可能是错误或者不是最新的。
总结：
css不会阻塞DOM的解析，但会阻塞DOM的渲染。或者说是阻塞渲染树的生成，进而阻塞DOM的渲染。
js会阻塞DOM的解析
css会阻塞js的执行
浏览器遇到