讀書筆記–高效能網站建站指南(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,如需轉載請自行聯絡原作者
相關文章
- 《高效能JavaScript》讀書筆記JavaScript筆記
- 讀書筆記【JS 權威指南】14.1 計時器筆記JS
- js高程讀書筆記JS筆記
- 讀書筆記-大型網站技術架構筆記網站架構
- 讀書筆記【JS 權威指南】14.2 瀏覽器定位和導航筆記JS瀏覽器
- 程式設計師生存指南讀書筆記-第三篇(學習)程式設計師筆記
- 高效能JavaScript 重排與重繪 讀書筆記JavaScript筆記
- 【前端效能優化】高效能JavaScript讀書筆記前端優化JavaScript筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第3篇 案例網站架構筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第1篇 概述網站架構筆記
- 程式設計師生存指南讀書筆記-第四篇(生產力)程式設計師筆記
- 《802.11無線網路權威指南-網路概論》-- 讀書筆記2筆記
- 《高效能JavaScript》讀書筆記①載入和執行JavaScript筆記
- 《Haskell趣學指南》讀書筆記(2):Type And TypeclassHaskell筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第2篇 架構網站架構筆記
- 《大型網站系統與Java中介軟體》讀書筆記(上)網站Java筆記
- 讀書筆記2-記憶體優化篇筆記記憶體優化
- 讀書筆記筆記
- 《讀書與做人》讀書筆記筆記
- 讀書筆記3-卡頓優化篇筆記優化
- 讀書筆記5-資料儲存篇筆記
- 《高效能javascript》讀書筆記-第二章 資料存取JavaScript筆記
- webpackDemo讀書筆記Web筆記
- Vue讀書筆記Vue筆記
- 散文讀書筆記筆記
- Cucumber讀書筆記筆記
- HTTP 讀書筆記HTTP筆記
- postgres 讀書筆記筆記
- 讀書筆記2筆記
- 讀書筆記3筆記
- 《大型網站技術架構核心原理與案例分析》讀書筆記(二)網站架構筆記
- 《論語》讀書筆記筆記
- 《重構》讀書筆記筆記
- PMBook讀書筆記(一)筆記
- 筆記網站筆記網站
- 終、《圖解HTTP》讀書筆記 - 彙總篇(總結)圖解HTTP筆記
- 讀js純粹筆記JS筆記
- 《大型網站技術架構:核心原理與案例分析》讀書筆記 - 第4篇 架構師(附 大型網站架構技術一覽)網站架構筆記
- 高效能的Mysql讀書筆記系列之六(查詢效能優化)MySql筆記優化