首頁 > web前端 > js教程 > 如何優化自己的JavaScript程式碼

如何優化自己的JavaScript程式碼

php中世界最好的语言
發布: 2017-11-18 15:37:07
原創
1901 人瀏覽過

大家寫JS的都知道,同一種效果有很多種寫法,結果可以相同但是步奏卻不同的列子比比皆是,但是雖然效果你是寫出來了,但是頁面的性能卻大大降低,現在的開發,腳本效能的提升變得越來越重要。怎樣優化自己的JavaScript程式碼?兩個點之間的直線到底要怎麼畫才最短?今天就來跟大家總結歸納一下,如何最優化的寫出自己的JavaScript程式碼。

傳統的 Web 頁面不會包含很多腳本,至少不會太影響 Web 頁面的效能。然而,Web 頁面變得越來越像應用程序,腳本對其的影響也越來越大。隨著越來越多的應用程式採用 Web 技術開發,腳本效能的提升變得越來越重要。桌面應用程式通常是用編譯器將原始碼轉換為最終的二進位。編譯器在產生最終的應用程式時,可以花費時間,盡可能地對效能進行最佳化。 Web 應用程式就不能這麼奢侈了。因為它們需要在多種瀏覽器、平台和架構上運行,所以不能完全預先編譯它們。瀏覽器會每次取到一個腳本並對其進行解釋和編譯,然而最終應用程式卻要像桌面應用程式一樣迅速載入、運行流暢。它被期望運行於大量各種各樣的設備,從普通的桌上型電腦到手機都包含在內。


瀏覽器相當擅長實現這個目標,而 Opera 擁有目前瀏覽器中最快的腳本引擎之一。不過瀏覽器也有一些限制,這正是 Web 開發者需要關注的。要確保 Web 應用程式能運行得盡可能的快,這可能只是一個簡單循環交換,改變一個合併的樣式而不是三個,或者只添加確實會運行到的腳本。


本文會展示一些能提升 Web 應用效能的改變,其範圍涉及 ECMAScript - JavaScript 的核心語言、DOM 和檔案載入。

小貼士

ECMAScript

#避免使用eval 或Function 建構器

改寫eval

如果你需要函數,使用function

不要使用with

不要在要求效能的函數中使用try-catch-finally

隔離eval 和with 的使用

盡量不用全域變量

注意物件的隱式換

在要求效能的函數中避免使用for-in

使用累加形式連接字串

基本運算比呼叫函數更快

為setTimeout() 和setInterval() 傳入函數而不是字串

#DOM

重繪和重排

將重排數量降到最低

最小重排

修改文件樹

修改不可見的元素

測量

一次改變多項樣式

平滑度換速度

避免擷取大量節點

透過XPath 提升速度

避免在遍歷DOM 的時候進行修改

在腳本中以變數快取DOM 的值

文件載入

避免在多個文件間保持同一個參考

快速歷史導覽

使用XMLHttpRequest

動態建立

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板