ARTICLE

提升JavaScript效能的15大實用技巧

LATEST ARTICLE

提升JavaScript效能的15大實用技巧

提升JavaScript效能的15大實用技巧

學習異步程式設計

要取得數據,您的應用程式需要透過多個API進行幾次內部呼叫。解決這個問題的一種方式是為每個功能使用不同的仲介軟體。由於JavaScript是單執行緒,因此它具有許多同步組件。

這些組件能夠鎖定整個應用程式。然而,JavaScript的async.js功能有助於有效管理非同步程式碼。這使得非同步程式碼被推送到事件佇列中,在所有其他程式碼執行後才觸發。

然而,即使使用了JavaScript的async功能,仍有可能使用會導致同步阻塞呼叫的外部函式庫。這可能對整體效能產生負面影響。解決這個問題的最佳方法是始終在您的程式碼中使用非同步API。

但是,您應該時刻記住,理解異步編程的細節對於新手來說往往具有挑戰性。
優勢 劣勢
機會
  • 隨著web開發需求持續增長,javascript效能優化將更受重視
  • 利用這些技巧開發高效能程式,可大幅提升企業競爭力
  • 如能有效掌握並應用這些技巧,還有機會成為領域內行人
  • 提供專業javascript效能優化的技巧,增加開發者的編碼效率
  • 透過實用技巧,可以有效降低程式錯誤及bug產生
  • 讓開發者了解不同方式的效能影響,有助於未來撰寫更好的程式碼
威脅
  • 需要具備一定程度javascript基礎知識才能理解與應用
  • 如果沒有持續練習可能會忘記所學的技巧
  • 部分高級技巧可能無法在所有情況下使用或帶來顯著改善
  • 其他新興語言如typescript等也提供相關性能優化功能,可能分走一部分市場份額
  • 因為javascript更新迅速, 如果不跟上最新版本可能會使得某些方法變得無效或者過時
  • 程式碼的效能改善可能會被硬體的快速提升所掩蓋,降低優化的必要性
表: 強弱危機分析(最後更新: 2022-06-10)

定義局部變量

當你呼叫某個函數時,該函數所使用的變數會被儲存在內部。變數可以分為兩類:區域變量 - 只在自身內部定義的變量;全域變量 - 在整個腳本中都可使用的變量。當你呼叫函數時,瀏覽器會進行一個稱為作用域查找的活動。

隨著作用域鏈中作用域的增加,訪問超出當前作用域的變量所需的時間也會增加。這就是為什麼引擎訪問全域變量比訪問區域變量需要更長時間的原因。這意味著如果你大部分將變量定義為區域性,引擎搜索它們所需的時間將快速減少。

因此,這將提高應用程式的整體速度。

保持代碼輕便小巧

為了保持手機應用程式的高效能,重要的是讓程式碼盡可能輕巧和緊湊。將程式碼保持輕巧和小型可以減少延遲並提升速度。在開發階段,你必須問自己以下這些問題:我真的需要這個模塊嗎?我能以更簡單的方式做到這一點嗎?我為什麼使用這個框架?這值得額外付出嗎?另一種優化應用程式性能的方法是將各種JavaScript檔縮小並合併成一個文件。

例如,如果你的應用有七個JavaScript檔,則瀏覽器將需要發出七個不同的HTTP請求才能全部取回它們。為了避免這種情況,你可以將這七個檔轉換成一個流暢的文件。

實施事件委派

事件委派使得使用單一事件處理程式更加容易,進而有助於有效管理整個網頁上的某種類型的事件。如果沒有事件委派,大型網頁應用程式可能會因多個事件處理程式存在而停止運行。事件委派帶來許多好處,例如:需要較少的功能管理、需要更少的記憶體處理以及DOM和程式碼之間的關聯較少。


避免不必要的迴圈

在JavaScript中循環並不被視為一件好事,因為它會給瀏覽器增加額外的負擔。重要的是要注意,在循環中盡量少做工作。你在循環中做的工作越少,循環就會越快。

此外,還有一些簡單的技巧,其中之一是將陣列的長度存儲在另一個變數中,而不是在每次反覆運算時都讀取長度。這可以大大優化你的程式碼並以更高效的方式運行事物。

使用Gzip壓縮

Gzip 是一個軟體應用程式,被大多數的客戶端和伺服器用於壓縮和解壓縮。當一個支援 gzip 的瀏覽器請求資源時,伺服器會在將回應送到瀏覽器之前對其進行壓縮。Gzip 壓縮了大型的 JavaScript 檔案,節省了頻寬,從而減少延遲和時間差,提升應用程式整體性能。


最小化DOM存取

主機瀏覽器與位於JavaScript本地環境之外的物件(DOM)互動會導致顯著的性能延遲和不可預測性。這是因為瀏覽器每次都必須重新整理。要避免這種情況,你可以簡單地減少對DOM的存取。

有幾種方法可以實現這一點。例如,你可以存儲對瀏覽器物件的引用,或者減少整體的DOM遍歷次數。 譯文: 當主機瀏覽器與超出 JavaScript 本地環境範圍的 DOM 物件互動時,會產生相當大量的性能延遲和不可預測性。

這是因為瀏覽器需要每次重新整理。要避免這個問題,只需最小化對 DOM 的存取即可。有幾種方法可以實現此目標。

例如,你可以儲存對於瀏覽器物件的參考,或者減少整體 DOM 遍歷次數等方式來達成此目的。

