• 技术文章 >web前端 >html教程

    浏览器渲染引擎,提高css渲染速度。

    2016-09-01 00:01:01原创839
    一、渲染引擎
    渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上。
    默认情况下渲染引擎可以显示HTML,XML文档以及图片。 通过插件(浏览器扩展)它可以显示其它类型文档。

    二、各种渲染引擎
    我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上:
    Firefox使用Gecko —— Mozilla自家的渲染引擎;Safari 和 Chrome 都使用 Webkit。


    最终决定浏览器表现出来的页面效果的差异是:渲染引擎 Rendering Engine(也叫做排版引擎),也就是我们通常所说的“浏览器内核”,负责解析网页语法(如HTML、JavaScript)并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样,那么就很有可能是不同的浏览器内核导致的。

    三、主要流程
    渲染引擎开始于从网络层获取请求内容,一般是不超过8K的数据块。接下来就是渲染引擎的基本工作流程:

    渲染引擎的基本工作流程(解析HTML构建DOM树,渲染树构建,渲染树布局,绘制渲染树)。
    1、解析HTML以重建DOM树(Parsing HTML to construct the DOM tree ):渲染引擎开始解析HTML文档,转换树中的标签到DOM节点,它被称为“内容树”。
    2、构建渲染树(Render tree construction):解析CSS(包括外部CSS文件和样式元素),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。
    3、布局渲染树(Layout of the render tree): 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。
    4、绘制渲染树(Painting the render tree) : 遍历渲染树,每个节点将使用UI后端层来绘制。

    一定要理解这是一个缓慢的过程,为了更好的用户体验,渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容先展示出来。

    四、主要流程示例

    图 2:Webkit主要流程

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    专题推荐:浏览器渲染引擎,提高css渲染速度。
    上一篇:Emmet插件比较实用常用的写法 下一篇:定格动画
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css+div盒模型研究笔记_html/css_WEB-ITnose• 知名网站按钮 css 实现(含源码)_html/css_WEB-ITnose• codeforces Round #260(div2) D解题报告_html/css_WEB-ITnose• html实现跳转_html/css_WEB-ITnose• 为什页面总是在分?中显示_html/css_WEB-ITnose
    1/1

    PHP中文网