页面加载->渲染流程

渲染流程:


页面加载->渲染流程_第1张图片

转化:浏览器从磁盘或网络读取HTML的原始字节,浏览器会将这段原始文件按照相应编码规范进行解码(现在一般为utf-8)。

符号化:根据W3C标准转化为对应的符号(一般在尖括号内)。

DOM构建:HTML解析器会解析其中的tag标签,生成token,遇到CSS或JS会发送相应请求。HTML解析时阻塞主进程的,CSS一般也是阻塞主进程的(媒体查询时例外),也就是说它们在解析过程中是无法做出响应的。而JS手动添加async后达到异步加载,根据token生成相应DOM树。

CSSDOM构建,添加CSS样式生成CSSDOM树。

渲染树构建,从DOM树的根节点开始,遍历每个可见的节点,给每个可见节点找到相应匹配的CSSOM规则,并应用这些规则,连带其内容及计算的样式。

样式计算,浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。

布局,浏览器将元素进行定位、布局。

绘制,绘制元素样式,颜色、背景、大小、边框等。

合成,将各层合成到一起、显示在屏幕上。

参考链接

https://bitsofco.de/understanding-the-critical-rendering-path/

页面加载->渲染流程_第2张图片
页面加载->渲染流程_第3张图片

webView与浏览器直接访问的区别

https://bbs.exmobi.cn/thread-3100-1-1.html

你可能感兴趣的:(页面加载->渲染流程)