本文由 伯乐在线 - 鸭梨山大 翻译,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

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

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

  1. JVM性能优化系列-(5) 早期编译优化

    5. 早期编译优化 早起编译优化主要指编译期进行的优化. java的编译期可能指的以下三种: 前端编译器:将.java文件变成.class文件,例如Sun的Javac.Eclipse JDT中的增量式 ...

  2. JVM性能优化系列-(6) 晚期编译优化

    6. 晚期编译优化 晚期编译优化主要是在运行时做的一些优化手段. 6.1 JIT编译器 在部分的商用虚拟机中,java程序最初是通过解释器(Interpreter) 进行解释执行的,当虚拟机发现某个方 ...

  3. SQL优化系列(二)- 优化Top SQL

    优化最耗资源的N条SQL语句 如何从SGA或者AWR中找出最消耗资源的SQL, 例如最慢的20条SQL, 然后逐条优化? SQL自动优化工具SQL Tuning Expert Pro for Orac ...

  4. SQL优化系列(一)- 优化SQL

     优化SQL SQL开发人员从源代码中发现一条跑得很慢的SQL, 如何优化? DBA从AWR报告中发现一条跑得很慢的SQL,没有源代码或者不想修改源代码怎么办? SQL自动优化工具SQL Tuning ...

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

    Android性能优化系列之布局优化 Android性能优化系列之内存优化 Android性能优化系列之apk瘦身 应用的启动速度缓慢是我们在开发过程中常常会遇到的问题,比方启动缓慢导致的黑屏.白屏问 ...

  6. PLSQL_性能优化系列16_Oracle Tuning Analyze优化分析

    2014-12-23 Created By BaoXinjian

  7. 性能优化系列三:JVM优化

    一.几个基本概念 GCRoots对象都有哪些 所有正在运行的线程的栈上的引用变量.所有的全局变量.所有ClassLoader... 1.System Class.2.JNI Local3.JNI Gl ...

  8. Mysql优化系列之查询性能优化前篇1

    前言 这是优化系列的最后一篇的第1小篇,我们其实可以直接从sql怎么写讲起,why not?但是我还是决定花2个篇幅 问一些问题,带着几个问题循序渐进的往下走. 一个sql语句是怎么被执行的? sql ...

  9. 性能优化系列四:Tomcat优化

    一.Tomcat工作原理 1. TCP的三次握手四次挥手 三次握手: 说明: 类比于A和B打电话: A对B说:你好,我是A,你能听到我说话吗? B对A说:嗯,我能听到你说话 A对B说:好,那我们开始聊 ...

  10. Mysql优化系列之查询性能优化前篇2

    接前一篇,这一篇主要总结下几个经常要用的命令 命令一:explain+sql mysql> explain select * from servers; +----+-------------+ ...

随机推荐

  1. 原生和jquery 的 ajax

    form数据的序列化: $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:n ...

  2. tomcat运行JSP时产生的错误:”javax.servlet.servletexception: java.lang.nosuchmethoderror”

    这个错误其实是多次重复编译JAVA文件导致的,需要clean操作,简单的来说就是删除tomcat下work文件夹中工作空间,也可以理解为自己的虚拟路径,比如我运行的jsp的路径:localhost:8 ...

  3. KNY三人组对YiSmile小程序的项目总结

    设想和目标 1.我们的小程序要解决什么问题? 针对于本校学生,服务于本校学生.由于丢东西,找东西的事情每天都在上演,空间说说,朋友圈,官方QQ,信息比较冗杂,没有一个固定的平台来专门提供学生.此外,教 ...

  4. [Docker基础]如何清除不用的资源

    Docker - How to cleanup resources 有时你可能需要清理Docker中不用的资源,特别是在学习Docker过程中创建的镜像.容器.网络.存储卷等. delete volu ...

  5. C语言和go语言之间的交互 - C语言中使用go语言,使用的go语言又使用了c语言

    一.go语言中使用C语言 go代码中使用C代码,在go语言的函数块中,以注释的方式写入C代码,然后紧跟import “C” 即可在go代码中使用C函数 代码示例: go代码:testC.go 1 pa ...

  6. File类操作文件

    简单示例: public static void main(String[] args) { // 列出系统所有的根路径 File[] listRoots = File.listRoots(); fo ...

  7. 学习Java并发的课程

    https://www.javaspecialists.eu/courses/concurrency.jsp http://www.jconcurrent.com/ javaConcurrentAni ...

  8. js 复制到剪切板

    function copyTextToClipboard(text) { var copyFrom = $('<textarea/>'); copyFrom.text(text); $(' ...

  9. linux下&、nohup与screen的比较

    & 首先,linux进程是区分前台进程和后台进程的. 通常,在终端输入的命令执行的前台进程模式.如果一个命令要执行好久,就会阻塞住终端好久,不能进行其他工作,所以,我们可以把执行花费时间很长的 ...

  10. [代码]--给GridControl中的某列添加图片

    要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...