文档章节

优化关键渲染路径

蓝色犀牛
 蓝色犀牛
发布于 2017/04/23 18:30
字数 407
阅读 15
收藏 0

优化关键渲染路径

Ilya Grigorik

By Ilya Grigorik

Ilya is a Developer Advocate and Web Perf Guru

为尽快完成首次渲染,我们需要最大限度减小以下三种可变因素:

 

  • 关键资源的数量。
  • 关键路径长度。
  • 关键字节的数量。

 

关键资源是可能阻止网页首次渲染的资源。这些资源越少,浏览器的工作量就越小,对 CPU 以及其他资源的占用也就越少。

同样,关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响:某些资源只能在上一资源处理完毕之后才能开始下载,并且资源越大,下载所需的往返次数就越多。

最后,浏览器需要下载的关键字节越少,处理内容并让其出现在屏幕上的速度就越快。要减少字节数,我们可以减少资源数(将它们删除或设为非关键资源),此外还要压缩和优化各项资源,确保最大限度减小传送大小。

优化关键渲染路径的常规步骤如下:

  1. 对关键路径进行分析和特性描述:资源数、字节数、长度。
  2. 最大限度减少关键资源的数量:删除它们,延迟它们的下载,将它们标记为异步等。
  3. 优化关键字节数以缩短下载时间(往返次数)。
  4. 优化其余关键资源的加载顺序:您需要尽早下载所有关键资产,以缩短关键路径长度。

本文转载自:

共有 人打赏支持
蓝色犀牛
粉丝 0
博文 21
码字总数 5800
作品 0
沙坪坝
其他
私信 提问
Web性能优化 – 关键渲染路径以及优化策略

我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?” 《Designing for Performance》的作...

小铭星
07/13
0
0
CSS 是如何工作的:关键渲染路径中的 CSS 解析和渲染

CSS 是如何工作的:关键渲染路径中的 CSS 解析和渲染 发布于 2018-07-27

阅文集团前端团队
07/30
0
0
影响网页渲染的关键

经常有站长、开发者、运维疑惑:为什么我们的后台服务器很快,但是用户要看网页里面的内容却需要很长时间?我们在上一篇文章《怪兽大作战: 解析网站打开慢的原因》中简单介绍了影响网站打开速...

OneAPM蓝海讯通
2015/06/25
201
0
五大顶级CSS性能优化工具,值得一试!

  【IT168 评论】为什么Web页面的加载速度如此重要?在这个信息化的时代,如果一个网站的加载时间过长,大部分用户会极其不耐烦地选择“关掉”!这让辛辛苦苦熬夜敲代码的程序员们情何以堪,...

it168网站
2017/03/31
0
0
网页性能优化,缓存优化、加载时优化、动画优化

本文提供一个优化网页性能的大概思路,具体操作网上资料很多。 缓存优化 性能优化第一步,便是管理好页面的缓存,避免重复下载资源。否则,即增加服务器压力,又折磨用户的钱包。 浏览器缓存...

lunaqi
05/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HashTable和Vector为什么逐渐被废弃

HashTable,不允许键值为null,还一个就是put方法使用sychronized方法进行线程同步,单线程无需同步,多线程可用concurren包的类型。 如编程思想里面说的作为工具类,封闭性做的不好没有一个...

noob_chr
昨天
0
0
Win10 下安装Win7双系统

很多人买了预装64位Win8/8.1的电脑后想重装(或者再安装一个)Win7系统,但是折腾半天发现以前的方法根本不奏效。这是因为预装Win8/8.1的电脑统一采用了UEFI+GPT引导模式,传统的BIOS(Legacy...

yaly
昨天
1
0

中国龙-扬科
昨天
1
0
假若明天来临——《AI.未来》读后感3900字

假若明天来临——《AI.未来》读后感3900字: 你有没有想过,如果有一天你被确诊为癌症患者,你会做些什么?你有没有想过,在你百年之后,你希望你的墓碑上刻写着什么内容? 在我翻开李开复老...

原创小博客
昨天
1
0
tomcat线程模型

Connector结构 BIO模式 NIO模式

grace_233
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部