建站
咨詢
售后
建站咨詢
新聞中心
本文是Web前端性能優(yōu)化系列文章中的第七篇，主要講述內(nèi)容：精簡(jiǎn)Javascript代碼，以及移出重復(fù)腳本。完整教程可查看：Web前端性能優(yōu)化
一、精簡(jiǎn)javascript
基礎(chǔ)知識(shí)
精簡(jiǎn)：從javascript代碼中移除所有的注釋以及不必要的空白字符(空格，換行和制表符)，減少javascript文件的大小。
混淆：和精簡(jiǎn)一樣，會(huì)從javascript代碼中移除注釋和空白，另外也會(huì)改寫代碼。作為改寫的一部分，函數(shù)和變量的名字將被轉(zhuǎn)換為更短的字符串，所以進(jìn)一步減少了javascript文件的大小。
混淆的缺點(diǎn)
1. 缺陷：混淆過程本身很有可能引入錯(cuò)誤。
2. 維護(hù)：由于混淆會(huì)改變javascript符號(hào)，因此需要對(duì)任何不能改變的符號(hào)進(jìn)行標(biāo)記，防止混淆器修改它們。
3. 調(diào)試：經(jīng)過混淆的代碼很難閱讀，這使得在產(chǎn)品環(huán)境中更加難以調(diào)試。
相對(duì)而言，精簡(jiǎn)出錯(cuò)的概率會(huì)少很多。
一個(gè)精簡(jiǎn)和混淆的示例
這個(gè)示例將使用JSMin進(jìn)行精簡(jiǎn)，使用yuicompressor進(jìn)行混淆。原始js如下：
//anthor:teroy/*
This is for test.
*/
function show(name, day) {
alert(name);
alert(day);
}
function test(name, day) {
var variable = name;
show(name, day);
}
JSMin精簡(jiǎn)后的代碼：
function show(name,day){alert(name);alert(day);}
function test(name,day){var variable=name;show(name,day);}
yuicompressor混淆后的代碼：
function show(b,a){alert(b);alert(a)}function test(c,a){var b=c;show(c,a)};
可見，混淆更能減少js代碼的大小。
對(duì)精簡(jiǎn)和混淆進(jìn)行抉擇
我們知道啟用gzip壓縮能減少組件的傳送大小，壓縮后精簡(jiǎn)和混淆的差別會(huì)進(jìn)一步減少，綜合考慮混淆可能帶來(lái)的額外的風(fēng)險(xiǎn)，所以優(yōu)先考慮使用精簡(jiǎn)。不過，如果對(duì)于性能的***追求，可以使用混淆，但要做足測(cè)試，確保混淆不會(huì)帶來(lái)其他的問題。
JQuery作為非常流行的前端框架，除了有開發(fā)版外，也提供了一個(gè)min版本，供實(shí)際部署web使用，這個(gè)min版本就使用了混淆，***化地減少代碼總量。
二、移除重復(fù)腳本
出現(xiàn)重復(fù)腳本的原因
導(dǎo)致一個(gè)腳本的重復(fù)又兩個(gè)主要因素：團(tuán)隊(duì)大小和腳本數(shù)量。開發(fā)一個(gè)網(wǎng)站需要極大數(shù)量的資源，不同的團(tuán)隊(duì)需要構(gòu)建一個(gè)大型web的不同部分，當(dāng)團(tuán)隊(duì)整合和溝通工作沒有做足，則容易出現(xiàn)重復(fù)腳本的情況。當(dāng)然腳本數(shù)量也是重要的一環(huán)，腳本數(shù)量越多越容易出現(xiàn)重復(fù)腳本的情況。
重復(fù)腳本如何損傷性能
在沒有緩存的情況下，如果在html中重復(fù)鏈接了相同的腳本，IE7以下(包括IE7)將會(huì)產(chǎn)生兩次HTTP請(qǐng)求，IE8以上則不會(huì)。
除了產(chǎn)生不必要的HTTP請(qǐng)求外，對(duì)腳本進(jìn)行重復(fù)執(zhí)行也會(huì)浪費(fèi)時(shí)間，腳本的重復(fù)執(zhí)行在瀏覽器中都存在。
如何避免重復(fù)腳本
1. 形成良好的腳本組織。重復(fù)腳本有可能出現(xiàn)在不同的腳本包含同一段腳本的情況，有些是必要的，但有些卻不是必要的，所以需要對(duì)腳本進(jìn)行一個(gè)良好的組織。
2. 實(shí)現(xiàn)腳本管理器函數(shù)。
【編輯推薦】
- 如何成為一名優(yōu)秀的web前端工程師
- Web前端性能優(yōu)化進(jìn)階路
- Web前端開發(fā)中的Touch事件
- Web前端框架與類庫(kù)的思考
- Web前端開發(fā)與iOS終端開發(fā)的異同
- 在IT企業(yè)激烈競(jìng)爭(zhēng)下 WEB前端頁(yè)面如何提速
分享題目：Web前端性能優(yōu)化教程：精簡(jiǎn)JS 移除重復(fù)腳本
鏈接地址：http://fisionsoft.com.cn/article/djegghh.html
