資訊專欄INFORMATION COLUMN
摘要：為了可以頂下這個雷，特意買了高性能網站建設指南。規則七避免使用表達式原因表達式在你不知道得情況下執行多次，嚴重影響前端性能。這也是會降低前端性能的。
最近要實現前端性能探測，可是對于一個剛入職場的我來說前端性能是個啥，我還是個只追求頁面展示效果的娃兒~。為了可以頂下這個雷，特意買了高性能網站建設指南。這本書真的不錯，強烈推薦看到本文的朋友看一下。
規則一 減少http請求數原因：為什么要減少http請求數量呢？ http建立連接是需要時間成本的，http協議規定瀏覽器對于統一域名的資源請求數有限制。因此需要采取一些手段降低請求數量。
方案：
使用圖片精靈合并小圖片為一張大圖片
合并js資源和css資源
內聯小圖片(data:url)
規則二 使用內容發布網絡原因： 用戶距離我們的服務器可能十萬八千里，為了提高資源的響應速度可以將其放在距離用戶較近的代理服務器上，缺點嗎，可能會花點錢去購買cdn服務。
規則三 添加Expires頭----使用緩存將靜態資源緩存在用戶本地，當用戶二次訪問時直接從本地獲取資源，大大的降低了網絡請求的成本。
方案：
使用Expires頭，可能會存在用戶的代理和服務器的時間標準不同造成緩存失效的時機不準確。
使用Cache-control: max-age=xxxxxxx
二者本質相同，cache-control的優先級大于前者，可以使用修改文件名的方式簡單粗暴的解決緩存可能存在的問題。
規則四 壓縮組件使用壓縮減少資源的大小，進而減少網絡響應的時間。目前gzip壓縮使用的較為廣泛。壓縮腳本和樣式表文件比較值得，不要壓縮圖片和pdf文件，它們本身已被壓縮。
規則五 將樣式表放在頂部該方案可以使的網頁逐步呈現，用戶體驗會很好，感覺網站響應的比較快。不會出現閃爍。
規則六 將腳本放在底部原因： 腳本的下載和解析會阻塞其他資源的并行下載。目前瀏覽器為script標簽提供了兩個新的屬性defer async二者都實現資源的異步下載不會阻塞其他資源的下載。區別在于defer會等頁面渲染完成后在執行，async無法保證它執行的時間，下載完就執行。對比起來defer更具有實際使用價值。
規則七 避免使用css表達式原因： 表達式在你不知道得情況下執行n多次，嚴重影響前端性能。
規則八 使用外部的js和css文件對于首次訪問而言，內聯形式的渲染速度會高于外鏈的形式。但是外部文件的形式可以緩存啊。用戶再次訪問該頁面時就不用再次請求資源。
規則九 減少DNS查詢方案: 利用http的keep-alive的連接復用，控制域名的數量。控制域名數量同時存在資源并行下載數限制的問題，因此呢，需要實際情況做好權衡。
規則十 精簡JS代碼刪除注釋、空格、將長變量名置換為短的變量名。也就是壓縮和混淆了。css代碼也需要去除空格和注釋。
規則十一 避免重定向瀏覽器做重定向這個操作是需要時間的。因此呢，要盡量避免重定向。前端同學需要注意的就是不要忽略結尾的斜線
借此機會就簡單聊聊常用的3xx狀態碼
301 永久重定向。301重定向會導致用戶的書簽更新。
302 臨時重定向。
303 See Other 不論重定向之前的請求方式是什么，本次請求都以get的形式請求
304 Not Modified 發生的場景：瀏覽器使用緩存，但是緩存過期了此時瀏覽器請求服務器資源，服務器的資源并沒有更新過，瀏覽器繼續使用本地資源。響應的響應體是沒有內容的。該請求成為條件請求。
307 重定向前請求是什么方式，本次請求還以該方式請求資源
和 307是302的一個規范化變種。302原則上講是不允許我們將原來的post請求換為get請求方式的，但是大家都這么做。因此才會出現后來的303和307.
規則十二 刪除重復的腳本（廢棄吧）隨著項目規模的擴大及參與人員的增多，可能會出現重復引入資源的情況。這也是會降低前端性能的。但是在這個前端工程化的年代，打包工具會幫我們處理好該問題。
規則十三 配置ETagEtag是web服務器和瀏覽器用于確認緩存組件是否有效的一種機制。服務器配置一下即可。
規則十四 使用AJAX緩存可以通過http的響應和請求頭控制ajax是否需要緩存。緩存這個東西呢用好了就是天使，用不好就是魔鬼。哈哈。
高性能網站建設指南
移動端優化知識
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83119.html
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了兩件事，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點 在過去的八個月中，我幾乎只做了...
閱讀 2254·2021-11-22 09:34
閱讀 2025·2021-09-22 15:22
閱讀 2024·2019-08-29 15:05
閱讀 2116·2019-08-26 10:43
閱讀 3413·2019-08-26 10:26
閱讀 892·2019-08-23 18:29
閱讀 3524·2019-08-23 16:42
閱讀 2002·2019-08-23 14:46
