视频:
https://www.bilibili.com/video/BV1x54y1B7RE?from=search&seid=10948197841954912425
比较好的博客:
https://juejin.cn/post/6844903569200513037
https://juejin.cn/post/6844904007526252558
名词解释:
https://www.cnblogs.com/caiyy/p/10406934.html
js解释:
https://juejin.cn/post/6844904190993514503
核心流程:
1 浏览器进程 (1 网络线程 2 UI线程(创建渲染器进程(1主线程: dom树。css 树(样式)。-》 layout布局。 绘制表。layer treee。 ))2 合成器线程 (合成器帧)3 栅格线程(制造帧))
用户层
浏览器引擎。 数据持久层(cookies)。
渲染引擎。 网络,js解析器。
进程 和 线程。
进程(映射到内存空间),进程(映射到内存空间)。
进程间IPC管道通信。
之前浏览器是单进程,1 不稳定。2 不安全。3 不流程。
所以需要多进程,
- 1 浏览器进程: 负责标签控制。(地址栏,书签,前进后退)
- 2 网络进程: 发送,接受请求
- 3 缓存进程。
- 4 渲染器进程:(HTML所有的标签内容)
- 5 GPU进程:渲染。
- 6 插件进程(flash)
浏览器进程 的UI线程 如果是 请求网络进程。
1 网址:DNS进行域名解析。服务器数据。
2 关键字: 默认配置搜索引擎来查询。
safebrowsing。
UI线程。
渲染器继承。 html -dom数据结果。
html->tokenis 词法分析 ->Tree dom树构造。->dom
html引入:图片和css。网络下载和图片加载。
不会阻塞html解析。因为不会影响dom的生产。
当时当遇到JS,则会停止解析,加载执行js去。
document.wierter();->tokenins.
1 script标签放在合适的位置 2 asycn放在合适的位置。
h2 默认字体。
节点的坐标 以及节点占用多大面积。
Layout树。记录了x,y坐标和边框尺寸大小,
layout tree;
1 添加了 display:none 不会出现在layout tree上面
2 但是 添加了 div::before{content:“obj”}则只会在layout tree。
正确的 层级: 绘制表。绘制顺序。
像素点。 栅格化。 可视区的内容。延迟展示。
复杂的栅格化方式:合成。
Layer Tree。
合成器线程。
存储在GPU, 合成器镇。
主线桥 -> DOM->
合成器线程
栅格进程-》
重排:
颜色属性,重绘。
transform布局不会进行 重排和重绘(位置变换和宽高变换)。
为什么要大量的避免重绘和重排: