長沙網站優化公司

Web性能優化系列:Web性能優化分析

浏覽:/ 2015-06-30

 如果你的網站在1000ms內加載完成,那麽會有平均一個用戶停留下來。2014年,平均網頁的大小是1.9MB。看下圖了解更多統計信息。

 
網站優化 Web性能優化 網站性能優化
 
網站的核心内容需要在1000ms内呈现出来。如果失败了,用户将永远不会再访问你的網站。通过降低页面加载的时间,很多著名公司的收入和下載量有顯著的提升。比如
 
Walmart 每降低100ms的加载时间, 他们的收入就提高1%;
Yahoo 每降低400ms的加载时间,他们的访问量就提升9%。
Mozilla 将他们的页面速度提升了2.2秒,每年多获得了1.6亿firefox的下载量。
網站優化的步骤
 
seo.jpg
 
設定性能預算。
測試當前的性能。
找出導致性能問題的地方。
最后,duang,使用優化特技。
下面有幾種方法可以提升你的頁面性能,讓尊龙D88官网新版來看看
 
速度指標
 
速度指標是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式,并且取决于viewport的大小。请看下图(用视频帧的形式展现页面加载时间,以秒为单位)。
 
速度指標越低越好。
 
網站優化 Web性能優化 網站性能優化
 
速度指標可以通过Webpagetest来测试(由Google维护)
 
長話短說
 
Webpage test 有很多特性,比如在不同的地方用不同的浏览器跑多个测试。 还可以测算其他的数据比如加载时间,dom元素的数量,首字节时间等等…
 
例如:查看amazon在webpagetest上的测试结果了解由 Patrick Meenan 讲解的关于webpagetest的更多信息(需要翻墙)。
 
渲染阻塞
 
如果你知道浏览器如何运行,那么你应该知道HTML, CSS, JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道,请看下图。
 
網站優化 Web性能優化 網站性能優化
 
 
点击how a browser works了解更多浏览器工作原理(作者为Tali Garsiel 和Paul Irish).
 
浏覽器渲染的步驟
 
首先浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型)
然后解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
在將DOM和CSSOM樹結合成渲染樹之前,JS文件被解析和執行。
現在你知道浏覽器如何進行解析了,讓尊龙D88官网新版看看是哪一部分阻塞了渲染樹的生成。
 
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的浏览器支持。
 
內存泄漏
 
內存泄漏和页面臃肿 是前端开发者所要面对的问题之一。让尊龙D88官网新版来看看如何发现并解决內存泄漏。
 
在JavaScript中寻找內存泄漏
 
使用Chrome Task Manager(任务管理器)去检测app所使用的内存以及js内存(总体内存+实时内存)。如果你的内存一直随着你的每次操作而提高,那么你可以怀疑有內存泄漏了。
 
下面是Chrome Task Manager的截图。
 
網站優化 Web性能優化 網站性能優化
 
Chrome DevTools分析
 
使用 Heap Profiler 去查看內存泄漏。打开Chrome devTools 然后点击profiles 标签,接着选中 take heap snapshot。如果你不了解Chrome DevTools,请阅读之前的文章。
 
網站優化 Web性能優化 網站性能優化
 
Heap Profiler有四个快照视图(snapshot view)
 
Summary 视图 – 展示对象的总体数量以及它们的实例总数,浅部(Shallow)大小(对象本身的内存大小)以及保留(Retained)大小(自动GC发生后所释放的内存大小+无法执行到的对象的内存大小)。
Comparison 视图- 用于比较一个操作的前后的两个或多个快照,可以检测內存泄漏。
Containment 视图- 展示了你的app对象架构的整体视图 + DOMWindow 对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
Dominators 视图- 展示了 dominators 树的堆图。
点击了解更多Heap profiler。
 
DOM泄漏
 
對DOM元素的引用會導致DOM泄漏並且阻礙自動垃圾回收(GC)的進行。
 
來看一個例子
 
<div>
    <div id="container">
        <h1 id="heading">I am just a heading nothing much</h1>
    </div>
</div>
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泄漏。
 
headingEle = null;//Now parentEle will be GC'd
上面就是前端開發者常遇到的問題。今天就講到這。如果你喜歡我的文章,請分享或者在下面評論。謝謝!!

閱讀"Web性能優化系列:Web性能優化分析"的人還閱讀

上一篇:網站優化关于描述的细节

下一篇:網站優化五个技巧 让你的網站更受蜘蛛喜爱