浏览器渲染机制
Opened this issue · 0 comments
LadderLay commented
从输入一个url开始...
DNS查找
TCP三次握手
...
关键渲染路径(Critical rendering path)
- 构建 DOM 树 （html的解析涉及到tokenization和树的构造）
⚠️ 注意：解析器遇到非阻塞资源，如一张图片/css时，浏览器会发出请求并继续解析。而<script>标签会影响阻塞渲染并停止html的解析【Q：<script>标签如何自处 常用的几个位置 async defer属性】 - 构建 CSSOM 树
- JavaScript 编译
- 渲染
- Style
将CSSOM树和DOM树组合成一个Render树，从根节点开始遍历可见节点，计算每个可见元素的布局，将其绘制到屏幕上。【此处可以通过GPU而不是CPU进行一部分的绘制从而提升性能，优化主线程。】 - Layout
根据渲染树将节点布局在屏幕上的正确位置
（每次设备旋转、浏览器缩放时layout均会发生。） - Paint
绘制像素到屏幕上
5.CRP关键渲染树的优化
补充说明
1、<script>标签到底应该放在哪里：
<script>标签一般可以放在头部或尾部。
当它放在<head>部分时，浏览器解析html会先下载处理相关的script(如涉及到请求外部脚本文件，此时会暂停解析页面上的html),再继续向下解析其他的html。
当它放在<body>部分时,浏览器会先解析完html再处理下载js
过去的处理：
将库脚本、普通的不影响性能和页面加载的脚本放在头部；将影响页面渲染的<script>标签放在尾部，避免解析时被阻塞
现在：放入中，并使用<script>的async、defer属性；async说明该脚本异步执行,不保证执行顺序；而defer说明该脚本顺序执行（在整个文档加载之后）
【Q：difference between 异步 & 延迟 各自的使用场景】
1-1、<css>标签为什么要放在头部：