转:浏览器渲染的原理
浏览器渲染过程:
- 用户输入网址(假设是个 html 页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回 HTML 文件;
- 浏览器开始载入 HTML 代码,发现 <head> 标签内有一个 <link> 标签引用外部 CSS 文件;
- 浏览器又发出 CSS 文件的请求,服务器返回这个 CSS 文件;
- 浏览器继续载入 HTML 中 <body> 部分的代码,并且 CSS 文件已经拿到手了,可以开始渲染页面了;
- 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
- 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签,赶快运行它;
- JavaScript 脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个 <div>(style.display=”none”)。由于突然少了一个元素,浏览器不得不重新渲染这部分代码;
- 终于等到了 </html> 的到来,浏览器泪流满面……
- 等等,还没完,用户点了一下界面中的“换肤”按钮,JavaScript 让浏览器换了一下 <link> 标签的 CSS 路径;
- 浏览器召集了在座的各位
<div><span><ul><li>
们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。
- 通过以下手段可以减轻cssom带来的影响
将script脚本放在页面底部
尽可能快的加载css样式表
将样式表按照media type和media query区分,这样有助于我们将css资源标记成非阻塞渲染的资源。
非阻塞的资源还是会被浏览器下载,只是优先级较低。
3.把DOM和CSSOM组合成渲染树(render tree)。render树
4.在渲染树的基础上进行布局,计算每个节点的几何结构。
布局(layout):定位坐标和大小,是否换行,各种position, overflow, z-index属性 ……
5.把每个节点绘制到屏幕上(painting),正式开画!
来源: http://www.bubuko.com/infodetail-2004320.html