透過快取物件提升效能

你可以用兩種方式來實現這個。第一種是使用HTTP協議緩存,而第二種是使用JavaScript緩存API,並且需要安裝service worker。通常情況下,腳本用於訪問特定的對象。

你可以通過在引用該對象時使用變量或者直接將重複訪問的對象存儲在自定義變量中來大幅提高性能。

指定執行上下文

要使用JavaScript開發網站,你必須定義一個環境來測試代碼的性能,從而有效地衡量計劃中要引入的任何明顯改進。由於可行性問題,不建議對所有版本的JavaScript引擎進行優化和測試。但這並不意味著你應該在單一環境下進行測試,因為那可能會得到部分結果。

因此,非常有必要定義幾個明確的環境來測試代碼是否在其中運作。

清除未使用的JavaScript

這個方法被稱為減少瀏覽器編譯代碼所需時間的方法。同時,它還能減少傳輸時間。要去除未使用的JavaScript,你必須考慮到幾個因素,例如檢測用戶不使用的功能。

這不僅可以讓網站加載更快,還能提供更好的用戶體驗。

避免使用過多記憶體

限制記憶體使用是一名 JavaScript 開發者必須具備的主要技能之一。這是因為當你的應用程式在設備上運行時,很難確定所需的記憶體量。如果代碼在任何時間點請求瀏覽器分配新的記憶體,則瀏覽器的垃圾回收程式將被執行並停止 JavaScript 的執行。

如果這種情況持續發生,將會降低頁面速度。

推遲JavaScript的非必要載入

顯然使用者希望網頁能夠快速載入。然而,並不是所有功能都需要在初始載入時就可用。如果使用者進行各種操作,例如點擊和切換分頁,那麼你可以將該功能的載入延遲到初始頁面完成載入之後。

這種方法可以避免載入和編譯JavaScript代碼,否則它將阻礙頁面的初始顯示。一旦頁面完成載入,你就可以開始加載所有那些在使用者開始互動後可用的功能。在RAIL模型中,Google建議以50毫秒的塊來延遲加載。

這樣可以避免使用者與頁面之間產生任何影響。 注意:此處的「你」指代讀者或程式開發人員

消除記憶體洩露

如果發生記憶體洩漏的情況,載入的網頁將會使用越來越多的記憶體,最終佔用設備上所有可用的記憶體。這將對整體性能產生負面影響。你可能對在含有圖片幻燈片的網頁上發生這種故障比較熟悉。

有一些工具可以分析你的網站是否存在記憶體洩漏問題。Chrome Dev Tools就是其中之一,它可以在性能選項卡中記錄時間軸。通常,從網頁中刪除的DOM元素碎片是造成記憶體洩漏問題的原因,因為它們包含了某些變量引用,阻止垃圾回收器消除它們。

【重點表達】 - 記憶體洩漏:memory leak - 佔用/使用更多記憶體:use up more memory - 整體性能:overall performance - 負面影響:adversely impact - 圖片幻燈片:image slide - 工具分析:tools that analyse - 記錄時間軸:record the timeline - DOM元素碎片:pieces of the removed DOM - 變量引用:variable reference - 垃圾回收器:garbage collector - 消除/清除它們:eliminate them

使用可偵測問題的工具

Lighthouse是一款廣泛用於網頁的工具。它有助於提升可訪問性、優化性能、改善SEO和其他最佳實踐。同樣地,Google PageSpeed旨在幫助JavaScript開發人員瞭解網站改進和性能優化的領域。

在Chrome的主選單中,有一個“更多工具”的選項,可以顯示每個標籤的記憶體和CPU使用情況。要進行更詳細的分析,可以在Chrome或Firefox中使用效能視圖。通過這種方式,您可以分析各種指標,例如:Devtools的效能分析功能使您能夠模擬網絡、CPU消耗等指標在頁面加載時的情況。

由於如此,您可以無縫地識別和修復問題。要深入探索更多內容,您必須使用導航定時API(Navigation Timing API),該API使您能夠測量並確定代碼本身所花費的時間部分。NodeSource平臺非常適合探索基於Node.js開發的所有應用程式的細細微性性能。

此外,全面的Node.js指標還可以幫助您識別內存洩漏和其他性能相關問題的來源。
相關數據:
  • 根據stack overflow 2020年度開發者調查報告,javascript在所有被調查的語言中使用率最高,達到69.7% 來源: stack overflow
  • 由slashdata於2019年第四季的報告中指出,全球有約1200萬名開發人員正在使用javascript。 來源: slashdata
  • 在2018年jetbrains的開發者生態系統調查中,將近47%的受訪者表示他們主要是用javascript來進行前端開發。 來源: jetbrains
  • 在hackerrank 2020 年程式技術趨勢報告中顯示,當問及未來學習新技能時,31.4% 的開發人員會選擇 javascript。 來源: hackerrank
  • 根據indeed.com提供的數據, 在美國所有的工作職缺需求中, 約佔20%需要具備javascript相關技能。 來源: indeed.com

實施各種優化

為了以最佳的資料結構解決所有任務,你必須始終使用具有最少計算複雜度的演算法。透過重寫演算法來以更少計算獲得相同結果。避免遞迴呼叫,在所有重複函數中加入計算、呼叫和變數。

簡化數學公式。使用搜尋陣列來根據其他值而不是case語句或switch取得值。利用處理器的推測執行,創建可能為真的條件。

留言

文章隨選