Web性能优化分析
2017-01-12 22:58
197 查看
原址:http://web.jobbole.com/82297/
如果你的网站在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的更多信息(需要翻墙)。
如果你知道浏览器如何运行,那么你应该知道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文件被解析和执行。
现在你知道浏览器如何进行解析了,让我们看看是哪一部分阻塞了渲染树的生成。
有人认为CSS阻塞了渲染。在构造CSSOM时,所有的CSS都会被下载,无论它们是否在当前页面中被使用。
为了解决这个渲染阻塞,跟着下面的两个步骤做
将关键CSS内嵌入页面中,即将最重要的(首次加载时可见的部分页面所使用到的)style写入head中的
移除没用到的CSS。
那么我是如何找出没用到的CSS的呢。
使用Pagespeed Insight 去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的统计数据。例如:Flipkart的Pagespeed
Insight统计结果。
使用Gulp任务,如gulp-uncss或是使用Grunt 任务,如grunt-uncss。如果你不知道他们是什么,请阅读我之前的文章。
使用CSS Stats保证页面中完全没有未被用到的元素,唯一的样式和字体等等。
Pagespeed Insight Chrome
插件.
Tag Counter Chrome
插件.
如果在解析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的截图。
使用 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泄漏并且阻碍自动垃圾回收(GC)的进行。
来看一个例子
XHTML
JavaScript
将它的引用设置为null即可修复DOM泄漏。
JavaScript
如果你的网站在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的更多信息(需要翻墙)。
渲染阻塞
如果你知道浏览器如何运行,那么你应该知道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)的进行。来看一个例子
XHTML
12345 | <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泄漏。 |
JavaScript
1 | headingEle = null; //Now parentEle will be GC'd |
相关文章推荐
- 一个Web报表项目的性能分析和优化实践(二):MySQL数据库连接不够用(TooManyConnections)问题的一次分析和解决案例
- 一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间
- Web服务器性能监控分析与优化
- 一个Web报表项目的性能分析和优化实践(三) :提高Web应用服务器Tomcat的内存配置,并确认配置正确
- 基于Web应用的性能分析及优化案例
- 一个Web报表项目的性能分析和优化实践(二):MySQL数据库连接不够用(TooManyConnections)问题的一次分析和解决案例
- 一个Web报表项目的性能分析和优化实践(六):设置MySQL的最大连接数(max_connections)
- 基于Web应用的性能分析及优化案例
- 一个Web报表项目的性能分析和优化实践(六):设置MySQL的最大连接数(max_connections)
- Web性能优化分析
- web前端性能优化-http请求分析工具
- 一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间
- 一个Web报表项目的性能分析和优化实践(五):重构有助于性能优化么?
- 一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间
- 一个Web报表项目的性能分析和优化实践(七):性能监测工具JavaMelody
- 一个Web报表项目的性能分析和优化实践(四):MySQL建立索引,唯一索引和组合索引
- [置顶] 一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间
- 一个Web报表项目的性能分析和优化实践(四):MySQL建立索引,唯一索引和组合索引
- Web服务器性能监控分析与优化
- 基于Web应用的性能分析及优化案例