影响网页渲染的关键!

标签: 网页 渲染 | 发表时间:2015-06-29 14:33 | 作者:kvhur
出处:http://www.iteye.com

原文链接: http://www.gbtags.com/gb/share/5599.htm

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

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是中国基础软件领域的新兴领军企业,能帮助企业用户和开发者轻松实现:缓慢的程序代码和SQL语句的实时抓取。想阅读更多技术文章,请访问OneAPM 官方技术博客

原文链接: http://www.gbtags.com/gb/share/5599.htm



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [网页 渲染] 推荐:

影响网页渲染的关键!

- - Web前端 - ITeye博客
原文链接: http://www.gbtags.com/gb/share/5599.htm. 经常有站长、开发者、运维疑惑:为什么我们的后台服务器很快,但是用户要看网页里面的内容却需要很长时间. 我们在上一篇文章 《怪兽大作战: 解析网站打开慢的原因》中简单介绍了影响网站打开速度的几个指标,感兴趣的同学可以再读一下.

iPhone 4借助HTML5和CSS3渲染网页

- - 博客园_新闻
1月 5 日消息,据国外媒体报道,近期一项技术让公众领略到了互联网技术的万能之处. iPone 4 通过使用 CSS3 渲染网页. CSS3是由乌克兰网络开发者 Vasiliy 设计的. 最令人惊艳的是,基于网络的 iPhone 由 HTML5,CSS 3 和 JavaScript 所创建. iPhone 4 的渲染不仅体现在设备本身,还体现在一系列屏幕按钮,令人印象深刻的是这些按钮都是由颜色构成的,而非图片.

Google开发新服务 重写网页代码提高渲染速度

- Haides - cnBeta.COM
北京时间7月28日晚间消息,谷歌将于今天推出一种名为Page Speed Service(页面速度服务)的新服务这种服务可帮助提升网页速度. 当用户将其网站的DNS入口指向谷歌时,Page Speed Service将可从用户网站的服务器获取内容、重写网页并通过谷歌自身的全球服务器来为用户网站提供服务.

开启 Chrome 的 “GPU 硬件加速”和“网页预先渲染”让网页浏览更加流畅

- 云飞风起 - Chrome迷
虽然我们之前谈论过很多关于 Chrome 的硬件加速,但到现在绝大部分 Chrome 都还没有享受过,因为 Chrome 正式版和测试版都还没有默认启用这一项功能,反而被IE9 RC和Firefox 4 Beta 抢了风头. 其实,在 Chrome 上开启硬件加速的方法非常简单,Chrome 正式版和测试版都可以通过在about:flags中开启硬件加速以提升网页浏览体验并延长电池使用时间,如果你是那种动不动就开30个标签以上的人,我们还同时建议你开启 Chrome 的预先渲染(pre-rendering)功能,该功能可以给你带来额外的性能提升.

浏览器如何渲染文本

- old9 - jjgod / blog
浏览器是我们最常用的软件之一,文本又是网页中最主要的元素,在浏览器显示文本的过程中有许多有趣的细节,值得展开来讲讲,或许能减少一些误解. 这是一个比较粗略的,概括性的介绍,尽可能不涉及过多的技术细节和具体实现,而立足于给 Web 开发者和设计师提供一些正确的概念. 下面的介绍主要根据我对 WebKit 和 Gecko (Firefox) 的印象来谈,其他的浏览器也大致相同,如有阙漏之处欢迎指出.

“浏览器渲染原理”PPT

- zhibin - 宅居
这是今天一次内部分享的PPT,其中内容主要来自于Winter大大分享的相关材料,和How Browser Work这一文的一些内容. 由于内部分享是以讲为主,因此PPT并不包含所有内容,仅仅是一个摘要的形式,另有以下几点:. 由于是在MAC下制作的,在Windows下播放可能由于字体等原因,造成排版错乱,请自行脑补或调整.

浏览器如何渲染文本

- - ITeye博客
浏览器是我们最常用的软件之一,文本又是网页中最主要的元素, 在浏览器显示文本的过程中有许多有趣的细节,值得展开来讲讲,或许能减少一些误解. 这是一个比较粗略的,概括性的介绍,尽可能不涉及过多的技术细节和具体实现,而立足于给 Web 开发者和设计师提供一些正确的概念. 下面的介绍主要根据我对 WebKit 和 Gecko (Firefox) 的印象来谈,其他的浏览器也大致相同,如有阙漏之处欢迎指出.

浏览器的渲染原理简介

- - IT技术博客大学习
   看到这个标题大家一定会想到这篇神文《 How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被 翻译成了中文. 1)这篇文章太长了,阅读成本太大,不能一口气读完. 2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助.    所以,我准备写下这篇文章来解决上述两个问题.

了解html页面的渲染过程

- - 博客园_首页
最近在学习前端的性能优化,有必要了解一下页面的渲染流程,以便对症下药,找出性能的瓶颈所在. 以下是我看到的一些东西,分享给大家. 参考: Understanding the renderer. 定义明确、连续、操作有序(HTML5). 当我们从网络上得到HTML的相应字节时,DOM树就开始构建了.

Android性能优化之渲染篇

- - 移动开发 - ITeye博客
关注微信号:javalearns   随时随地学Java. Google近期在Udacity上发布了Android性能优化的在线课程,分别从渲染,运算与内存,电量几个方面介绍了如何去优化性能,这些课程是Google之前在Youtube上发布的Android性能优化典范专题课程的细化与补充. 下面是渲染篇章的学习笔记,部分内容和前面的性能优化典范有重合,欢迎大家一起学习交流.