背景
2020年在eBay大数据团队做可视化项目时，除了后端的spark和java，还需要负责前端数据可视化页面的定制，这就需要前端知识了，包括但不限于：webpack、chrome、js引擎。那时候没什么经验，仅有股热情，按着业务团队需要定制了很多Metrics页面，并痛感浏览器知识的不足，于是去极客时间系统学习了李兵老师的《浏览器工作原理与实践》。李兵老师的课程我都很推荐，条理清晰，层层递进，学习效果好。
说句题外的话，教学也是一种专业技能，优秀的老师能把知识以最大的效率传输，也就是学习的“带宽”较高。我们学习时要注意选择“带宽”较高的老师，注意学习效率问题。
另外，学习时不要只关注正文，看看课程下同学们的留言，非常有意思，提供了不同的视角，有一半知识是跟留言学的。
留言中，印象最深刻的是浏览器是一个伪装成app的操作系统
据统计数据，疫情以来ChromeOS设备大卖，随着云时代的来领，易入门的轻量级长续航的此类设备大火。
Chrome的特点
浏览器的架构经历过数次升级。在最早的Maxthon的时代，是单进程的，我记得那时候一个tab页面挂了，所以打开的tab页面都会跟着挂掉。
而chrome浏览器开一个页面（不算通过站点的），会开一个V8引擎进程（应该是进程，因为相互隔离；线程是共享部分数据，一个线程挂了影响其他）
浏览器有些进程是单个的
比如浏览器主进程（处理界面及用户响应），网络进程，GPU进程
有些是一对一的，比如插件进程和渲染进程
这些进程的特点是，个体容易挂掉，所以在沙盒环境，且一事一个进程，不会相互影响
service worker
这个是非常有用的新特性，改变了http的单向请求，能够接受服务器端的消息推送
渲染进程
重点说下渲染进程
- html搭建骨架 -》 dom树
- CSS附上体肤 -》 修饰了dom树加上css属性
- layout
以上3步，从程序角度，是html文字变为内存的树（第一步dom树），然后树上操作运算，然后变为平面layout的操作 - 图层信息 layer （什么情况下图层？透明度设置，蒙版，z轴设置）
- 划分为可视范围，块状 tile（单块瓷砖）
- raster。什么是raster？实打实把图像矩阵填充，一般是gpu做，并行做，单个块状物和其他块是无关的，所以可以gpu快速并行做
- quaddraw，最后让浏览器主线程展示在界面
所以，如果元素动了相对位置(几何属性，响应了布局)，要重排 重新排版，也就是完整走遍上图的全部流程
如果只是改了背景颜色或者透明度，相当于只影响了这个元素，所以只需要重绘就可以，因为没有几何改变，所以省略了layout和layer这两步
直接合成：我们使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，这是最快的
js 事件驱动
各种各样的消息加入到队列，作为源事件，驱动整个页面
- 向后台取数
一般单页应用加载了单一网页，
每一次http请求，都是重构了页面（只剩下单页的概念还在），html构造变了，css变了，同时会触发onload事件。
浏览器教给网络进程去访问后台，拿到数据包头后通知渲染进程
onload函数：
进入函数，首先要jit，解析成中间代码 --这点很重要，js和java相像（最早chrome很激进，直接编译成代码，速度慢，内存费）
所以可以适当看看中间代码，比如引用本作用域和上层作用域，在汇编代码上有什么不同？这样了解了v8的运行内幕 v8-debug.md
建立运行环境：变量环境（看看本次涉及的变量范围，这里和作用域相关，变量在栈和堆上的分配），词法环境
作用域（静态），和上下文（动态）–栈帧压栈