初中级前端面试复习总结（浏览器、HTTP、前端安全）

浏览器

• 页面渲染流程

1）字节流解码。浏览器获得字节数据，根据字节编码将字节流解码，转换为代码。
2）输入流预处理。字符数据进行统一格式化。
3）令牌化。从输入流中提取可识别的子串和标记符号。可以理解为对HTML解析，
   进行词法分析，匹配标签生成令牌结构。
4）构建DOM树、构建CSSOM树。DOM树和CSSOM树的构建过程是同时进行的，
   在 HTML 解析过程中如果遇到 script 标签，解析会暂停并将执行权限交给 JavaScript 引擎，
   等到 JavaScript 脚本执行完毕后再交给渲染引擎继续解析。（补充：如果脚本中调用了改变 DOM 结构的 document.write() 函数，
   此时渲染引擎会回到第二步，将这些代码加入字符流，重新进行解析。）
5）构建渲染树。DOM树负责结构内容，CSSOM树负责样式规则，为了渲染，需要将它们合成渲染树。
6）布局。布局阶段根据渲染树的节点和节点的CSS定义以及节点从属关系，
   计算元素的大小和位置，将所有相对值转换为屏幕上的绝对像素。
7）绘制。绘制就是将渲染树中的每个节点转换成屏幕上的实际像素的过程。
   在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint方法在屏幕上显示其内容。
   实际上，绘制过程是在多个层上完成的，这些层称为渲染层（RenderLayer）。
8）渲染层合成。多个绘制后的渲染层按照恰当的重叠顺序进行合并，而后生成位图，最终通过显卡展示到屏幕上。

数据变化过程：字节 → 字符 → 令牌 → 树 → 页面

• 回流、重绘

1、回流（Reflow）
在布局完成后，对DOM布局进行修改（比如大小或位置），会引起页面重新计算布局，
这个过程称为“回流”。
2、重绘（Repaint）
对DOM进行不影响布局的修改引起的屏幕局部绘制（比如背景颜色、字体颜色），
这个过程称为“重绘”。

小结：
回流一定会引起重绘，而重绘不一定会引起回流。由于回流需要重新计算节点布局，
回流的渲染耗时会高于重绘。

对于回流重绘，浏览器本身也有优化策略，浏览器会维护一个队列，
将回流重绘操作放入队列中，等队列到达一定时间，再按顺序去一次性执行队列的操作。

但是也有例外，有时我们需要获取某些样式信息，例如：
offsetTop，offsetLeft，offsetWidth，offsetHeight，
scrollTop/Left/Width/Height，clientTop/Left/Width/Height，getComputedStyle()，
或者 IE 的 currentStyle。

这时，浏览器为了反馈准确的信息，需要立即回流重绘一次，所以可能导致队列提前执行。

• 事件循环（Event Loop）

在浏览器的实现上，诸如渲染任务、JavaScript 脚本执行、User Interaction（用户交互）、
网络处理都跑在同一个线程上，当执行其中一个类型的任务的时候意味着其他任务的阻塞，
为了有序的对各个任务按照优先级进行执行浏览器实现了我们称为 Event Loop 调度流程。

简单来说，Event Loop 就是执行代码、收集和处理事件以及执行队列中子任务的一个过程。

1、宏任务
在一次新的事件循环的过程中，遇到宏任务时，宏任务将被加入任务队列，
但需要等到下一次事件循环才会执行。

常见宏任务：setTimeout、setInterval、requestAnimationFrame

2、微任务
当前事件循环的任务队列为空时，微任务队列中的任务就会被依次执行。
在执行过程中，如果遇到微任务，微任务被加入到当前事件循环的微任务队列中。
简单来说，只要有微任务就会继续执行，而不是放到下一个事件循环才执行。

微任务队列属于任务运行环境内的一员，并非处于全局的位置。
也就是说，每个任务都会有一个微任务队列。

常见微任务：Promise.then、Promise.catch、MutationObserver

3、流程
1）取出一个宏任务执行，如果碰到宏任务，将其放入任务队列，
   如果碰到微任务，将其放入微任务队列
2）检查微任务队列是否有可执行的微任务，如果有则执行微任务。
   微任务执行过程中，如果碰到宏任务，将其放入任务队列。如果碰到微任务，
   继续将其放入当前的微任务队列，直到微任务全部执行。
3）