文档章节

影响网页渲染的关键!

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2015/05/22 15:07
字数 2266
阅读 631
收藏 0

张超 — MAY 21, 2015 经常有站长、开发者、运维疑惑:为什么我们的后台服务器很快,但是用户要看网页里面的内容却需要很长时间?我们在上一篇文章《怪兽大作战: 解析网站打开慢的原因》[http://news.yesky.com/prnews/420/58034920.shtml]中简单介绍了影响网站打开速度的几个指标,感兴趣的同学可以再读一下。今天我们主要讲一下,是哪些因素拖慢了我们的首屏加载时间,也就是用户看到网页中内容时所等待的时间。

ruby-prof

用过OneAPM的读者对这幅图肯定不陌生,一般来讲,如果服务器很快,机房所在线路很快,那么影响用户看到网页内容的主要时间,就是最后两个时间阶段:DOM处理以及网页渲染,在这两个阶段中,浏览器需要解析网页中的各种资源并进行渲染,最终形成用户页面。这个过程是否流畅,直接影响到用户需要等待的时间,从更深层次而言,直接会影响最终的用户体验,现在大家也普遍接受一个观点“延迟就是故障”,所以你需要重视网站的加载速度。

##打造轻量级的资源路径--关键渲染路

网页加载速度中最重要的概念是关键渲染路径。如果能理解好这个概念,的确可以让用户更快看到网页中的内容。

轻量级资源和路径,可以缩短复杂网页的构建和渲染时间,甚至比简单网页还要快! 由于大多数网页都包含许多不同的组成部分,仅仅移除部分资源并不能保证更快的加载速度。 如果你曾经想过:“为了提高网页的加载速度,我还能做什么?”或者“新浪、QQ、网易是如何做到在一秒钟内加载那么多网页内容的?”那么关键渲染路径这个概念正是你需要了解的。

##什么是关键渲染路径?

清楚起见,让我们先定义一些概念:

关键:绝对需要 渲染:显示或者展示(在我们的情境中,网页经过渲染才能呈现给用户) 路径:使我们的网页展示在浏览器中的一系列事件 首屏:是用户滚动页面之前就能看见的部分。

因此,换言之,渲染路径就是一系列使你的网页呈现在浏览器中的事件。而关键渲染路径是呈现网页首屏所需的那些事件。因为几乎所有网站在渲染网页时都包含了不必要的步骤,而减少这些不必要的路径,能使你的网页加载速度提高几秒钟,这也是提高网页速度的最快方法。

##路径

为了显示一张网页,浏览器必须获取网页所需的所有资源。一个简单的例子:一个网页需要一张图片,一个CSS文件,一个JavaScript文件。

我们来看看这张网页在展示之前经历的路径:

  1. 浏览器下载html文件
  2. 浏览器读取html文件,发现里面涉及一个CSS文件,一个JavaScript文件和一张图片
  3. 浏览器开始下载这张图片
  4. 浏览器发现不获取CSS和JavaScript文件就无法显示网页
  5. 浏览器下载CSS文件并读取之,确保除此之外没有别的文件需要被访问
  6. 浏览器发现不获取JavaScript文件还是无法显示网页
  7. 浏览器下载JavaScript文件并读取之,确保除此之外没有别的文件需要被访问
  8. 浏览器发现现在可以显示网页了

上面的路径是简单网页的加载过程。现在,试想一下你的网页加载路径会怎么样?你很可能会有几个交互按钮,数个CSS和JavaScript文件,很多图片和小插件,甚至可能还有音频或者视频文件。这意味着,你的渲染路径很可能会像一个大迷宫。大多数网站的渲染路径都极其复杂,因为浏览器在显示网页之前需要加载的文件太多。这就是你可以超过他人的地方。如果你让自己的网页加载得比竞争者的快,你就能获得访问者的青睐(百度就喜欢这样的开发者),例如新浪微博的路径就是这样的:

ruby-prof

##渲染过程

在展示网页所需的众多资源中,存在一些资源会阻塞网页的渲染过程。最常见的两种资源就是CSS文件和JavaScript文件。不管你需要多少个这样的文件,浏览器必须逐一下载并分析这些文件,然后才能给用户展示内容。让我们来看一个最常见不过的场景:

WordPress博客使用主题。几乎每一个WordPress主题都包含多个CSS文件。

许多主题包含六七个CSS文件。所有的CSS文件都可以合并到一个文件中,但是当你添加主题时,会包含多个CSS文件。因此,在你的博客显示哪怕一个字之前,浏览器都不得不经过六七次的与服务器交互,把这些文件一个个地下载下来,并分析读取,之后才能开始显示。

在加载的过程中,访问者都只能看到一篇空白的屏幕。因为只有当关键步骤完成以后,才会有东西显示。

但是,即便下载完这些CSS文件,你的博客还是不能完成渲染。因为WordPress主题还需要几个JavaScript文件。

因此,渲染一页典型的WordPress博客网页,需要浏览器与服务器交互大约20次,才能将主要的CSS和JavaScript文件下载完毕。但是,等等,现在你还需要交互按钮,小插件……噢,不,针对每一个这样的部件,你还要下载几个CSS,JavaScript文件。

你可能要下载几十个文件,才能让自己的博客展示在用户面前。真是麻烦!(去查查你的网页都要加载什么文件,可以使用OneAPM 的SessionTrace 功能看看网页加载资源在用户那里的速度)

但是事情不仅限于WordPress,本文只是拿它举个例子而已。通常创建网页的初始视图都很多资源,因此会产生多个请求。

ruby-prof

##关键

目前我只是描绘了一张非常朦胧的蓝图。好消息是:你可以为你的网页请求一 百万个资源,其中包括12000张图像,200个JavaScript文件,而这些都可能在一秒钟内加载完成。

这是如何实现的呢?

只要理解对你的网站而言,显示首屏的内容所需的关键步骤,就能实现。

最优化渲染路径,实际上只要聚焦三件事情:

最小化关键资源的数量 最小化关键字节数 最小化关键路径的长度

##理解页面加载速度的测量办法

当百度谈论页面加载速度时,他们并不是指加载一个网页的总时间。他们说的是用户看到首屏所需的时间,以及用户可以开始与页面内容进行交互所需的时间。

百度之所以开始采用页面加载速度作为影响要素,是基于他们用户的满意度。当用户使用百度搜索时,他们要是被带到加载时间很长的页面,无疑是很糟糕的经历。

人们向百度抱怨,他们说:“为什么将我带到一个加载如此缓慢的页面?”显然,人们感知到了速度的差别。

如果一个用户要盯着一个空白的网页10秒之久等待它加载内容,这无疑是很差的体验。百度不想在他们的结果中出现这样的页面。如果那个页面能在1秒内显示内容,这就是极好的用户体验,这才是百度想要的结果。

我们讨论网页速度时最关注的就是将初首屏的内容尽早地显示给用户。 通过OneAPM SessionTrace 功能可以查看各个资源的加载速度,方便调整加载资源的策略,例如

ruby-prof

##后续:

其实,优化网页渲染路还有很多小技巧、插件、方法等待,未来我们将在后续的文章中一一和大家分享。


本文作者系OneAPM工程师张超编译整理,想阅读更多技术文章,请访问OneAPM官方技术博客

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 93
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
加载中

评论(4)

z
zhangwei6598
赞一个
l
lucy0205
值得学习一下。
z
zhaowei7568
79
l
leipeng5692
不错不错!
影响网页渲染的关键

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

OneAPM蓝海讯通
2015/06/25
201
0
CSS 是如何工作的:关键渲染路径中的 CSS 解析和渲染

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

阅文集团前端团队
2018/07/30
0
0
《前端之路》之 网页生成的过程及对性能的影响

11: 网页生成的过程及对性能的影响 网页生成的过程 网页生成过程,大致可以分成五步 在这五步里面,第一步到第三部都非常快,。 重排和重绘 网页生成的时候,至少会渲染一次。而我们需要关注...

SmallW
2018/08/13
0
0
详解 CRP:如何最大化提升首屏渲染速度

在前端性能优化树上有很多值得展开的话题,从输入 URL 到页面加载完成发生了什么 这一道经典的面试题就涉及到很多内容,但前端主要关注的部分还是 浏览器解析响应的内容并渲染展示给用户 这一...

Jeremygo
01/08
0
0
这儿有一个使你网页性能提升10倍的工具

今天上午10:00,我发布了 业界第一款「性能统计分析框架」Hiper。 截止到2018年6月5号23:59分,已经107个star了,同时项目也冲上了github新生榜单第七名的位置 先说下Hiper是解决什么问题的 ...

pod
2018/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash 和 Python 编程语言优缺点分析

Bash 和 Python 是大多数自动化工程师最喜欢的编程语言。它们都各有优缺点,有时很难选择应该使用哪一个。所以,最诚实的答案是:这取决于任务、范围、背景和任务的复杂性。 让我们来比较一下...

xiangyunyan
18分钟前
3
0
Kubernetes从懵圈到熟练:读懂这一篇,集群节点不下线

排查完全陌生的问题,完全不熟悉的系统组件,是售后工程师的一大工作乐趣,当然也是挑战。今天借这篇文章,跟大家分析一例这样的问题。排查过程中,需要理解一些自己完全陌生的组件,比如sys...

阿里云云栖社区
23分钟前
4
0
解决exe4打包出现的问题

https://blog.csdn.net/gem_yaorao/article/details/48626155

南桥北木
40分钟前
1
0
SpringBoot高级篇JdbcTemplate之数据更新与删除

前面介绍了JdbcTemplate的插入数据和查询数据,占用CURD中的两项,本文则将主要介绍数据更新和删除。从基本使用上来看,姿势和前面的没啥两样 <!-- more --> I. 环境准备 环境依然借助前面一...

小灰灰Blog
56分钟前
3
0
Filecoin 编译问题

https://github.com/filecoin-project/go-filecoin/issues/2503 Error go run ./build build command from root I've faced on this error Building go-filecoin...git log -n 1 --forma......

怎当她临去时秋波那一转
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部