网站开发短期培训,龙华网站建设的基本步骤,自己做的网站怎么接入微信,南阳卧龙区2015网站建设价格在上一篇文章中我们详细介绍了DOM的生成过程#xff0c;并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源#xff0c;它决定了页面最终显示出来的效果#xff0c;并影响着用户对整个网站的第…在上一篇文章中我们详细介绍了DOM的生成过程并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源它决定了页面最终显示出来的效果并影响着用户对整个网站的第一体验。所以搞清楚浏览器中的CSS是怎么工作的很有必要只有理解了CSS是如何工作的你才能更加深刻地理解如何去优化页面。 本文我们先站在渲染流水线的视角来介绍CSS是如何工作的然后通过CSS的工作流程来分析性能瓶颈最后再来讨论如何减少首次加载时的白屏时间。
渲染流水线视角下的CSS
我们先结合下面代码来看看最简单的渲染流程
//theme.css
div{ color : coral;background-color:black
}html
headlink hreftheme.css relstylesheet
/head
bodydivgeekbang com/div
/body
/html这两段代码分别由CSS文件和HTML文件构成我们来分析下打开这段HTML文件时的渲染流水线你可以先参考下面这张渲染流水线示意图 含有CSS的页面渲染流水线
下面我们结合上图来分析这个页面文件的渲染流水线。
含有CSS的页面渲染流水线
下面我们结合上图来分析这个页面文件的渲染流水线。 首先是发起主页面的请求这个发起请求方可能是渲染进程也有可能是浏览器进程发起的请求被送到网络进程中去执行。网络进程接收到返回的HTML数据之后将其发送给渲染进程渲染进程会解析HTML数据并构建DOM。这里你需要特别注意下请求HTML数据和构建DOM中间有一段空闲时间这个空闲时间有可能成为页面渲染的瓶颈。 上一篇文章中我们提到过当渲染进程接收HTML文件字节流时会先开启一个预解析线程如果遇到JavaScript文件或者CSS文件那么预解析线程会提前下载这些数据。对于上面的代码预解析线程会解析出来一个外部的theme.css文件并发起theme.css的下载。这里也有一个空闲时间需要你注意一下就是在DOM构建结束之后、theme.css文件还未下载完成的这段时间内渲染流水线无事可做因为下一步是合成布局树而合成布局树需要CSSOM和DOM所以这里需要等待CSS加载结束并解析成CSSOM。 那渲染流水线为什么需要CSSOM呢 和HTML一样渲染引擎也是无法直接理解CSS文件内容的所以需要将其解析成渲染引擎能够理解的结构这个结构就是CSSOM。和DOM一样CSSOM也具有两个作用第一个是提供给JavaScript操作样式表的能力第二个是为布局树的合成提供基础的样式信息。这个CSSOM体现在DOM中就是document.styleSheets。具体结构你可以去查阅相关资料这里我就不过多介绍了你知道CSSOM的两个作用是怎样的就行了。 有了DOM和CSSOM接下来就可以合成布局树了我们在前面《05 | 渲染流程上HTML、CSS和JavaScript文件是如何变成页面的》这篇文章中讲解过布局树的构造过程这里咱们再简单回顾下。等DOM和CSSOM都构建好之后渲染引擎就会构造布局树。布局树的结构基本上就是复制DOM树的结构不同之处在于DOM树中那些不需要显示的元素会被过滤掉如display:none属性的元素、head标签、script标签等。复制好基本的布局树结构之后渲染引擎会为对应的DOM元素选择对应的样式信息这个过程就是样式计算。样式计算完成之后渲染引擎还需要计算布局树中每个元素对应的几何位置这个过程就是计算布局。通过样式计算和计算布局就完成了最终布局树的构建。再之后就该进行后续的绘制操作了。 这就是在渲染过程中涉及到CSS的一些主要流程。 了解了这些之后我们再来看看稍微复杂一点的场景还是看下面这段HTML代码
//theme.css
div{ color : coral;background-color:black
}html
headlink hreftheme.css relstylesheet
/head
bodydivgeekbang com/divscriptconsole.log(time.geekbang.org)/scriptdivgeekbang com/div
/body
/html
这段代码是我在开头代码的基础之上做了一点小修改在body标签内部加了一个简单的JavaScript。有了JavaScript渲染流水线就有点不一样了可以参考下面这张渲染流水线图 含有JavaScript和CSS的页面渲染流水线
那我们就结合这张图来分析含有外部CSS文件和JavaScript代码的页面渲染流水线上一篇文章中我们提到过在解析DOM的过程中如果遇到了JavaScript脚本那么需要先暂停DOM解析去执行JavaScript因为JavaScript有可能会修改当前状态下的DOM。 不过在执行JavaScript脚本之前如果页面中包含了外部CSS文件的引用或者通过style标签内置了CSS内容那么渲染引擎还需要将这些内容转换为CSSOM因为JavaScript有修改CSSOM的能力所以在执行JavaScript之前还需要依赖CSSOM。也就是说CSS在部分情况下也会阻塞DOM的生成。 我们再来看看更加复杂一点的情况如果在body中被包含的是JavaScript外部引用文件Demo代码如下所示
//theme.css
div{ color : coral;background-color:black
}
//foo.js
console.log(time.geekbang.org)
html
headlink hreftheme.css relstylesheet
/head
bodydivgeekbang com/divscript srcfoo.js/scriptdivgeekbang com/div
/body
/html
从上面代码可以看出来HTML文件中包含了CSS的外部引用和JavaScript外部文件那它们的渲染流水线是怎样的呢可参考下图 含有JavaScript文件和CSS文件页面的渲染流水线
从图中可以看出来在接收到HTML数据之后的预解析过程中HTML预解析器识别出来了有CSS文件和JavaScript文件需要下载然后就同时发起这两个文件的下载请求需要注意的是这两个文件的下载过程是重叠的所以下载时间按照最久的那个文件来算。 后面的流水线就和前面是一样的了不管CSS文件和JavaScript文件谁先到达都要先等到CSS文件下载完成并生成CSSOM然后再执行JavaScript脚本最后再继续构建DOM构建布局树绘制页面。 影响页面展示的因素以及优化策略
前面我们为什么要花这么多文字来分析渲染流水线呢主要原因就是渲染流水线影响到了首次页面展示的速度而首次页面展示的速度又直接影响到了用户体验所以我们分析渲染流水线的目的就是为了找出一些影响到首屏展示的因素然后再基于这些因素做一些针对性的调整。 那么接下来我们就来看看从发起URL请求开始到首次显示页面的内容在视觉上经历的三个阶段。 第一个阶段等请求发出去之后到提交数据阶段这时页面展示出来的还是之前页面的内容。关于提交数据你可以参考前面《04 | 导航流程从输入URL到页面展示这中间发生了什么》这篇文章。 第二个阶段提交数据之后渲染进程会创建一个空白页面我们通常把这段时间称为解析白屏并等待CSS文件和JavaScript文件的加载完成生成CSSOM和DOM然后合成布局树最后还要经过一系列的步骤准备首次渲染。 第三个阶段等首次渲染完成之后就开始进入完整页面的生成阶段了然后页面会一点点被绘制出来。
影响第一个阶段的因素主要是网络或者是服务器处理这块儿前面文章中我们已经讲过了这里我们就不再继续分析了。至于第三个阶段我们会在后续文章中分析所以这里也不做介绍了。 现在我们重点关注第二个阶段这个阶段的主要问题是白屏时间如果白屏时间过久就会影响到用户体验。为了缩短白屏时间我们来挨个分析这个阶段的主要任务包括了解析HTML、下载CSS、下载JavaScript、生成CSSOM、执行JavaScript、生成布局树、绘制页面一系列操作。 通常情况下的瓶颈主要体现在下载CSS文件、下载JavaScript文件和执行JavaScript。 所以要想缩短白屏时长可以有以下策略 通过内联JavaScript、内联CSS来移除这两种类型的文件下载这样获取到HTML文件之后就可以直接开始渲染流程了。 但并不是所有的场合都适合内联那么还可以尽量减少文件大小比如通过webpack等工具移除一些不必要的注释并压缩JavaScript文件。 还可以将一些不需要在解析HTML阶段使用的JavaScript标记上sync或者defer。 对于大的CSS文件可以通过媒体查询属性将其拆分为多个不同用途的CSS文件这样只有在特定的场景下才会加载特定的CSS文件。
通过以上策略就能缩短白屏展示的时长了不过在实际项目中总是存在各种各样的情况这些策略并不能随心所欲地去引用所以还需要结合实际情况来调整最佳方案。 总结
好了今天就介绍到这里下面我来总结下今天的内容。 我们首先介绍了CSS在渲染流水线中的位置以及CSS是如何影响到渲染流程的接下来我们通过渲染流水线分析了从发出请求到页面首次绘制的三个阶段最后重点介绍了第二个白屏阶段以及优化该阶段的一些策略。 通过今天的内容我们可以知道虽然JavaScript和CSS给我们带来了极大的便利不过也对页面的渲染带来了很多的限制所以我们要关注资源加载速度需要小心翼翼地处理各种资源之间的关联关系。
