javascript
OneAPM大讲堂 | 提高JavaScript性能的30个技巧
文章系國內(nèi)領(lǐng)先的?ITOM?管理平臺(tái)供應(yīng)商?OneAPM?編譯呈現(xiàn)。
您是網(wǎng)站管理員還是網(wǎng)頁開發(fā)人員?想創(chuàng)建超快速的網(wǎng)站嗎?
今天我們來看看?JavaScript，這項(xiàng)神奇而又復(fù)雜的技術(shù)。它使網(wǎng)站內(nèi)容更加豐富，但常常出現(xiàn)的運(yùn)行性能問題又降低了用戶的體驗(yàn)。事實(shí)已經(jīng)證明，最佳的終端用戶體驗(yàn)?zāi)芴嵘W(wǎng)站的轉(zhuǎn)換率、Google搜索排名以及訪問者的滿意度。高性能的JavaScript意味著會(huì)給您和您的公司帶來更多更好的業(yè)務(wù)。
下面我們介紹提高 JavaScript 性能的一些技巧。同樣地，這或許可以幫助網(wǎng)站管理員和網(wǎng)站開發(fā)人員創(chuàng)建快速的網(wǎng)站，并提供一流的用戶體驗(yàn)。
技巧 #1 – 評(píng)估局部變量
(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)
主要針對(duì)IE而言，由于局部變量的查找是從最特定作用域到最大作用域，且可以通過多個(gè)域?qū)蛹?jí)，所以這種查找會(huì)導(dǎo)致查詢到通用的結(jié)果。在定義函數(shù)作用域的時(shí)候，如果一個(gè)局部變量在之前沒有進(jìn)行過var變量聲明， 那么此處一定要在變量名前加上var關(guān)鍵字以定義其當(dāng)前的作用域和防止查詢，從而提高代碼的速度。
技巧 #2 – 創(chuàng)建代碼快捷方式以加速編碼
對(duì)于使用頻繁的有用代碼，可以通過為較長的代碼創(chuàng)建快捷方式來加快編碼過程，例如 document.getElementById。 通過創(chuàng)建一個(gè)快捷方式，編寫較長的腳本便不會(huì)耗時(shí)太久，并且可以節(jié)省整個(gè)過程的時(shí)間。
技巧 #3 – 在將元素片段添加到DOM之前對(duì)其實(shí)施操作
(http://www.jquery4u.com/dom-modification/improve-javascript-performance)
在創(chuàng)建 DOM 的元素節(jié)點(diǎn)之前，請(qǐng)確保已經(jīng)執(zhí)行了所有的操作，以提高 JavaScript 的性能。 這樣就無需再摒棄 Prepend和 Append 的 jQuery APIs 了。
技巧 #4 – 使用Minification保存字節(jié)
(http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance)
通過刪除字符(標(biāo)簽，源代碼文檔，空格等)而不改變文件功能的方式減小 JavaScript 文檔。
有許多縮小工具可以用來完成這個(gè)過程，并且還可以將縮小復(fù)原。 縮小是從源代碼中刪除所有不必要的字符而不改變其功能的過程。
技巧 #5 – 除非必要，否則不要使用嵌套循環(huán)
減少不必要的循環(huán)，例如 for 和 while 循環(huán)，以保持 JavaScript 的線性，并避免需要遍歷數(shù)千個(gè)對(duì)象。無用的循環(huán)可能會(huì)導(dǎo)致瀏覽器處理代碼時(shí)更困難，從而減緩速度。
技巧 #6 – 緩存對(duì)象以提高性能
很多時(shí)候，會(huì)重復(fù)使用腳本來訪問某個(gè)對(duì)象。 將重復(fù)訪問的對(duì)象存儲(chǔ)在用戶定義的變量中，并且之后在引用該對(duì)象時(shí)使用此變量，可以立刻實(shí)現(xiàn)性能提升。
技巧 #7 – 使用.js文件來緩存腳本
(http://www.javascriptkit.com/javatutors/efficientjs.shtml)
使用這種技術(shù)可以實(shí)現(xiàn)性能提升，因?yàn)樗试S瀏覽器只加載腳本一次，當(dāng)頁面被重新加載或重新訪問時(shí)只需要從緩存中調(diào)用腳本即可。
技巧 #8 – 將JavaScript放置到頁面的底部
將腳本盡可能放在頁面底部的位置會(huì)加快渲染進(jìn)度，同時(shí)也會(huì)增加下載并行度。 其結(jié)果是頁面看起來加載得更快了，并且在某些情況下，它也可以減少所需要的總的代碼量。
技巧 #9 – 使用jQuery作為框架
jQuery 用于 HTML 腳本編程，是一個(gè)易于使用的 JavaScript 庫，可以幫助任何網(wǎng)站實(shí)現(xiàn)加速。 jQuery 提供了大量可以快速使用的插件，即使是新手程序員也不成問題。
技巧 #10 – 使用Gzip壓縮文件
(http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website)
使用 GZip 可以明顯地降低 JavaScript 文件的大小，節(jié)省帶寬，并加快響應(yīng)時(shí)間。 有時(shí) JavaScript 文件非常大，如果沒有經(jīng)過壓縮，它可能會(huì)造成網(wǎng)站癱瘓。較小的文件能提供更快、更令人滿意的網(wǎng)頁體驗(yàn)。
技巧 #11 – 不要使用With關(guān)鍵字
(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)
“With”這個(gè)關(guān)鍵詞被認(rèn)為是害群之馬，因?yàn)樗旧泶嬖谝恍┳屓吮陡芯趩实娜毕荨ｋm然有了它使用局部屬性的過程會(huì)變得更加簡單，但當(dāng)在其他作用域中查找變量時(shí)，使用With會(huì)增大代價(jià)。
技巧 #12 – 盡量減少對(duì)HTTP的請(qǐng)求
(http://www.websiteoptimization.com/speed/tweak/http)
通過結(jié)合外部文件和直接在 XHTML 頁面中嵌入 JavaScript 來盡量減少對(duì) HTTP 返回頁面的請(qǐng)求。 每一個(gè)特定的 HTTP 請(qǐng)求傳輸至服務(wù)器端都會(huì)導(dǎo)致大量的時(shí)延。
技巧 #13 – 實(shí)現(xiàn)事件代理
使用事件代理將會(huì)使利用單個(gè)事件處理程序來為整個(gè)頁面管理某種事件類型變得更加容易。 如果不使用事件代理，大型的 Web 應(yīng)用程序可能會(huì)由于過多的事件處理程序而停止工作。 實(shí)現(xiàn)事件代理的好處包括： 需要管理的功能更少，代碼和 DOM 之間的聯(lián)系更少，進(jìn)程所需的內(nèi)存更少。
技巧 #14 – 不要重復(fù)使用相同的腳本
(http://www.abhishekbharadwaj.com/2010/12/speed-up-your-website-avoid-duplicate-scripts)
重復(fù)的腳本對(duì)性能會(huì)造成顯著的影響。重復(fù)的腳本會(huì)創(chuàng)建不需要的HTTP請(qǐng)求，尤其是在IE瀏覽器中。在HTML頁面中使用腳本標(biāo)簽，可以幫助避免意外地生成重復(fù)的腳本。
技巧 #15 – 移除雙美元符號(hào)$$
(http://www.mellowmorning.com/2008/05/18/javascript-optimization-high-performance-js-apps)
當(dāng)考慮提升網(wǎng)站的速度時(shí)，使用雙美元符號(hào)$$并不是必要的選擇。
技巧 #16 – 創(chuàng)建變量引用
(http://mondaybynoon.com/2009/04/27/a-couple-of-quick-tips-for-javascript-optimization)
當(dāng)需要重復(fù)使用某個(gè)節(jié)點(diǎn)時(shí)，最好為該節(jié)點(diǎn)定義一個(gè)變量，使用節(jié)點(diǎn)時(shí)對(duì)變量進(jìn)行引用，而不是反復(fù)來回操作。針對(duì)少量這樣的節(jié)點(diǎn)，也許這并不能顯著地提升性能，但是在節(jié)點(diǎn)數(shù)量很大時(shí)，這種方法就可以帶來明顯的影響。
技巧 #17 – 提高Object Detection的速度
(http://dean.edwards.name/weblog/2005/12/js-tip1)
一種更有效的使用 Object Detection 的方法是使用基于對(duì)象檢測(cè)而動(dòng)態(tài)創(chuàng)建的代碼，而不是在函數(shù)內(nèi)部去執(zhí)行對(duì)象檢測(cè)。
技巧 #18 – 編寫有效的循環(huán)
(http://robertnyman.com/2008/04/11/javascript-loop-performance)
根據(jù)瀏覽器的不同，不同的循環(huán)實(shí)現(xiàn)方法也會(huì)對(duì)網(wǎng)站的性能產(chǎn)生很大的影響。 編寫不正確的循環(huán)可能會(huì)降低那些具有大訪問量的頁面的響應(yīng)速度，或者導(dǎo)致同時(shí)運(yùn)行多個(gè)循環(huán)。
技巧 #19 – 縮短作用域鏈
全局作用域通常較慢，因?yàn)槊看螆?zhí)行函數(shù)的時(shí)候，它會(huì)引發(fā)創(chuàng)建一個(gè)臨時(shí)的調(diào)用作用域，JavaScript 會(huì)在作用域鏈中搜索第一個(gè)對(duì)象，如果找不到該變量，則會(huì)遍歷鏈直到搜索到全局對(duì)象。
技巧 #20 – 對(duì)NodeLists直接索引
NodeLists 是動(dòng)態(tài)的，會(huì)占用大量的內(nèi)存，因?yàn)楫?dāng)?shù)讓拥奈臋n對(duì)象更改時(shí)它們也會(huì)被更新。 直接對(duì)列表進(jìn)行索引會(huì)速度更快，因?yàn)榇藭r(shí)瀏覽器不需要?jiǎng)?chuàng)建節(jié)點(diǎn)列表對(duì)象。
技巧 #21 – 不要使用‘eval’
雖然“eval”函數(shù)是運(yùn)行任何代碼的好方法，但是在實(shí)際運(yùn)行時(shí)，傳遞給 eval 函數(shù)的每個(gè)字符串都需要進(jìn)行解析和執(zhí)行。 每次調(diào)用eval函數(shù)的時(shí)候，都會(huì)引入這些時(shí)間開銷。
技巧 #22 – 使用函數(shù)內(nèi)聯(lián)
(https://dl.acm.org/citation.cfm?id=844097)
函數(shù)內(nèi)聯(lián)有助于減少函數(shù)調(diào)用的成本，并用被調(diào)用的函數(shù)體替換函數(shù)調(diào)用。 在 JavaScript 中執(zhí)行函數(shù)調(diào)用是一個(gè)高成本的操作，因?yàn)樾枰獔?zhí)行幾個(gè)準(zhǔn)備步驟：為參數(shù)分配空間，復(fù)制參數(shù)以及解析函數(shù)名稱。
技巧 #23 – 實(shí)現(xiàn) Common Sub-expression Elimination (CSE)
(http://sunilkumarn.wordpress.com/2010/10/19/common-subexpression-elimination-cse)
Common Sub-expression Elimination (CSE)是一種以性能為目標(biāo)的編譯器優(yōu)化技術(shù)，用于搜索相同的表達(dá)式對(duì)象，并用保存著計(jì)算值的單個(gè)變量替換它們。可以認(rèn)為，對(duì)通用子表達(dá)式使用單個(gè)的局部變量總是比保持代碼不變具有更快的速度。
技巧 #24 – 離線構(gòu)建DOM節(jié)點(diǎn)以及所有子節(jié)點(diǎn)
當(dāng)向站點(diǎn)添加復(fù)雜的內(nèi)容(例如表格)時(shí)，通過離線的方式添加復(fù)雜的子樹可以提升性能。
技巧 #25 – 盡量不要使用全局變量
由于腳本引擎需要搜索作用域，所以當(dāng)從函數(shù)內(nèi)部或其他作用域內(nèi)引用全局變量時(shí)，如果局部作用域丟失，全局變量將被銷毀。如果全局作用域中的變量并不一直存在于腳本的生命周期，則可以提升性能。
技巧 #26 – 使用原始的函數(shù)操作而不使用函數(shù)調(diào)用
通過使用等效的原函數(shù)而非函數(shù)調(diào)用，可以在對(duì)性能有關(guān)鍵影響的循環(huán)和函數(shù)中實(shí)現(xiàn)速度提升。
技巧 #27 – 不要一直保留對(duì)其他文檔的引用
(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)
當(dāng)腳本結(jié)束后不再保留對(duì)其他文檔的引用可以實(shí)現(xiàn)更快的性能。因?yàn)閷?duì)其他文檔中的對(duì)象進(jìn)行的任何引用不會(huì)被保存在整個(gè) DOM 樹中，并且腳本環(huán)境也不會(huì)一直保留在內(nèi)存中。 因此文檔本身不用再被加載。
技巧 #28 – 使用XMLHttpRequest
(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)
XMLHttpRequest 有助于減少來自服務(wù)器端的內(nèi)容數(shù)量，并且避免在頁面加載的間隙銷毀和重新創(chuàng)建腳本環(huán)境對(duì)性能造成的影響。一定要確保支持 XMLHttpRequest，否則可能會(huì)導(dǎo)致問題和混淆。
技巧 #29 – 避免使用try-catch-finally結(jié)構(gòu)
(http://dev.opera.com/articles/view/efficient-javascript/?page=2)
每當(dāng)執(zhí)行 catch 子句時(shí)，捕獲的異常對(duì)象被分配給一個(gè)變量，“try-catch-finally”會(huì)在運(yùn)行時(shí)在當(dāng)前作用域中創(chuàng)建一個(gè)新變量。 許多瀏覽器不能有效地處理這個(gè)過程，因?yàn)樽兞渴窃谶\(yùn)行時(shí)被創(chuàng)建和銷毀的。避免使用它!
技巧 #30 – 不要誤用 for-in
(http://dev.opera.com/articles/view/efficient-javascript/?page=2)
由于“for-in”循環(huán)需要腳本引擎構(gòu)建包含所有可枚舉屬性的列表，因此 for 循環(huán)內(nèi)的代碼是不會(huì)修改這個(gè)列表的。 在 for 循環(huán)內(nèi)部，預(yù)先計(jì)算出列表的長度并賦給變量 len，然后進(jìn)行迭代。
后續(xù)我們還會(huì)發(fā)布有關(guān)性能管理的系列帖子...敬請(qǐng)關(guān)注!
Browser Insight?是一個(gè)基于真實(shí)用戶的 Web?前端性能監(jiān)控平臺(tái)，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想技術(shù)文章，請(qǐng)?jiān)L問?OneAPM 官方技術(shù)博客。
來源：http://blog.oneapm.com/apm-tech/802.html
轉(zhuǎn)載于:https://www.cnblogs.com/oneapm/p/8306646.html
總結(jié)
以上是生活随笔為你收集整理的OneAPM大讲堂 | 提高JavaScript性能的30个技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jenkins+Gradle+Git+P
- 下一篇： JS高级——沙箱