作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
您的网页的渲染性能是否符合当今的标准? 渲染是当用户访问网站时,将服务器的响应转换成浏览器“描绘”的图像的过程. 糟糕的渲染性能会导致相对较高的跳出率.
有不同的服务器响应决定是否呈现页面. 在本文中, 我们将专注于网页的初始渲染, 它从解析HTML开始(前提是浏览器已经成功地接收到HTML作为服务器的响应). 我们将探索可能导致高渲染时间的事情,以及如何修复它们.
关键呈现路径(CRP)是浏览器将代码转换为屏幕上可显示像素的过程. 它有几个阶段, 其中一些可以并行执行以节省时间, 但有些部分必须按顺序完成. 这是可视化的:
首先,一旦浏览器得到响应,它就开始解析它. 当遇到依赖项时,它会尝试下载它.
如果它是一个样式表文件, 浏览器必须在呈现页面之前完全解析它, 这就是为什么 CSS被称为渲染阻塞.
如果它是一个脚本,浏览器必须停止解析,下载脚本并运行它. 只有在此之后,它才能继续解析, 因为JavaScript程序可以改变网页(HTML)的内容, 特别是). 这就是为什么 JS称为解析器阻塞.
一旦所有解析完成, 浏览器已经构建了文档对象模型(DOM)和层叠样式表对象模型(CSSOM). 将它们组合在一起就得到了渲染树. 页面中未显示的部分不会进入渲染树, 因为它只包含绘制页面所需的数据.
倒数第二步是将渲染树转换为布局. 这个阶段也被称为回流. 这就是计算每个渲染树节点的每个位置及其大小的地方.
最后,最后一步是油漆. 它包括根据浏览器在前几个阶段计算的数据对像素进行着色.
你们可以猜到, 网站性能优化的过程涉及到网站的变化,减少:
进一步, 我们将深入研究它是如何完成的细节, 但首先, 有一条重要的规则需要遵守.
优化的一个重要规则是:先测量,再根据需要进行优化. 大多数浏览器的开发工具都有一个名为 表演。这就是测量发生的地方. 当优化最快的初始(第一次)渲染, 最重要的是要看以下事件的时间:
这里,“Paint”表示页面的成功渲染,这是关键渲染路径的最后一个阶段. 一些渲染可能会一个接一个地发生,因为浏览器试图尽快显示一些内容并稍后更新.
除了渲染时间, 还有其他最重要的事情需要考虑, 使用了多少阻塞资源,下载它们需要多长时间. 测量完成后,可以在表演。选项卡中找到此信息.
根据我们上面学到的, 网站性能优化主要有三种策略:
首先, 移除所有未使用的部件, 例如JavaScript中不可访问的函数, 样式的选择器从不匹配任何元素, 以及永远隐藏在CSS中的HTML标签. 其次,删除所有重复项.
然后,我建议设置一个自动的缩小过程. 例如, 它应该从你的后端服务中删除所有的注释(但不是源代码)和每个没有附加信息的字符(比如JS中的空白字符)。.
完成后,我们剩下的可以作为文本. 这意味着我们可以安全地应用像GZIP这样的压缩算法(大多数浏览器都能理解).
最后是缓存. 它在浏览器第一次呈现页面时不会有什么帮助,但它将为后续访问节省很多时间. 记住两件事是至关重要的:
当然,应该为每个资源定义缓存策略. 有些人可能很少改变或根本不会改变. 其他的变化更快. 其中一些包含敏感信息,其他可能被视为公开信息. 使用 “私人”指令 以防止cdn缓存私人数据.
优化网页图像也可以做到, 尽管图像请求不会阻止解析或呈现.
“关键”仅指网页正确呈现所需的资源. 因此,我们可以跳过所有不直接涉及流程的样式. 还有所有的剧本.
为了告诉浏览器不需要特定的CSS文件,我们应该设置 媒体
属性设置为所有引用样式表的链接. 使用这种方法,浏览器将只处理与当前资源匹配的资源 媒体
(设备类型, 屏幕尺寸), 同时降低所有其他样式表的优先级(它们无论如何都会被处理), 但不是作为关键渲染路径的一部分). 例如,如果添加 媒体= "打印"
属性于 style
标记,该标记引用用于打印页面的样式, 当媒体不在时,这些样式不会干扰你的关键渲染路径 打印
(i.e.,当在浏览器中显示页面时).
为了进一步改进这个过程,您还可以使一些样式内联. 这至少节省了我们到服务器的一次往返,否则就需要获取样式表.
如上所述,脚本是解析器阻塞的,因为它们可以更改DOM和CSSOM. 因此,脚本做 不 更改它们不应该是块解析,从而节省我们的时间.
为了实现这一点,所有的脚本标签都必须用属性来标记 异步
or 推迟
.
标有 异步
不阻止DOM构建或CSSOM,因为它们可以在CSSOM构建之前执行. 但请记住,除非将内联脚本置于CSS之上,否则它们无论如何都会阻止CSSOM.
相比之下,标记为 推迟
会在页面加载结束时进行评估吗. 因此,它们不应该影响文档(否则,它将触发重新呈现)。.
换句话说,用 推迟
,直到触发页面加载事件之后才执行脚本,而 异步
让脚本在文档被解析时在后台运行.
最后,CRP长度应尽可能缩短到最小. 在某种程度上,上述方法将做到这一点.
将媒体查询作为样式标签的属性将减少必须下载的资源总数. 脚本标签属性 推迟
和 异步
会阻止相应的脚本阻止解析吗.
缩小, 压缩, 使用GZIP归档资源将减少传输数据的大小(从而也减少了数据传输时间)。.
内联一些样式和脚本可以减少浏览器和服务器之间的往返次数.
我们还没有讨论的是在文件之间重新排列代码的选项. 根据最佳表现的最新理念, 网站应该最快做的第一件事就是显示ATF内容. ATF代表上面. 这是不需要滚动就能看到的区域. 因此, 最好重新安排与渲染相关的所有内容,以便首先加载所需的样式和脚本, 其他一切都停止——既不解析也不呈现. 永远记得在你做出改变之前和之后进行测量.
总之, 网站性能优化包含了网站响应的各个方面, 比如缓存, 设置CDN, 重构, 资源优化等, 然而,所有这些都可以逐步完成. 作为一个 web开发人员, 你应该把这篇文章作为参考, 永远记得在实验前后测量你的表现.
浏览器开发人员尽最大努力优化你访问的每个页面的网站性能, 这就是为什么浏览器通常实现所谓的“预加载器”.这部分程序扫描你在HTML中请求的资源,以便一次发出多个请求,并使它们并行运行. 这就是为什么在HTML中最好让样式标签彼此靠近(逐行)的原因。, 以及脚本标签.
此外, 尝试批量更新HTML,以避免多个布局事件, 它们不仅由DOM或CSSOM的变化触发,而且还由设备方向变化和窗口大小调整触发.
有用的资源和进一步阅读:
网站优化是分析一个网站,并引入改变,使其加载更快,性能更好的过程. 测量是这个过程的关键部分, 没有他们, 没有办法决定一个特定的改变是使事情变得更好还是更糟.
尝试使用在线工具,如谷歌的pagespeedinsights. 你也可以在“私人浏览”模式下使用浏览器来加载网站,而不需要在本地缓存任何数据. 有些浏览器还允许使用节流,这有助于模拟慢速连接.
网站速度可以定义为网站加载所需的平均时间. 另外, 它可能是指每秒的帧数, 特别是在计算量大的操作中.
最好能在一秒内装好. 当然, 直到第一次有意义的油漆的时间比总加载时间更重要, 只要它能让用户忙于内容.
在浏览器的上下文中, 渲染引擎是一种负责在浏览器窗口中绘制数据的软件. 请参阅上面的关键渲染路径以获取详细信息.
呈现阻塞是浏览器在解析样式表文件时必须做的事情,因为在解析所有引用的样式表文件之前,它无法呈现页面.
世界级的文章,每周发一次.
世界级的文章,每周发一次.