讀書筆記–高效能網站建站指南(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快取,參見下面的連線:
- Apache官網引數資料:http://httpd.apache.org/docs/current/mod/mod_expires.html
- 快速配置apache快取(如果apache配置不陌生,5分鐘可以搞定):http://wesoho.blog.51cto.com/715082/186347
最小化JS(Rule 10: Minify JavaScript)
精簡:去除所有空白符號,如空格,回車。
混淆:做了精簡的工作,同時用簡化的字元替換函式名和變數名,進一步減JS件大小。優點:相比於精簡,它能夠節省更多流量,而且可以保護原始碼被反向工程。缺點:1)容易引入bug;2)提高維護成本;3)現網bug難以定位。
壓縮:採用gzip等演算法壓縮。
gzip壓縮一般可以節省70%,而精簡和混淆只有20%。精簡或混淆後再gzip,節省的檔案也超不過80%。所以,gzip對節省流量貢獻最大。大多數情況,只用gzip就OK了。gzip不會有精簡和混淆的缺點。
如何在Linux上設定apache的gzip壓縮,參見下面的連結:
- Apache官網參考資料:http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
- 快速配置apahce gzip模組(5分鐘可以搞定):http://yangsiwei.com/add-mod_deflate-module-to-apache2
指令碼去重(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,如需轉載請自行聯絡原作者
相關文章
- 高效能建站指南筆記筆記
- 《Node.js開發指南》讀書筆記Node.js筆記
- 《高效能JavaScript》讀書筆記JavaScript筆記
- 【讀書筆記】《高效能JavaScript》筆記JavaScript
- 《高效能 JavaScript》讀書筆記(一)JavaScript筆記
- js高程讀書筆記JS筆記
- 讀書筆記-大型網站技術架構筆記網站架構
- 《大型網站技術架構》讀書筆記網站架構筆記
- 《Git權威指南》讀書筆記Git筆記
- 讀書筆記【JS 權威指南】14.1 計時器筆記JS
- 高效能MySQL讀書筆記---索引優化MySql筆記索引優化
- 【前端效能優化】高效能JavaScript讀書筆記前端優化JavaScript筆記
- 高效能JavaScript 重排與重繪 讀書筆記JavaScript筆記
- 《高效能iOS應用開發》讀書筆記iOS筆記
- 讀書筆記:高效能PHP應用開發筆記PHP
- 《sed & awk》讀書筆記之 awk 篇筆記
- 一篇政治類讀書筆記筆記
- 程式設計師生存指南讀書筆記-第三篇(學習)程式設計師筆記
- 《IBM BPM實戰指南》讀書筆記IBM筆記
- 《IDA Pro權威指南》讀書筆記筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第3篇 案例網站架構筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第1篇 概述網站架構筆記
- 深入淺出Nodejs讀書筆記NodeJS筆記
- 《高效能JavaScript》讀書筆記①載入和執行JavaScript筆記
- 程式設計師生存指南讀書筆記-第四篇(生產力)程式設計師筆記
- 讀書筆記3-卡頓優化篇筆記優化
- 《Haskell趣學指南》讀書筆記(2):Type And TypeclassHaskell筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第2篇 架構網站架構筆記
- 讀書筆記筆記
- 讀書筆記...筆記
- 讀書筆記2-記憶體優化篇筆記記憶體優化
- 《大型網站系統與Java中介軟體》讀書筆記(上)網站Java筆記
- 讀書筆記【JS 權威指南】14.2 瀏覽器定位和導航筆記JS瀏覽器
- 高效能MySQL.讀書筆記(六)高可用性MySql筆記
- 讀書筆記5-資料儲存篇筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記網站架構筆記
- Cucumber讀書筆記筆記
- 散文讀書筆記筆記