本文是對(duì)于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. 缺陷混淆過(guò)程本身很有可能引入錯(cuò)誤。 2. 維護(hù)由于混淆會(huì)改變javascript符號(hào),因此需要對(duì)任何不能改變的符號(hào)進(jìn)行標(biāo)記,防止混淆器修改它們。 3. 調(diào)試經(jīng)過(guò)混淆的代碼很難閱讀,這使得在產(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)。不過(guò),如果對(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ù)鏈接了相同的腳本,廣州北大青鳥Java是一個(gè)廣泛使用的網(wǎng)絡(luò)編程語(yǔ)言,它是一種新的計(jì)算概念。首先,作為一種程序設(shè)計(jì)語(yǔ)言,它簡(jiǎn)單、面向?qū)ο、不依賴于機(jī)器的結(jié)構(gòu)、具有可移植性、魯棒性、安全性、并且提供了并發(fā)的機(jī)制、具有很高的性能。其次,它最大限度地利用了網(wǎng)絡(luò),Java的小應(yīng)用程序(applet)可在網(wǎng)絡(luò)上傳輸而不受CPU和環(huán)境的限制。另外,Java還提供了豐富的類庫(kù),使程序設(shè)計(jì)者可以很方便地建立自己的系統(tǒng)。,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ù)。 |