Web性能优化系列(1):Web性能优化分析

本文由 伯乐在线 - 鸭梨山大 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:gokulkrishh.github.io。欢迎加入翻译小组

如果你的网站在1000ms内加载完成,那么会有平均一个用户停留下来。2014年,平均网页的大小是1.9MB。看下图了解更多统计信息。

网站的核心内容需要在1000ms内呈现出来。如果失败了,用户将永远不会再访问你的网站。通过降低页面加载的时间,很多著名公司的收入和下载量有显著的提升。比如

  • Walmart 每降低100ms的加载时间, 他们的收入就提高1%.
  • Yahoo 每降低400ms的加载时间,他们的访问量就提升9%。
  • Mozilla 将他们的页面速度提升了2.2秒,每年多获得了1.6亿firefox的下载量。

网站优化的步骤

  1. 设定性能预算。
  2. 测试当前的性能。
  3. 找出导致性能问题的地方。
  4. 最后,duang,使用优化特技。

下面有几种方法可以提升你的页面性能,让我们来看看

速度指标

速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式,并且取决于viewport的大小。请看下图(用视频帧的形式展现页面加载时间,以秒为单位)。

速度指标越低越好。

速度指标可以通过Webpagetest 来测试(由Google维护)

长话短说

Webpage test 有很多特性,比如在不同的地方用不同的浏览器跑多个测试。 还可以测算其他的数据比如加载时间,dom元素的数量,首字节时间等等…

例如:查看amazon在webpagetest上的测试结果 。

可以看看这个视频,了解由 Patrick Meenan 讲解的关于webpagetest的更多信息(需要FQ)。

渲染阻塞

如果你知道浏览器如何运行,那么你应该知道HTML, CSS, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道,请看下图。

点击how a browser works了解更多浏览器工作原理(作者为Tali Garsiel 和Paul Irish).

浏览器渲染的步骤

  1. 首先浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型)
  2. 然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
  3. 在将DOM和CSSOM树结合成渲染树之前,JS文件被解析和执行。

现在你知道浏览器如何进行解析了,让我们看看是哪一部分阻塞了渲染树的生成。

1. 阻塞渲染的CSS

有人认为CSS阻塞了渲染。在构造CSSOM时,所有的CSS都会被下载,无论它们是否在当前页面中被使用。

为了解决这个渲染阻塞,跟着下面的两个步骤做

  1. 将关键CSS内嵌入页面中,即将最重要的(首次加载时可见的部分页面所使用到的)style写入head中的 <style></style>里。
  2. 移除没用到的CSS。

那么我是如何找出没用到的CSS的呢。

  1. 使用Pagespeed Insight 去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的统计数据。例如:Flipkart的Pagespeed Insight统计结果
  2. 使用Gulp任务,如gulp-uncss或是使用Grunt 任务,如grunt-uncss。如果你不知道他们是什么,请阅读我之前的文章

##专业小贴士

  1. 使用CSS Stats保证页面中完全没有未被用到的元素,唯一的样式和字体等等。
  2. Pagespeed Insight Chrome 插件.
  3. Tag Counter Chrome 插件.

2. 渲染阻塞的JavaScript

如果在解析HTML标记时,浏览器遇到了JavaScript,解析会停止。只有在该脚本执行完毕后,HTML渲染才会继续进行。所以这阻塞了页面的渲染。

为了解决它

在<script></script>标签中使用 async或defer特性。

  1. <script async>将会在HTML解析时下载该文件并在下载完成后马上执行。
  2. <script defer> 将会在HTML解析式下载该文件并在HTML解析完成后执行。

例如: async and defer都在Google Analytics中使用

点击查看async 和defer的浏览器支持。

内存泄漏

内存泄漏和页面臃肿 是前端开发者所要面对的问题之一。让我们来看看如何发现并解决内存泄漏。

在JavaScript中寻找内存泄漏

