影响网页渲染的关键!

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

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

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

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

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

什么是关键渲染路径?

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

关键:绝对需要

渲染:显示或者展示(在我们的情境中,网页经过渲染才能呈现给用户)

路径:使我们的网页展示在浏览器中的一系列事件

首屏:是用户滚动页面之前就能看见的部分。

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

路径

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

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

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

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

渲染过程

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

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

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

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

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

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

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

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

关键

目前我只是描绘了一张非常朦胧的蓝图。好消息是:你可以为你的网页请求一

百万个资源,其中包括12000张图像,200个JavaScript文件,而这些都可能在一秒钟内加载完成。

这是如何实现的呢?

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

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

最小化关键资源的数量

最小化关键字节数

最小化关键路径的长度

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

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

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

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

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

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

后续:

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



本文系OneAPM工程师编译整理。OneAPM是中国基础软件领域的新兴领军企业,能帮助企业用户和开发者轻松实现:缓慢的程序代码和SQL语句的实时抓取。想阅读更多技术文章,请访问OneAPM官方技术博客

时间: 2024-10-06 15:42:48

影响网页渲染的关键!的相关文章

影响网页渲染的关键

经常有站长.开发者.运维疑惑:为什么我们的后台服务器很快,但是用户要看网页里面的内容却需要很长时间?我们在上一篇文章<怪兽大作战: 解析网站打开慢的原因>中简单介绍了影响网站打开速度的几个指标,感兴趣的同学可以再读一下.今天我们主要讲一下,是哪些因素拖慢了我们的首屏加载时间,也就是用户看到网页中内容时所等待的时间. 用过OneAPM的读者对这幅图肯定不陌生,一般来讲,如果服务器很快,机房所在线路很快,那么影响用户看到网页内容的主要时间,就是最后两个时间阶段:DOM处理以及网页渲染,在这两个阶段

有关网页渲染,每个前端开发者都该知道的那点事

[编者按]其实,有关网页渲染的文章很多,但是相关信息比较分散,且论述并不是很完整.如果要想对这个主题有个大致的了解,我们还得学习很多知识.因此,Web开发者Alexander Skutin 决定写一篇文章.他相信,这篇文章不仅能帮助初学者,也能对那些想要刷新知识结构的高级前端开发者有所裨益.原文地址 译文如下: 网页渲染必须在很早的阶段进行,可以早到页面布局刚刚定型.因为样式和脚本都会对网页渲染产生关键性的影响.所以专业开发者必须了解一些技巧,从而避免在实践的过程中遇到性能问题. 这篇文章不会研

Chromium网页渲染机制简要介绍和学习计划

作为一个浏览器,快速地将网页渲染出来是最重要的工作.Chromium为了做到这一点,费尽了心机,做了大量优化工作.这些优化工作是卓有成效的,代表了当今最先进的网页渲染技术.值得一提的是,这些渲染技术不仅适用于网页渲染,也可以应用在原生系统的UI渲染上.例如,在Android系统上,我们就可以看到两者在渲染技术上的相似之处.本文接下来就对Chromium的网页渲染机制进行简要介绍,并且制定学习计划. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! Chrom

Chromium网页渲染调度器(Scheduler)实现分析

在采用线程化渲染方式渲染网页时,Chromium依赖一个调度器协调Main线程和Compositor线程的执行,同时也通过这个调度器决定它们什么时候该执行什么操作.调度器将Main线程和Compositor线程的当前状态记录在一个状态机中,然后通过这个状态机决定下一个要执行的操作.这个操作在满足当前设置条件下是最优的,因此可以使网页渲染更快更流畅.本文接下来就分析Chromium网页调度器的实现. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 调度器实现

对网页渲染的初步认识

老实说,这篇博客是看了园子里的OneAPM官方技术博客关于有关网页渲染,每个前端开发者都该知道的那点事来写的,真心觉得不错,对于想做前段开发的程序员来说,是不可不知知的知识. 浏览器是如何完成网页渲染的? 网页渲染时,浏览器的动作有: 根据来自服务器的html代码形成文档对象模型(DOM) 加载并解析样式,形成CSS对象 在文档对象模型和CSS对象模型之上,创建一棵由一组待生成渲染的对象组成的渲染树(在Webkit(典型代表是Google Chrome)中这些对象被称为渲染器或渲染对象,而在Ge

前端开发工程师应知应会之网页渲染(翻译)

作者:Alexander Skutin , 2014.5.26 . 由Max shirshin与2014年6月30日翻译(俄语 -> 英语) 现今我们应更加注重网页渲染,及其在web开发中的重要性.虽然很多文章都曾谈到这一主题,但大多是分散和割裂的.譬如为了对这个主题有更全面的认识需要去搜索很多的信息来源,而这也是笔者决定写这篇文章的原因.笔者相信本篇文章会有益于初级开发者,当然对希望能够更新和整理已有知识的中高级开发者同样能够有所裨益. 当页面布局定义完成后,页面渲染的过程与样式和脚本所承担的

webkit技术--网页渲染原理

Webkit渲染 Webkit 是苹果发起的一个开源项目,后来谷歌用这个项目以 webkit 创建了一个新的项目 Chromium,我们平常用的 Chrome 浏览器一般都是基于 Chromium 开发出来的稳定版本.本文主要介绍浏览器的渲染引擎即 webkit内核.webkit 作为浏览器的渲染引擎能够将 html/css/js文本及相应的资源文件转换成图像结果. 1.内部模块结构图如下: 可以看出渲染引擎大致包括HTML解释器,CSS解释器,布局和JavaScript引擎等模块.这些模块可能

网页渲染

1.模板 就是字符串拼接 2.文档碎片 优点: 既不影响原有dom的属性,也只回流一次. 3.字符串拼接 优点:只进行了一次Dom回流 缺点:原有dom的事件都会丢失 原因:就在与innerHTML这个属性,这个属性是返回或设置Dom中的内容,以字符串形式返回,拼接完之后是string类型,而onmouse这些属性是Dom元素对象身上的,所以这些onmouse系列的属性就丢失了. 4.DOM循环 优点:原有的dom身上的事件不会丢失,不影响其他dom 缺点:dom回流次数过多,严重影响网页性能.

10条影响CSS渲染速度的写法与建议(摘抄HTML5中国)

1.尽量避免 *{} 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一开始就把所有的默认属性全部去除,以达到所有标签属性值都统一的效果.所以就有了*通配符.* 会遍历所有的标签: *{ margin:0;padding:0} 建议的解决方法: (1)不要去使用生僻的标签,因为这些标签在不同浏览器中解释出来的效果不一样:所以要尽可能的去使用那些常用的标签: (2)不要使用*:而是把常用到的这些标签进行处理:例