码迷,mamicode.com
首页 > 其他好文 > 详细

页面渲染原理

时间:2016-03-14 13:46:21      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

渲染流程

1.解析HTML文档

2.生成DOM树

3.生成渲染树。渲染树的节点只包括DOM树种可见节点,除了节点,渲染树含有节点的样式。

4.浏览器根据渲染树绘制页面。

技术分享

 

与绘制相关的还有两个概念,回流重绘

回流:元素的位置、大小或盒模型等改变影响了布局需要重新渲染部分或全部页面。

重绘:元素背景颜色等改变但不影响布局需要重新绘制部分页面。

 

可见,回流对性能的伤害大于重绘。且回流必然引起重绘。

 

引起回流的操作举例:

DOM节点增删

display:none

position变化

flow变化

窗户大小变化

字体大小变化

文字内容增删

其他能改变位置、尺寸、边框、边距等属性的操作

 

引起重绘的操作举例:

背景改变(颜色、图片)

visibility改变

opacity改变

shadow改变

(以上举例是理论上的,未测试)

 

参考:

高性能WEB开发

web前端优化之refolow

页面渲染原理

标签:

原文地址:http://www.cnblogs.com/feitan/p/5271860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!