使用Chrome Task Manager(任务管理器)去检测app所使用的内存以及js内存(总体内存+实时内存)。如果你的内存一直随着你的每次操作而提高,那么你可以怀疑有内存泄漏了。

下面是Chrome Task Manager的截图。

Chrome DevTools分析

使用 Heap Profiler 去查看内存泄漏。打开Chrome devTools 然后点击profiles 标签,接着选中 take heap snapshot。如果你不了解Chrome DevTools,请阅读之前的文章.

Heap Profiler有四个快照视图(snapshot view)

  1. Summary 视图 – 展示对象的总体数量以及它们的实例总数,浅部(Shallow)大小(对象本身的内存大小)以及保留(Retained)大小(自动GC发生后所释放的内存大小+无法执行到的对象的内存大小)。
  2. Comparison 视图- 用于比较一个操作的前后的两个或多个快照,可以检测内存泄漏。
  3. Containment 视图- 展示了你的app对象架构的整体视图 + DOMWindow 对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
  4. Dominators 视图- 展示了 dominators 树的堆图。

点击了解更多 Heap profiler

DOM泄漏

对DOM元素的引用会导致DOM泄漏并且阻碍自动垃圾回收(GC)的进行。

来看一个例子


1

2

3

4

5

<div>

    <div id="container">

        <h1 id="heading">I am just a heading nothing much</h1>

    </div>

</div>


1

2

3

4

5

6

7

8

var parentEle = document.getElementById(‘container‘); //get parent ele reference 得到父元素的引用

var headingEle = document.getElementById(‘heading‘); //get child ele reference 得到子元素的引用

parentEle.remove(); //removes parent element from DOM 从DOM中移除父元素

//but its child ref still exist, So parentEle won‘t collect GC‘d and causes DOM Leak

//但是它的子元素引用仍然存在,所以parentEle不会被GC回收,因此导致了DOM泄漏。

将它的引用设置为null即可修复DOM泄漏。


1

headingEle = null; //Now parentEle will be GC‘d

上面就是前端开发者常遇到的问题。今天就讲到这。如果你喜欢我的文章,请分享或者在下面评论。谢谢!!

时间: 2024-10-11 04:48:08

Web性能优化系列(1):Web性能优化分析的相关文章

Android性能优化系列之App启动优化

Android性能优化系列之布局优化 Android性能优化系列之内存优化 Android性能优化系列之apk瘦身 应用的启动速度缓慢是我们在开发过程中常常会遇到的问题,比方启动缓慢导致的黑屏.白屏问题,本篇博客就将介绍App启动优化的相关知识. 应用的启动方式 通常来说,启动方式分为两种:冷启动和热启动. 1.冷启动:当启动应用时.后台没有该应用的进程.这时系统会又一次创建一个新的进程分配给该应用.这个启动方式就是冷启动. 冷启动由于系统会又一次创建一个新的进程分配给它.所以会先创建和初始化A

性能优化系列三:JVM优化1

一.几个基本概念 GCRoots对象都有哪些 所有正在运行的线程的栈上的引用变量.所有的全局变量.所有ClassLoader... 1.System Class.2.JNI Local3.JNI Global4.Thread Block5.Busy Monitor6.Java Local7.Native Stack8.Unfinalized9.Unreachable10.Java Stack Frame11.Unknown 栈帧的解释 Java虚拟机栈(Java Virtual Machine

提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果<title>节点已经解析并赋予新值,触发titleUpdate,页面开始渲染,触发rendering,页面渲染完毕,触发rendered,页面载入完毕触发loaded. loaded常用于判断页面是否载入完毕,载入完毕才显示新页面.但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢.为了

Android性能优化系列之Bitmap图片优化

在Android开发过程中,Bitmap往往会给开发者带来一些困扰,因为对Bitmap操作不慎,就容易造成OOM(Java.lang.OutofMemoryError - 内存溢出),本篇博客,我们将一起探讨Bitmap的性能优化. 为什么Bitmap会导致OOM? 1.每个机型在编译ROM时都设置了一个应用堆内存VM值上限dalvik.vm.heapgrowthlimit,用来限定每个应用可用的最大内存,超出这个最大值将会报OOM.这个阀值,一般根据手机屏幕dpi大小递增,dpi越小的手机,每

提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]

webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发titleUpdate,载入完毕触发loaded. 如果页面加载足够快,那么titleUpdate和loaded几乎同时触发.如果页面加载太慢,则loaded是全部载入完成才触发. loaded常用于判断页面是否载入完毕,载入完毕才显示新页面.但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢

性能优化系列七:SQL优化

一.SQL在数据库中的执行过程 二.执行计划 1. ACID 原子性:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节.事务在执行过程中发生错误,会被恢复(Rollback)到事务开始前的状态,就像这个事务从来没有执行过一样.一致性:在事务开始之前和事务结束以后,数据库的完整性没有被破坏.这表示写入的资料必须完全符合所有的预设规则,这包含资料的精确度.串联性以及后续数据库可以自发性地完成预定的工作.隔离性:数据库允许多个并发事务同时对其数据进行

Mysql优化系列之索引性能

实际上,前面的数据类型和表结构设计优化不能算优化,只能算规范,也就是说在设计表的时候,应该且必须做到这些 索引是sql优化的核心部分,在<高性能Mysql>中单独抽出一章讲,也印证了其重要性.这一篇也会讲的很细致. 以下所讲,除少数的如全文索引之外,均以Innodb存储引擎为基本 一.索引是什么 索引,在Mysql中也叫做"键(key)",是存储引擎用于快速找到记录的一种数据结构. 这里我们注意到:索引是一种数据结构,节点是有序的,有大小,有时候一张表的索引甚至会有几个G的

PLSQL_性能优化系列14_Oracle Index Anaylsis索引分析

2014-10-04 BaoXinjian 一.摘要 1. 索引质量 索引质量的高低对数据库整体性能有着直接的影响. 良好高质量的索引使得数据库性能得以数量级别的提升,而低效冗余的索引则使得数据库性能缓慢如牛,即便是使用高档的硬件配置. 因此对于索引在设计之初需要经过反复的测试与考量. 那对于已经置于生产环境中的数据库,我们也可以通过查询相关数据字典得到索引的质量的高低,通过这个分析来指导如何改善索引的性能. 2. 索引创建的基本指导原则 索引的创建应遵循精而少的原则 收集表上所有查询的各种不同

推荐:Java性能优化系列集锦

Java性能问题一直困扰着广大程序员,由于平台复杂性,要定位问题,找出其根源确实很难.随着10多年Java平台的改进以及新出现的多核多处理器,Java软件的性能和扩展性已经今非昔比了.现代JVM持续演进,内建了更为成熟的优化技术.运行时技术和垃圾收集器.与此同时,底层的硬件平台和操作系统也在演化. 目录: 一.Java性能优化系列之一--设计优化 二.Java性能优化系列之二--程序优化 三.Java性能优化系列之三--并发程序设计详解 四.Java性能优化系列之四--Java内存管理与垃圾回收

web性能优化系列(1):网站瓶颈识别

最近,公司网站的的访问量日益增大,PV马上过百万了.前期网站一到访问高峰,马上会变得很卡甚至打不开,后来做了很多优化后现在访问比较顺畅了.经过此事明白了一个道理,在遇到这类问题要做到两点,第一要相信自己的判断,不要随便轻易相信别人的话,没有人比你对自己做的东西更加了解.第二要相信你遇到的问题很多年前别人已经遇到过,广大的网友肯定有解决办法,汲取他们的解决经验和惨痛教训就行了. 性能优化工作总结如下: 首先要网站的性能瓶颈,有优化的目标才能有针对性,否则只能是做无用功了.那么常见的会产生性能瓶颈有