前端開發工程師必備系列-寫出高性能JavaScript的10個技巧

你是站長還是前端開發工程師？想要創建更加快速的網站嗎？

我們一直都在講JavaScript，他是一個復雜而且神奇的語言。他可以豐富網站的內容，但是用戶體驗感出現問題又是因為他。所以說高性能的JavaScript可謂是非常重要。

下面我們分享提高 JavaScript 性能的10個技巧。這或許可以幫助你創建更加快速的網站，提供一流的用戶體驗。

技巧1 – 評估局部變量

主要針對IE而言，由于局部變量的查找是從最特定作用域到最大作用域，且可以通過多個域層級，所以這種查找會導致查詢到通用的結果。在定義函數作用域的時候，如果一個局部變量在之前沒有進行過var變量聲明， 那么此處一定要在變量名前加上var關鍵字以定義其當前的作用域和防止查詢，從而提高代碼的速度。

技巧2 – 創建代碼快捷方式以加速編碼

對于使用頻繁的有用代碼，可以通過為較長的代碼創建快捷方式來加快編碼過程，例如 document.getElementById。 通過創建一個快捷方式，編寫較長的腳本便不會耗時太久，并且可以節省整個過程的時間。

技巧3 – 在將元素片段添加到DOM之前對其實施操作

在創建 DOM 的元素節點之前，請確保已經執行了所有的操作，以提高 JavaScript 的性能。 這樣就無需再摒棄 Prepend和 Append 的 jQuery APIs 了

技巧4 – 使用Minification保存字節

通過刪除字符(標簽，源代碼文檔，空格等)而不改變文件功能的方式減小 JavaScript 文檔。

有許多縮小工具可以用來完成這個過程，并且還可以將縮小復原。 縮小是從源代碼中刪除所有不必要的字符而不改變其功能的過程。

技巧5 – 除非必要，否則不要使用嵌套循環

減少不必要的循環，例如 for 和 while 循環，以保持 JavaScript 的線性，并避免需要遍歷數千個對象。無用的循環可能會導致瀏覽器處理代碼時更困難，從而減緩速度。

技巧6 – 緩存對象以提高性能

很多時候，會重復使用腳本來訪問某個對象。 將重復訪問的對象存儲在用戶定義的變量中，并且之后在引用該對象時使用此變量，可以立刻實現性能提升。

技巧7 – 使用.js文件來緩存腳本

使用這種技術可以實現性能提升，因為它允許瀏覽器只加載腳本一次，當頁面被重新加載或重新訪問時只需要從緩存中調用腳本即可。

技巧8 – 將JavaScript放置到頁面的底部

將腳本盡可能放在頁面底部的位置會加快渲染進度，同時也會增加下載并行度。 其結果是頁面看起來加載得更快了，并且在某些情況下，它也可以減少所需要的總的代碼量。

技巧9 – 使用jQuery作為框架

jQuery 用于 HTML 腳本編程，是一個易于使用的 JavaScript 庫，可以幫助任何網站實現加速。 jQuery 提供了大量可以快速使用的插件，即使是新手程序員也不成問題。

技巧10 – 使用Gzip壓縮文件

使用 GZip 可以明顯地降低 JavaScript 文件的大小，節省帶寬，并加快響應時間。 有時 JavaScript 文件非常大，如果沒有經過壓縮，它可能會造成網站癱瘓。較小的文件能提供更快、更令人滿意的網頁體驗。

微信公眾號：?qdkfmiji