本文主要是介绍前端不止:Web性能优化 – 关键渲染路径以及优化策略,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?”
《Designing for Performance》的作者 Lara Swanson 在2014年写过一篇文章《Web性能即用户体验》,她在文中提到“网站页面的快速加载,能够建立用户对网站的信任,增加回访率,大部分的用户其实都期待页面能够在2秒内加载完成,而当超过3秒以后,就会有接近40%的用户离开你的网站”。
Google和亚马逊的研究表明,Google页面加载的时间从0.4秒提升到0.9秒导致丢失了20%流量和广告收入,对于亚马逊,页面加载时间每增加100毫秒就意味着1%的销售额损失。可见,页面的加载速度对于用户可能的下一步操作是多么的举足轻重。
想一想,如果你希望你的网站在一秒钟之内呈现用户想看的关键信息,有哪些可行的手段?Minify,压缩,雪碧图等等。
Google的Web性能工程师 Ilya Grigorik 会告诉你,你只需要理解浏览器的关键渲染路径。
页面性能可能是一个感性的东西
页面的性能,看似是一个理性和量化的概念,实则也来自于用户的感知,主观的评价,是一个偏感性的东西。
(参考自Google关键渲染路径)
如果页面可以做到优先显示与用户操作有关的内容,就可以让用户更快速的感知到操作得到响应,这个过程叫做“优化关键渲染路径”。
什么是关键渲染路径
我记得,有一个非常经典的面试题叫做:《当浏览器地址栏输入URL并回车后,发生了什么?》。
关键渲染路径就是描述浏览器从收到 HTML、CSS 和 JavaScript 字节开始,到如何使用HTML、CSS 和 JavaScript 在屏幕上渲染像素的中间过程。
如果我们能够优化这条路径,就能让页面更快速的展示内容,给用户更好的体验。
全景图
我们先尝试站在高处,看一眼关键渲染路径的全景图,这样能够快速的领略一个大致轮廓和一些关键概念。
文档对象模型 (DOM)
DOM概念之于Web开发人员再熟悉不过了,当浏览器发出请求并接收到HTML文档后,它会有这样一个流程来构建DOM:字节 → 字符 → 令牌 → 节点 → 对象模型。
以下面这段代码为例:
<html><head><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"><title>Critical Path</title></head><body><p>Hello <span>web performance</span> students!</p><div><img src="awesome-photo.jpg"></div></body>
</html>
浏览器接收到HTML请求的返回结果,根据预定的流程解析HTML,文档中的“开标签”,比如<html>
,<head>
等会转换成一个令牌(Token
),然后令牌转换成节点对象(Node
)。
这个令牌解析并转换为节点对象的过程,也是每个节点建立关系(树形结构)的过程。例如:head
的令牌出现在html
令牌之后,但其闭标签出现在html
闭标签之前,这就意味着head
是html
的子节点,以此类推,建立节点的父子关系。
这个过程在浏览器中,叫做“Parse HTML”。
CSS 对象模型 (CSSOM)
当DOM捕获了页面的内容,我们还需要知道页面如何展示这些内容,所以需要构建CSS 对象模型(CSSOM)。
浏览器解析DOM,遇到了link
标签,发现它引用了一个外部样式资源:style.css
,于是浏览器会向外部请求样式资源,然后进
这篇关于前端不止:Web性能优化 – 关键渲染路径以及优化策略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!