页面加载->渲染流程
2017-03-14 本文已影响32人
raincoco
渲染流程：
转化：浏览器从磁盘或网络读取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/
webView与浏览器直接访问的区别
