首页 > 其他 > 详细

浏览器的渲染原理

时间:2017-08-14 13:08:26      阅读:220      评论:0      收藏:0      [点我收藏+]

  首先来说一下浏览器的内核,浏览器的内核包括;渲染引擎和js引擎,由于js引擎越来越独立,因此内核主要是指渲染引擎。内核主要分为Trident(IE,360浏览器的内核就为Trident),Gecko内核(火狐浏览器使用的就是Gecko内核),Webkit内核(Safari浏览器和Chrome浏览器使用的就是Webkit内核)。

  接着说渲染原理,渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。首先浏览器将HTML解析成树形的数据结构(DOM Tree),接着将CSS解析成树形的数据结构(CSS Rule Tree);然后DOM Tree和CSS Rule Tree合并后生成渲染树(Render Tree)。有了渲染树就可以进行布局了(layout);最后 按照算出来的规则,通过显卡,把内容画到屏幕上(painting)。reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。图解如下:技术分享

 

浏览器的渲染原理

原文:http://www.cnblogs.com/shelme/p/7357166.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!