目的
- 面试
- 为了写出更好的代码，提升用户体验
进程与线程
定义自己百度
浏览器多进程
- 网络进程
- 渲染器进程
此处省略一万字
浏览器多线程
- I/O 事件触发线程
- 定时器线程
- http 线程
此处省略一万字
进程间的通信
通过 IPC 通信
渲染器进程
解析 HTML,处理 js,css 等资源
HTML->DOM TREE
词法分析
第一种首屏
JS 会阻塞 HTML 解析,因为 JS 可以操作 DOM，影响 DOM TREE 生成, 当遇到一个耗时的 JS 代码,浏览器不会干等着，把解析好的渲染出来
第二种浏览器的刷新,同时出来
好复杂，不管咯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>init</div>
<script type="text/javascript" src="./testRender.js"></script>
<div>hsq</div>
</body>
</html>
function sleep(time) {
const temp = Date.now();
while (Date.now() - temp < time) {}
}
sleep(5 * 1000);
给 DOM TREE 化妆(CSS)
确定位置,大小，颜色等 ，弄完了这些 Layout TREE 横空出世
DOM+CSS -----> Layout Tree
DOM Tree与Layout Tree不是一 一对应， 设置了display: none不会出现在Layout Tree上。 还有::before 创建一个伪元素，出现在Layout Tree上，不会出现在DOM TREE上
主线程遍历Layout Tree生成 Paint Record(绘制记录表)
绘制像素点
下面有点复杂,上图
重排和重绘都会占用主线程
主线程只能干一件事，要么
layoupaint等，要么执行js
定时器动画会掉帧，定时器不稳，并且还要我们自己算时间，
开发人员控制
requestAnimationFrame浏览器控制，让我们的函数每一帧只执行一次，因为执行多了没必要，执行少了不行，一次刚刚好
