讀書筆記–高效能網站建站指南（JS篇）

吞吞吐吐的發表於2017-09-06
原文網址 : https://flycode.co/archives/131579
筆記網站JS

本文目的

最近專案開發到一定階段了，大部分需求已經完成，可以將精力放到Web效能優化上。首先從前端js入手，找來這本書《高效能網站建站指南》作為指導。週末在家將所有JS相關的優化點閱讀了一邊，現在記錄下要點，作為備忘。

主要有四點需要優化的地方：

  • 將指令碼放到底部（Rule 6: Put Scripts at the Bottom）
  • 將JS和CSS放到頁面外部（Rule 8: Make JavaScript and CSS External）
  • 最小化JS（Rule 10: Minify JavaScript）
  • 指令碼去重（Rule 12: Remove Duplicate Scripts）

下面逐一分析原因（親，Rule後面的數字越小，越重要喲！）。

 

將指令碼放到底部（Rule 6: Put Scripts at the Bottom）

指令碼載入會堵塞其他頁面元素的並行下載，比如圖片。所以，最好將指令碼等引用放到頁面底部。

指令碼放到頂部和底部的效能區別，可以參考這個的例子：http://stevesouders.com/hpws/move-scripts.php

 

將JS和CSS放到頁面外部（Rule 8: Make JavaScript and CSS External）

從一次頁面載入而言，同樣大小的頁面，內建的css和js比外接的快。因為外接的頁面會有多個http請求，由於網路延時和頻寬等原因，比較耗時，所以較慢。但是，如果頁面被使用者訪問多次，並且訪問期間js和css沒有改變，那麼外接的頁面就會更快，更省流量，並且這種優勢，隨著頁面訪問量的加大和頻率加快而加強。所以，一個頁面的js和css是否放到外部，是基於此頁面的訪問量，訪問頻率而定的，不能一概而論。

如何在Linux上設定apahce快取，參見下面的連線：

 

最小化JS（Rule 10:  Minify JavaScript）

精簡：去除所有空白符號，如空格，回車。

混淆：做了精簡的工作，同時用簡化的字元替換函式名和變數名，進一步減JS件大小。優點：相比於精簡，它能夠節省更多流量，而且可以保護原始碼被反向工程。缺點：1）容易引入bug；2）提高維護成本；3）現網bug難以定位。

壓縮：採用gzip等演算法壓縮。

gzip壓縮一般可以節省70%，而精簡和混淆只有20%。精簡或混淆後再gzip，節省的檔案也超不過80%。所以，gzip對節省流量貢獻最大。大多數情況，只用gzip就OK了。gzip不會有精簡和混淆的缺點。

如何在Linux上設定apache的gzip壓縮，參見下面的連結：

 

指令碼去重（Rule 12: Remove Duplicate Scripts）

指令碼可能會多重引用嗎？如果同一個頁面，只有你一個人編輯，可能不會，但是如果同一個頁面有數個人同時編輯，那麼引用重複的指令碼的概率很大。據此書給出的資料，截至寫書時，CNN和youtube兩個站點出現過此情況。瀏覽器然道不會記錄已經下載的指令碼嗎？此書說ff不會重複下載，但是IE會。不過經過IE8實驗後,，發現IE8也不會重複下載。可能此書年代較為久遠（2008年），也可能是此問題被此書指出之後，IE接受並修復了。所以“紙上得來終覺淺，絕知此事要躬行”。

但是，即使沒有多的http請求，那麼就可以放任這類情況不管了嗎？當然不行，因為雖然不會載入多的http請求，但是會重複執行程式碼。這樣輕則影響效能，重則引入bug。可以參見這個例子：http://stevesouders.com/hpws/dupe-scripts-cached10.php。此例子將一個指令碼包含了10次，每一次就會將一個全域性變數自增1，最後此變數自增了10次。

此書最後還提供了一個自動解決指令碼重複的方案，主要是通過js程式碼引入指令碼，有興趣的同學可以去下載此書看看究竟。

 

OK，上面就是學到的一些前端JS優化的內容，希望對你有幫助！（本文歡迎轉載，請註明出處，謝謝合作）


本文轉自bourneli部落格園部落格，原文連結：http://www.cnblogs.com/bourneli/archive/2012/10/29/2744875.html，如需轉載請自行聯絡原作者


相關文章