Web性能优化系列(1):Web性能优化分析
本文由 伯乐在线 - 鸭梨山大 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:gokulkrishh.github.io。欢迎加入翻译小组。
如果你的网站在1000ms内加载完成,那么会有平均一个用户停留下来。2014年,平均网页的大小是1.9MB。看下图了解更多统计信息。
网站的核心内容需要在1000ms内呈现出来。如果失败了,用户将永远不会再访问你的网站。通过降低页面加载的时间,很多著名公司的收入和下载量有显著的提升。比如
- Walmart 每降低100ms的加载时间, 他们的收入就提高1%.
- Yahoo 每降低400ms的加载时间,他们的访问量就提升9%。
- Mozilla 将他们的页面速度提升了2.2秒,每年多获得了1.6亿firefox的下载量。
网站优化的步骤
- 设定性能预算。
- 测试当前的性能。
- 找出导致性能问题的地方。
- 最后,duang,使用优化特技。
下面有几种方法可以提升你的页面性能,让我们来看看
速度指标
速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式,并且取决于viewport的大小。请看下图(用视频帧的形式展现页面加载时间,以秒为单位)。
速度指标越低越好。
速度指标可以通过Webpagetest 来测试(由Google维护)
长话短说
Webpage test 有很多特性,比如在不同的地方用不同的浏览器跑多个测试。 还可以测算其他的数据比如加载时间,dom元素的数量,首字节时间等等…
例如:查看amazon在webpagetest上的测试结果 。
可以看看这个视频,了解由 Patrick Meenan 讲解的关于webpagetest的更多信息(需要FQ)。
渲染阻塞
如果你知道浏览器如何运行,那么你应该知道HTML, CSS, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道,请看下图。
点击how a browser works了解更多浏览器工作原理(作者为Tali Garsiel 和Paul Irish).
浏览器渲染的步骤
- 首先浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型)
- 然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
- 在将DOM和CSSOM树结合成渲染树之前,JS文件被解析和执行。
现在你知道浏览器如何进行解析了,让我们看看是哪一部分阻塞了渲染树的生成。
1. 阻塞渲染的CSS
有人认为CSS阻塞了渲染。在构造CSSOM时,所有的CSS都会被下载,无论它们是否在当前页面中被使用。
为了解决这个渲染阻塞,跟着下面的两个步骤做
- 将关键CSS内嵌入页面中,即将最重要的(首次加载时可见的部分页面所使用到的)style写入head中的
<style></style>里。
- 移除没用到的CSS。
那么我是如何找出没用到的CSS的呢。
- 使用Pagespeed Insight 去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的统计数据。例如:Flipkart的Pagespeed Insight统计结果。
- 使用Gulp任务,如gulp-uncss或是使用Grunt 任务,如grunt-uncss。如果你不知道他们是什么,请阅读我之前的文章。
##专业小贴士
- 使用CSS Stats保证页面中完全没有未被用到的元素,唯一的样式和字体等等。
- Pagespeed Insight Chrome 插件.
- Tag Counter Chrome 插件.
2. 渲染阻塞的JavaScript
如果在解析HTML标记时,浏览器遇到了JavaScript,解析会停止。只有在该脚本执行完毕后,HTML渲染才会继续进行。所以这阻塞了页面的渲染。
为了解决它
在<script></script>标签中使用 async或defer特性。
- <script async>将会在HTML解析时下载该文件并在下载完成后马上执行。
- <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)
- Summary 视图 – 展示对象的总体数量以及它们的实例总数,浅部(Shallow)大小(对象本身的内存大小)以及保留(Retained)大小(自动GC发生后所释放的内存大小+无法执行到的对象的内存大小)。
- Comparison 视图- 用于比较一个操作的前后的两个或多个快照,可以检测内存泄漏。
- Containment 视图- 展示了你的app对象架构的整体视图 + DOMWindow 对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
- 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
|
上面就是前端开发者常遇到的问题。今天就讲到这。如果你喜欢我的文章,请分享或者在下面评论。谢谢!!
转载于:https://www.cnblogs.com/ranran/p/4462876.html
Web性能优化系列(1):Web性能优化分析相关推荐
- 【Linux 性能优化系列】Linux 性能优化 -- CPU 性能篇(三) Linux 软中断
[Linux 性能优化系列]Linux 性能优化 -- CPU 性能篇(三) Linux 软中断 [1]相关概念 [1.1]中断 中断其实是一种异步的事件处理机制,可以提高系统的并发处理能力:为了减少 ...
- 【Linux 性能优化系列】Linux 性能优化 -- CPU 性能篇(一) 平均负载、上下文切换、CPU 使用率
[Linux 性能优化系列]Linux 性能优化 -- CPU 性能篇(一) 平均负载.上下文切换.CPU 使用率 [1]相关概念 [1.1]平均负载 平均负载是指单位时间内,系统处于可运行状态和不可 ...
- 「性能优化系列」APP内存优化理论与实践
当一个应用同时运行越来越多的任务以及复杂的业务,Android系统的内存管理机制已经无法满足内存的释放与回收,为了应用的稳定性与性能,去控制内存的创建和回收就成为了一个重要的命题. 本篇文章主要涉及内 ...
- Android性能优化系列:CPU收敛优化(线程优化)
文章目录 线程调度 线程调度的原理 线程调度模型 Android 的线程调度 线程调度小结 Android 异步方式汇总 Thread HandlerThread IntentService Asyn ...
- java 优化 寄存器_JVM性能优化系列-(6) 晚期编译优化
6. 晚期编译优化 晚期编译优化主要是在运行时做的一些优化手段. 6.1 JIT编译器 在部分的商用虚拟机中,java程序最初是通过解释器(Interpreter) 进行解释执行的,当虚拟机发现某个方 ...
- 抖音 Android 性能优化系列:Java 内存优化篇
内存作为计算机程序运行最重要的资源之一,需要运行过程中做到合理的资源分配与回收,不合理的内存占用轻则使得用户应用程序运行卡顿.ANR.黑屏,重则导致用户应用程序发生 OOM(out of memory ...
- MySQL优化系列18-应用层优化
备注:测试数据库版本为MySQL 8.0 文章目录 一.概述 二. 常见问题 三.web服务器问题 3.1 寻找最优并发度 四.缓存 4.1 应用层以下的缓存 4.2 应用层缓存 4.3 缓存控制策略 ...
- Android性能优化系列之Bitmap图片优化
在Android开发过程中,Bitmap往往会给开发者带来一些困扰,因为对Bitmap操作不慎,就容易造成OOM(Java.lang.OutofMemoryError - 内存溢出),本篇博客,我们将 ...
- 性能优化系列之『图片优化:怎样让图片加载得更快?』
文章の目录 一.压缩png 1.优势 2.说明文档 3.安装 4.使用 4.1.环境 4.2.示例 4.3.API 4.4.还有一个第三库是对当前库的封装,叫jdf-png-native[版本1.1. ...
- 抖音 Android 性能优化系列:Java 锁优化
动手点关注干货不迷路
最新文章
- SAP 不支持交货单中同一个物料多个行项目HU与序列号组合发货场景
- android高德地图显示多点标记,高德地图多点标记自定义地图
- id和instancetype的区别
- linux下Epoll实现简单的C/S通信
- 中油即时通信电脑版_市场营销之即时通讯营销
- Mysql学习总结(67)——MYSQL慢查询日志
- Ubuntu下The program 'python' can be found in the following packages:
- 查看已安装java插件_记录下eclipse下的插件安装,查看及删除方式
- 杭电1863+1879
- Linux驱动之Kconfig语法——学习笔记(11)
- MOSS 中的计算公式
- C++中c_str()函数的用法
- 多播(组播)、单播、任播和广播
- Web功能测试(邮箱,手机号,验证码,身份证号测试用例)
- mysql2008r2 64位下载_mssql2008r2 64位下载
- 2022制冷与空调设备安装修理特种作业证考试题库及答案
- 以“实景+科幻三维建模渲染”,助力“实景三维中国建设”
- 【刷题】BZOJ 2959 长跑
- Vue搜索框显示最近(历史)搜索记录
- Spring boot 分页 无法将类中的构造器应用到给定的类型 PageRequest
热门文章
- windows_硬盘上设置虚拟内存
- 论“性能需求分析”系列专题(二)之 常用的性能需求获取方法
- Fragment.setArguments()
- xampp默认配置拿shell
- 有关网页抓取问题的一些经验总结 - passover【毕成功的博客】 - 51CTO技术博客
- CPU缓存与CPU性能的关系
- 湖北省武汉市电信IDC机房
- Ajax学习(6)---服务器端脚本和程序中用 JSON 进行响应和回复
- smarty模板引擎_7-自定义函数
- view,control,service,dao,model层的关系