浏览器的渲染过程/或者从URL到页面渲染的过程

从URL到页面渲染的过程

1、当用户输入URL提交到DNS域名解析 找到真正的IP 向服务器发起请求

2、服务器进过解析交给后台处理完成返回数据,浏览器接受数据文件(html、js、css、图片 等资源)

3、浏览器加载到资源(html、css、js、等)后进行语法解析建立相应的内部数据结构(DOM)

4、最后载入解析资源的文件 渲染页面

渲染页面的过程:

1、解析html得到一个DOM树

2、解析css形成CSSOM树

3、然后CSSOM树和DOM树整合成render树

4、根据render树的计算出每个元素的大小颜色等信息形成布局render树(layout)

5、绘制 根据计算好的信息绘制整个页面

回流reflow   :  回流也叫重排 就是等浏览器发现某个部分发生了变化影响了布局后,需要倒回来重新计算渲染,这过程就叫回流。

重绘repaint:  就是一个元素的外观(颜色、背景等)发生了改变但是 没有改变布局的情况下,只会引起浏览器屏幕的部分重画。

解析HTML过程中的问题

自上而下解析HTML,逐渐构建起DOM tree,遇到style、link标签,会下载解析样式表,同时构建CSSOM tree,不会阻塞html的解析。但是遇到script标签,它会立即下载并执行得到的脚本,会阻塞HTML的解析。直到脚本里的同步代码部分(settimeout等异步操作之外的代码)执行完之后,再接着解析接下来的HTML。
直到将整个HTML文档的最后一个标签解析完毕,DOM tree生成完毕。然后CSSOM tree 、render tree生成,开始渲染。

原文地址:https://www.cnblogs.com/xuwupiaomiao/p/12917982.html