23條前端性能優化,看懂就夠了!

前端性能優化是個巨大的課題,如果要面面俱到的說的話,估計三天三夜說不完。所以我們就從實際的工程應用角度出發,聊我們最常遇見的前端優化問題。

Yslow是雅虎開發的基于網頁性能分析瀏覽器插件,可以檢測出網頁的具體性能值,并且有著名的Yslow 23條優化規則,這23條,就夠我們玩的了。

1. 減少HTTP請求次數

盡量合并圖片、CSS、JS。比如加載一個頁面,如果有5個css文件的話,那么會發出5次http請求,這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而如果把這個5個文件合成一個的話,就只需要發出一次http請求,節省網絡請求時間,加快頁面的加載。

2. 使用CDN

網站上靜態資源即css、js全都使用cdn分發,圖片亦然。

3. 避免空的src和href

當link標簽的href屬性為空、script標簽的src屬性為空的時候,瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值,從而把頁面的內容加載進來作為它們的值。所以要避免犯這樣的疏忽。

4. 為文件頭指定Expires

Exipres是用來設置文件的過期時間的,一般對css、js、圖片資源有效。 他可以使內容具有緩存性,這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取,不需要再發出http請求。如下例子:

新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.

5. 使用gzip壓縮內容

gzip能夠壓縮任何一個文本類型的響應,包括html,xml,json。大大縮小請求返回的數據量。

6. 把CSS放到頂部

網頁上的資源加載時從上網下順序加載的,所以css放在頁面的頂部能夠優先渲染頁面,讓用戶感覺頁面加載很快。

7. 把JS放到底部

加載js時會對后續的資源造成阻塞,必須得等js加載完才去加載后續的文件 ,所以就把js放在頁面底部最后加載。

8. 避免使用CSS表達式

舉個css表達式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

這個表達式會持續的在頁面上計算樣式,影響頁面的性能。并且css表達式只被IE支持。

9. 將CSS和JS放到外部文件中

目的是緩存文件,可以參考原則4。 但有時候為了減少請求,也會直接寫到頁面里,需根據PV和IP的比例權衡。

10. 權衡DNS查找次數

減少主機名可以節省響應時間。但同時,需要注意,減少主機會減少頁面中并行下載的數量。

IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時,IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。

下面是新浪微博的圖片域名,我們可以看到他有多個域名,這樣可以保證這些不同域名能夠同時去下載圖片,而不用排隊。不過如果當使用的域名過多時,響應時間就會慢,因為不用響應域名時間不一致。

11. 精簡CSS和JS

這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件,把空格回車全部去掉,減少文件的大小。現在的壓縮工具有很多,基本主流的前端構建工具都能進行css和js文件的壓縮,如grunt,glup等。

12. 避免跳轉

有種現象會比較坑爹,看起來沒什么差別,其實多次了一次頁面跳轉。比如當URL本該有斜杠(/)卻被忽略掉時。例如,當我們要訪問 // baidu.com 時,實際上返回的是一個包含301代碼的跳轉,它指向的是 // baidu.com/ (注意末尾的斜杠)。在nginx服務器可以使用rewrite;Apache服務器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。

另一種是不用域名之間的跳轉, 比如訪問 // baidu.com/bbs 跳轉到 // bbs.baidu.com/ 。那么可以通過使用Alias或者mod_rewirte建立CNAME(保存一個域名和另外一個域名之間關系的DNS記錄)來替代。

13. 刪除重復的JS和CSS

重復調用腳本,除了增加額外的HTTP請求外,多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存,它們都存在重復運算JavaScript的問題。

14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來服務器上的一致。比last-modified date更具有彈性,例如某個文件在1秒內修改了10次,Etag可以綜合Inode(文件的索引節點(inode)數),MTime(修改時間)和Size來精準的進行判斷,避開UNIX記錄MTime只能精確到秒的問題。 服務器集群使用,可取后兩個參數。使用ETags減少Web應用帶寬和負載

15. 可緩存的AJAX

異步請求同樣的造成用戶等待,所以使用ajax請求時,要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話,直接使用緩存

$.ajax({      url : 'url',      dataType : "json",      cache: true,      success : function(son, status){                  }

16. 使用GET來完成AJAX請求

當使用XMLHttpRequest時,瀏覽器中的POST方法是一個“兩步走”的過程:首先發送文件頭,然后才發送數據。因此使用GET獲取數據時更加有意義。

17. 減少DOM元素數量

這是一門大學問,這里可以引申出一堆優化的細節。想要具體研究的可以看后面推薦書籍。總之大原則減少DOM數量,就會減少瀏覽器的解析負擔。

18. 避免404

比如外鏈的css、js文件出現問題返回404時,會破壞瀏覽器的并行加載。

19. 減少Cookie的大小

Cookie里面別塞那么多東西,因為每個請求都得帶著他跑。

20. 使用無cookie的域

比如CSS、js、圖片等,客戶端請求靜態文件的時候,減少了 Cookie 的反復傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在于瀏覽器加載圖片時它會終止內容的呈現并且凍結瀏覽器。在每一個元素(不僅僅是圖片)它都會運算一次,增加了內存開支,因此它的問題是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替,這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader,請使用下劃線_filter又使之對IE7以上版本的用戶無效。

22. 不要在HTML中縮放圖片

比如你需要的圖片尺寸是50* 50

那就不用用一張500*500的大尺寸圖片,影響加載

23. 縮小favicon.ico并緩存

以上是Yslow的23個優化原則,基本可以涵蓋現在前端大部分的性能優化原則了,很多更加geek和精細優化方法都是從這些原則里面延伸出來的。 具體想了解更多優化細則的童鞋建議去看看下面的一本書,畢竟頁數多講的也細嘛:

前端優化是條漫長的路,不是說一天兩天就能全部做完的。我們可以參考上面的準則去把我們目前能做的都給優化了,剩下的更加小的一些細節點不用太過著急,畢竟也是要考慮優化性價比的。比如為了減小一個文件幾個字節花上個把月根本不值得。這些優化的東西都可以在我們的工作中慢慢去通過積累,去通過google解決。


來自:https://zhuanlan.zhihu.com/p/23543612


上一篇: 作為一名潮流的程序員,你需要知道HTML5的三大優勢

下一篇: 10個常見的HTML5 面試問題及答案

分享到: 更多
免费彩金不限id 三公棋牌游戏平台 时时计划软件免费版 手机投彩是真的假的 真钱抢庄牌九 雪缘网足球彩票比分直播 快速时时开奖记录 重庆时时真的假的 刘军稳赚秘籍 vv时时彩计划软件 重庆时时51计划 7m篮球即时比分直播 聚宝盆计划安卓手机端 排九快速记牌 pk10高手云集5码精准计划 易彩分分彩计划稳赚