基于Webkit的浏览器关键渲染路径介绍

关键渲染路径概念

浏览器是如何将HTML、JS、CSS、image等资源渲染成可视化的页面的呢?本文简单介绍一下渲染过程中涉及到的关键步骤。

该过程分为四步:模型对象的构建、渲染树构建、布局、绘制。

1.模型对象的构建

浏览器获取到HTML、CSS文件后,需要对其进行解析,抽象成DOM和CSSOM对象,然后提供相应的JS API,方便开发者进行交互逻辑开发。

HTML文件字节转变成DOM的过程如下图所示:

主要经历字符编码—》令牌提取标签—》词法分析转变成DOM对象—》依照标签的嵌套关系构建成DOM树;

CSS文件字节转变成CSSOM的过程与HTML转DOM类似,区别就是按照规则通用性建立树形关系。

2.渲染树的构建

所谓渲染树,就是将DOM树和CSSOM树合并,得到每个可见元素的内容和显示样式。

Tips:

(1)渲染树并非显示所有元素,而只是占据空间元素,如display: none的元素不在渲染树中,而visibility: hidden的在渲染树中;

(2)渲染树包含的内容只是元素的内容及其样式信息,在不同视口(viewport,也就是浏览器的屏幕画布)下实际展示肯能会有差别;

(3)渲染树构建后,Webkit还会继续构建渲染层(RenderLayer),这是为了简化渲染逻辑,同时方便开发者查看网页层次。

3.布局

经过前两步的操作,我们知道了元素的内容和样式信息,但是实际在不同显示器中的大小和位置如何确定呢,这就需要进行布局操作了,有的地方称为"自动重排"(reflow)。Webkit依据框模型来计算元素的位置和大小,布局输出的是一个"盒模型"对象,该对象包含了每个元素在视口内的确切位置和尺寸。

4.绘制

在布局结束后,接下来就是绘制,实现栅格化。绘制一般涉及到Paint和Composite Layers。

Paint一般通过图像上下文来控制,分为2D和3D绘制上下文。

前文提到了RenderLayer的概念,绘制过程中,每个RenderLayer是输出图像中的一层,各个层根据深度信息组合成一张图像,这个组合的过程称为Composite Layers。

关键渲染路径开发相关

介绍完了关键渲染路径的概念,接下来结合chrome dev-tool来看一下实际的情况,chrome的版本是60.0。

1.代码

<html>
<head>
    <title>Janky Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <link rel="stylesheet" type="text/css" href="https://ss1.bdstatic.com/
    5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/css/soutu.css"/>
</head>
<body>
    <img class="proto mover" src="./images/logo-1024px.png"/>
    <div class="controls">
        <button class="add"></button>
        <button class="subtract" disabled></button>
        <button class="stop">Stop</button>
        <button class="optimize">Optimize</button>
        <button class="optimize-fastdom">Optimize By Fastdom</button>
        <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/"
           target="_blank">
            <button class="optimize">Help</button>
        </a>
    </div>
    <script src="./libs/fastdom.js"></script>
    <script src="index.js"></script>
</body>
</html>

2.使用performance调试

为了避免chrome插件的干扰,建议使用【隐身窗口】打开页面,然后打开dev-tool,选择Performance进行调试

3.main线程的使用情况

渲染的关键路径主要体现在主线程中,如下图所示。

图中的蓝色的Parse HTML表示DOM的构建过程,蓝色的Parse StyleSheet代表CSSOM的构建过程,黄色的Evaluate Script表示JS的执行过程,紫色的Recalculate Style表示构建Render Tree的过程,紫色的Layout表示布局过程。

(1)单线程

虽然资源的下载可以并行,但是资源的解析是单线程的,主要通过Main线程来解析,由下图所示,ParseHTML被JS的解析阻塞,分成了三段。线程的使用情况和代码中的资源的位置有很大关系,这个下面会介绍。

(2)时间线事件

Main线程中的图中,有一些细线条记录着一些事件的触发时间,光标放在上面就可以查看。事件主要分为Loading、Scripting、Redering、Painting四大类,具体可以查看官方介绍。其中Scripting类型中有一种Event类型的事件,如下图中的Event(DOMCotentLoaded)可以在JS中被监听到,常用的还有readystatechange、pageshow、pagehide、loaded、webkitvisiblechange等,最近有一个项目中pageshow事件就帮我解决了IOS WKWebview回退页面缓存不刷新的问题。

Tips:

(1)HTML文件中JS文件、CSS文件的位置

通常我们会将css文件放在head标签中,JS文件放置在body标签的后面,这是有一定道理的。由于JS执行的过程中可能修改DOM和CSS样式,这也就造成了Evaluate Script的执行会阻塞Parse HTML的过程,如果JS中引用未解析到的DOM程序就会报错;如果script标签之前有引入css文件,Evaluate Script会等到Parse Stylesheet过程结束后再执行。

所以将CSS文件放置在头部,提前下载并解析;将JS文件放在尾部,让JS尽可能的访问到所有的DOM,避免报错。

(2)优化渲染路径的重要性

前端性能优化主要分为网络请求和代码层面两种。网络请求上的方法是压缩合并、按需加载、缓存等;代码层面则就是要优化渲染路径,毕竟单线程要在模型对象构建、渲染树构建、布局、渲染之间切换,如下图所示。

优化渲染路径对于页面性能至关重要,接下来会写几篇文章针对不同阶段给出优化方法,敬请期待。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

使用jQuery Draggable和Droppable实现拖拽功能

上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能。最后运行的效果如下图所示: ? 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax ...

3376
来自专栏xingoo, 一个梦想做发明家的程序员

[收藏]IntelliJ Idea快捷键

Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化...

3056
来自专栏IMWeb前端团队

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数...

2487
来自专栏Kevin-ZhangCG

Intellij Idea 2018常用快捷键总结

快捷键列表 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码

1.1K3
来自专栏happyJared

IDEA快捷键拆解系列(四):View篇

  以下是关于View导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

1191
来自专栏葡萄城控件技术团队

三天学会HTML5 之第一天

引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

2247
来自专栏小狼的世界

Vimperator:玩酷你的Firefox

First there was a Navigator, then there was an Explorer. Later it was time for a...

1284
来自专栏数据的力量

职场人必备的WORD排版十大技巧

2197
来自专栏hbbliyong

Android Studio 快捷键

Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入...

3076
来自专栏cnblogs

Vuex原来可以这样上手

     在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使...

2085

扫码关注云+社区

领取腾讯云代金券