JS 網(wǎng)站性能優(yōu)化筆記
1. 除去JavaScript注釋
除了注釋,其他所有的 // or /* */ 注釋都可以安全刪除,因?yàn)樗鼈儗?duì)于最終使用者來說沒有任何意義。
2. 除去JavaScript中的空白區(qū)域
如:x = x + 1; 可以簡(jiǎn)短得寫成:x=x+1; 。
3. 進(jìn)行代碼優(yōu)化
簡(jiǎn)單的方法如除去暗示的(implied)分號(hào),某些情形下的變量聲明或者空回車語句都可以進(jìn)一步減少腳本代碼。一些簡(jiǎn)略的表達(dá)方式也會(huì)產(chǎn)生很好的優(yōu)化,例如:
x=x+1;
可以寫成:
x++;
不過得小心謹(jǐn)慎,不然代碼很容易出錯(cuò)。
4. 重命名用戶自定義的變量和函數(shù)
為了閱讀方便,我們都知道在腳本中應(yīng)該使用象sumTotal
這樣的變量而不是s
。不過,考慮到下載的速度,sumTotal
這個(gè)變量就顯得冗長(zhǎng)了。這個(gè)長(zhǎng)度對(duì)于最終使用者來說沒有意義,但對(duì)瀏覽器下載則是個(gè)負(fù)擔(dān)。這個(gè)時(shí)候s
就成為較好的選擇了。先寫好方便閱讀的代碼,然后再使用一些工具來處理以供交付。這種處理方式在這里再一次展示了其價(jià)值所在。將所有的名稱都重新用一個(gè)或兩個(gè)字母來命名將帶來顯著的改善。
5. 改寫內(nèi)建(built-in)對(duì)象
長(zhǎng)長(zhǎng)用戶變量名會(huì)造成JavaScript代碼過長(zhǎng),除此之外,內(nèi)建(built-in)對(duì)象(比如Window、Document、Navigator等)也是原因之一。例如:
alert(window.navigator.appName);
alert(window.navigator.appVersion);
alert(window.navigator.userAgent);
可以改寫成如下簡(jiǎn)短的代碼:
w=window;n=w.navigator;a=alert;
a(n.appName);
a(n.appVersion);
a(n.userAgent);
如果這幾個(gè)對(duì)象使用頻繁的話,這樣改寫帶來的好處就不言而喻了。事實(shí)上這些對(duì)象也的確經(jīng)常被調(diào)用。然而我要提醒的是,如果Window或 Navigator對(duì)象僅僅被使用了一次的話,這樣的替換反而使代碼變得更長(zhǎng)。這個(gè)技巧帶來一個(gè)對(duì)象更名后腳本執(zhí)行效率的問題:除了代碼長(zhǎng)短上帶來的好處,這種改寫更名實(shí)際上還會(huì)稍微的提高一點(diǎn)腳本執(zhí)行的速度,因?yàn)檫@些對(duì)象將會(huì)被放在所有被調(diào)用對(duì)象中比較靠前的位置。JavaScript游戲開發(fā)程序員使用這個(gè)技巧已經(jīng)有多年了,下載和執(zhí)行速度都會(huì)有所提高,并且對(duì)本地瀏覽器的內(nèi)存花銷也會(huì)降低,可謂一石三鳥。
6. 重構(gòu)<script>和<style> 調(diào)用方式來優(yōu)化請(qǐng)求次數(shù)
我們常常在一個(gè)HTML文件頭中看到這樣標(biāo)記代碼:
<script src="/scripts/rollovers.js"></script>
<script src="/scripts/validation.js"></script>
<script src="/scripts/tracking.js"></script>
大多數(shù)情況下,上述代碼應(yīng)該被簡(jiǎn)化成:
<script src="/0/g.js"></script>
其中g(shù).js包含了所有供全局使用的函數(shù)。雖然把腳本文件分成三份對(duì)于維護(hù)來說是有道理的,但對(duì)于代碼的傳輸則沒有意義。單個(gè)的腳本下載要比三個(gè)分離的請(qǐng)求高效的多,并且這也同時(shí)簡(jiǎn)化了markup代碼的長(zhǎng)度。
7. 合并你的javascript文件
盡可能的減少HTTP的Request請(qǐng)求數(shù)。
8. 將腳本放到網(wǎng)頁(yè)底部
腳本一般是用來于用戶交互的。所以如果頁(yè)面還沒有出來,用戶連頁(yè)面都不知道什么樣子,那談交互簡(jiǎn)直就是扯談。所以,腳本和CSS正好相反,腳本應(yīng)該放在頁(yè)面的底部。
- Javascript前端優(yōu)化代碼
- 通過循環(huán)優(yōu)化 JavaScript 程序
- js尾調(diào)用優(yōu)化的實(shí)現(xiàn)
- 淺析JavaScript異步代碼優(yōu)化
- JavaScript關(guān)于提高網(wǎng)站性能的幾點(diǎn)建議(一)
- JavaScript提高網(wǎng)站性能優(yōu)化的建議(二)
- 網(wǎng)站性能提高實(shí)戰(zhàn)經(jīng)驗(yàn)點(diǎn)滴記錄
- 詳解網(wǎng)站中圖片日常使用以及優(yōu)化手法
- 利用javascript解決圖片縮放及其優(yōu)化的代碼
- 圖片該如何優(yōu)化來提高網(wǎng)站性能
- CSS 網(wǎng)站性能優(yōu)化筆記
相關(guān)文章
php實(shí)現(xiàn)在多維數(shù)組中查找特定value的方法
這篇文章主要介紹了php實(shí)現(xiàn)在多維數(shù)組中查找特定value的方法,實(shí)例分析了php實(shí)現(xiàn)多維數(shù)組的遍歷及unset刪除的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07解析如何修改phpmyadmin中的默認(rèn)登陸超時(shí)時(shí)間
本篇文章是對(duì)修改phpmyadmin中的默認(rèn)登陸超時(shí)時(shí)間的解決方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06PHP+Oracle本地開發(fā)環(huán)境搭建方法詳解
在本篇文章中小編給大家分享了關(guān)于PHP+Oracle本地開發(fā)環(huán)境搭建的步驟和技巧,需要的朋友們學(xué)習(xí)下。2019-04-04PHP使用數(shù)組實(shí)現(xiàn)矩陣數(shù)學(xué)運(yùn)算的方法示例
這篇文章主要介紹了PHP使用數(shù)組實(shí)現(xiàn)矩陣數(shù)學(xué)運(yùn)算的方法,結(jié)合具體實(shí)例形式分析了php基于數(shù)組實(shí)現(xiàn)矩陣表示與運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05初步介紹PHP擴(kuò)展開發(fā)經(jīng)驗(yàn)分享
在PHP開發(fā)的過程中,有時(shí)候?yàn)榱颂岣咝阅埽枰x擇擴(kuò)展的方式去實(shí)現(xiàn),本文簡(jiǎn)單介紹怎么開發(fā)一個(gè)簡(jiǎn)單的PHP擴(kuò)展,解開PHP擴(kuò)展開發(fā)的神秘面紗2012-09-09