浏览器渲染机制
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>
标签为什么要放在头部: