Web前端面试指导(四十五):页面渲染原理是什么?

文章转自:https://blog.csdn.net/lxcao/article/details/52931470

题目点评

这是一道纯理论的题目,只要能够将浏览器的渲染过程很专业的表述出来,一定会得到面试官的青睐,作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的,对于页面性能的提升是有帮助的。

解题思路

渲染引擎是干什么的
渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件可以显示PDF格式。

渲染引擎

不同的浏览器有不同的渲染引擎,对于渲染引擎的使用总结如下:
Trident(MSHTML)内核:IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上
Webkit内核:Safari,Chrome等

渲染主流程

渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程:


解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

步骤详细解释
第一步:渲染引擎开始解析html,根据标签构建DOM节点
第二步:根据css样式构建渲染树,包括元素的大小、颜色,隐藏的元素不会被构建到该树中。
第三步:根据css样式构建布局树,主要是确定元素要显示的位置。

第四步:根据前面的信息,绘制渲染树。


 

猜你喜欢

转载自blog.csdn.net/bluedandelion/article/details/80560838