如何優化自己的JavaScript程式碼

大家寫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

動態建立

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1415851
• 
  php入門教程之一週學會PHP

  4255118
• 
  JAVA 初級入門影片教學

  2466323
• 
  小甲魚零基礎入門學習Python影片教學

  502925
• 
  PHP 零基礎入門教學

  843281

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1415851次學習
• 
  JAVA 初級入門影片教學

  2466323次學習
• 
  小甲魚零基礎入門學習Python影片教學

  502925次學習
• 
  Web前端開發極速入門

  215197次學習
• 
  零基礎精通 PS 影片教學

  874630次學習

• 
  【web前端】Node.js快速入門

  6219次學習
• 
  國外Web開發全端課程全集

  4850次學習
• 
  Go語言實戰之 GraphQL

  4080次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  605次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  20760次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板