文档章节

优化关键渲染路径

蓝色犀牛
 蓝色犀牛
发布于 2017/04/23 18:30
字数 407
阅读 14
收藏 0
点赞 0
评论 0

优化关键渲染路径

Ilya Grigorik

By Ilya Grigorik

Ilya is a Developer Advocate and Web Perf Guru

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

 

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

 

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

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

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

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

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

本文转载自:

共有 人打赏支持
蓝色犀牛
粉丝 0
博文 19
码字总数 5800
作品 0
沙坪坝
其他
浏览器渲染过程与性能优化

大家都知道万维网的应用层使用了协议,并且用浏览器作为入口访问网络上的资源。用户在使用浏览器访问一个网站时需要先通过协议向服务器发送请求,之后服务器返回文件与响应信息。这时,浏览器...

SylvanasSun ⋅ 2017/10/04 ⋅ 0

浏览器的渲染:过程与原理

内容说明 本文不是关于浏览器渲染的底层原理或前端优化具体细节的讲解,而是关于浏览器对页面的渲染——这一过程的描述及其背后原理的解释。这是因为前端优化是一个非常庞大且零散的知识集合...

天方夜 ⋅ 2017/10/26 ⋅ 0

影响网页渲染的关键

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

OneAPM蓝海讯通 ⋅ 2015/06/25 ⋅ 0

五大顶级CSS性能优化工具,值得一试!

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

it168网站 ⋅ 2017/03/31 ⋅ 0

网页性能优化,缓存优化、加载时优化、动画优化

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

lunaqi ⋅ 05/16 ⋅ 0

理解关键的渲染路径

本文转载自:《Understanding the Critical Rendering Path》,原文地址:https: //bitsofco.de/understanding-the-critical-rendering-path/ 当浏览器从服务器接收到一个HTML页面的请求时,到...

lecepin ⋅ 2017/02/08 ⋅ 0

Unity性能优化-总篇

Optimizing Graphics Performance【图形性能优化】 今天这里主要谈论是图形性能优化的点到底在什么地方,后面我将会单独开博客说明每一部分应该如何优化,这样分的一个原理在于,无论我们是做...

abaojin ⋅ 2015/12/03 ⋅ 0

滑动性能优化

个人认为比opaque属性更重要的是backgroundColor属性,如果不设置这个属性,控件依然被认为是透明的,所以我们做的第一个优化是在CustomTableCell类的init方法中添加一行代码: 虽然在白色背...

Gong_xiao ⋅ 2016/02/14 ⋅ 0

Cocos2d-x纹理优化的一些方案

[Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址:http://blog.csdn.net/honghaier] 红孩儿Cocos2d-X学习园地QQ群:249941957 加群写:Cocos2d-x 本章为我的Cocos2d-x教程一书初稿...

长平狐 ⋅ 2013/03/19 ⋅ 0

Cocos2d-x纹理优化的一些方案

[Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址:http://blog.csdn.net/honghaier] 红孩儿Cocos2d-X学习园地QQ群:249941957 加群写:Cocos2d-x 本章为我的Cocos2d-x教程一书初稿...

长平狐 ⋅ 2012/11/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 29分钟前 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 昨天 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 昨天 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 昨天 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部