如何進行web前端效能優化
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【如何進行web前端效能優化】
大家好，我是IT修真院深圳分院第9期的學員許永堅，一枚正直純潔善良的前端程式設計師，今天給大家分享一下，修真院官網JS任務10，深度思考中的知識點——如何進行web前端效能優化
A. 背景介紹
使用者訪問網頁的等待時間，有80%是發生在瀏覽器前端，特別是頁面和頁面中各種元素（圖片、CSS、JavaScript、 flash…）的下載之上，因此進行前端優化很有必要。
B. 知識剖析
2.1 初次訪問
1）減少一個頁面訪問所產生的http連線次數
儘量簡潔的頁面設計，最大程度減少圖片的使用，通過放棄一些不必要的頁面特效來減少javascript的使用。
使用一些優化技巧，比如利用圖片的背景位移減少圖片的個數；image map技術；Sprites圖；使用Inline images將css圖片捆綁到網頁中。
儘量合併js和css檔案，減少獨立檔案個數。
2）使用gzip壓縮網頁內容
使用gzip來壓縮網頁中的靜態內容，能夠顯著減少使用者訪問網頁時的等待時間。主流的web伺服器都支援或提供gzip壓縮，如果使用apache伺服器，只需要在配置檔案中開啟 mod_gzip（apache1.x）或mod_deflate(apache2.x)即可。
使用gzip壓縮都能夠顯著提高伺服器效率並減少頻寬支出，注意圖片內容本身已經是壓縮格式了，務必不要再進行壓縮。
3）將CSS放在頁面頂端，JS檔案放在頁面底端
CSS的引用要放在html的頭部header中，JS檔案引用盡量放在頁面底端標籤的後面，主要的思路是讓核心的頁面內容儘早顯示出來
4）使JS檔案內容最小化
使用一些javascript壓縮工具對js指令碼進行壓縮，去除其中的空白字元、註釋，最小化變數名等。
5）儘量減少外部指令碼的使用，減少DNS查詢時間
不要在網頁中引用太多的外部指令碼，首先，一次dns的解析過程會消耗20-120毫秒的時間；其次，如果在頁面中引用太多的外部檔案（如各種廣告、聯盟等程式碼），可能會因為外部檔案的響應速度而將你的網站拖得很慢。瀏覽器一般只能並行處理同一域名下的兩個請求，而對於不同子的域名則不受此限制，因此適當將本站靜態內容（css,js）放在其他的子域名下（如 static.xxx.com）會有利於提高瀏覽器並行下載網頁內容的能力。
如果必須引用外部檔案，儘量將這些指令碼放在頁尾，可以使用CDN加速和DNS域名解析加速。
2.2 經常訪問
1）在header中新增過期時間(Expires Header)
在header中給靜態內容新增一個較長的過期時間，這樣可以使使用者今後訪問只讀取快取中的檔案，而不會與伺服器產生任何的互動。
這樣做存在一些問題，當圖片、CSS和js檔案更新時，使用者如果不重新整理瀏覽器，就無法獲得此更新。這樣，我們在對圖片、css和js檔案修改時，必須要進行重新命名，才能保證使用者訪問到最新的內容。這可能會給開發造成不小的麻煩，因為這些檔案可能被站點中的許多檔案所引用。
flickr提出的解決辦法是通過url rewrite使不同版本號的URL，事實上指向同一個檔案，因為url級別的操作效率是很高的，可以給開發過程提供不少便利。
瀏覽器訪問url時的工作機制：
第一次訪問url時，使用者從伺服器段獲取頁面內容，並把相關的檔案（images,css,js…）放在快取記憶體中，也會把檔案頭中的expired time,last modified, ETags等相關資訊也一同保留下來。
使用者重複訪問url時，瀏覽器首先看快取記憶體中是否有本站同名的檔案，如果有，則檢查檔案的過期時間；如果尚未過期，則直接從快取中讀取檔案，不再訪問伺服器。
如果快取中檔案的過期時間不存在或已超出，則瀏覽器會訪問伺服器獲取檔案的頭資訊，檢查last modifed和ETags等資訊，如果發現本地快取中的檔案在上次訪問後沒被修改，則使用本地快取中的檔案；如果修改過，則從伺服器上獲取最新版本。
2）將css和js檔案放在獨立外部檔案中引用
將css和js檔案放在獨立檔案中，這樣它們會被單獨快取起來，在訪問其他頁面時可以從瀏覽器的快取記憶體中直接讀取。
3）去掉重複的指令碼
在IE中，包含重複的js指令碼會導致瀏覽器的快取不被使用。
4）避免重定向的發生
除了在header中人為的重定向之外，網頁重定向常在不經意間發生，被重定向的內容將不會使用瀏覽器的快取。比如使用者在訪問www.xxx.com，伺服器會通過301轉向到www.xxx.com/，在後面加了一個“/”。如果伺服器的配置不好，這也會給伺服器帶來額外的負擔。通過配置apache的 alias或使用mod_rewrite模組等方法，可以避免不必要的重定向。
C. 常見問題
1. 效能魔方如何使用？
2. sprite是什麼？
3. 效能測試重要嗎？
D. 解決方案
1.效能魔方如何使用？
http://www.mmtrix.com/，點選‘立即體驗’，然後複製連結
2.sprite是什麼？
雪碧圖，將圖片合成起來使用background來定位。
3.效能測試重要嗎？
重要。
E. 編碼實戰
F. 拓展思考
幾種不常用的方式：使用CDN分發機制、避免CSS表示式、避免使用ETags
G. 參考文獻
參考一：如何優化Web網站效能？
參考二：如何在nginx上使用gzip？
參考三：gzip nginx官網
參考四：效能魔方的使用
參考五：效能優化指南-知乎
參考六：移動H5前端效能優化指南
H. 更多討論
1.效能魔方如何使用？
http://www.mmtrix.com/，點選‘立即體驗’，然後複製連結
2.sprite是什麼？
雪碧圖，將圖片合成起來使用background來定位。
3.效能測試重要嗎？
重要。
I. 鳴謝
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：http://www.jsnhu.com，初學者轉行到網際網路的聚集地