浏览器渲染原理

网上大神们的文章都很长很详细,看完了自己总结一点点。先来一张图


1. 浏览器会解析三个东西:一般页面里面都含有HTML,CSS,JS脚本

  • HTML----> 解析生成DOM Tree,它是一个倒着的树,跟节点是HTML,然后下一级并列这head和body
  • CSS  ------> 解析CSS会产生一个叫做CSS规则树的东西 CSS Rule Tree
  • JS ----->  通过DOM API和CSSOM API 来操作DOM Tree和CSS Rule Tree

2. 解析完成后,浏览器通过dom tree 和css rule tree 来构造rendering tree 

  • 渲染树并不是DOM树,像header和display:none的东西没必要放在渲染树中
  • css rule tree 为了完成匹配并把css rule 附加到渲染树的每个dom element上
  • 计算每个element的位置,被称为layout(布局)和reflow过程
3. 最后通过调用操作系统的Native GUI的API来绘制,呈现给用户

一个性能问题: 关于CSS 选择器的写法,CSS匹配DOM tree主要是从右到左解析CSS的selector,和我们的书写方式不太一样,
例如 div p {...} ,匹配的时候会先在html找到所有的p标签,然后再找和这个相关的div标签,所以大神们都说,dom树要小,css尽量用id和class,不要过度层叠下去

通过dom tree和css rule tree 会生成一个叫style context tree

(1) firefox的方式:通过css生成css rule tree,通过比对dom生成style context tree,然后把style context tree 和rendering tree关联上,就完成了
(2)webkit和firefox 不同,webkit有style对象,它直接把这个style对象存在了相应的dom节点上


渲染


四个步骤: 
  1. 计算css样式
  2. 构建render tree
  3. layout -  定位坐标和大小,是否换行,各种position,overflow,z-index。。。
  4. paint
图中那些指向空中的箭头表示由于js动态改变了dom属性或者css属性导致重新layout,有些改变不会。

以上内容基本都来自这篇文章
http://www.iteye.com/news/27795















  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值