在掌握JavaScript效能提升的道路上,學習異步程式設計(Asynchronous programming)是一條不可或缺的途徑。異步編程允許我們以非阻塞(non-blocking)的方式處理耗時的操作,例如網絡請求、文件讀寫或任何可能延長執行時間的工作。通過這種方法,我們能夠有效地利用系統資源,在等待某些操作完成時同時執行其他任務。

在JavaScript中,異步操作常見於事件處理、回調函數(callbacks)、Promises及async/await語法。了解這些概念並妥善運用它們對於提高程式碼效率至關重要。 事件處理器允許我們定義在特定事件發生時觸發的功能,在DOM元素上尤其常見。

例如,使用者點擊按鈕後會觸發相應的事件處理函數而不會阻塞頁面其他部分的加載或交互。 回調函數是最原始也是最基本的異步模式之一。它允許我們將一個函數作爲參數傳遞到另一個函數中,在某項任務完成後被呼叫執行。

回調可能導致所謂「回調地獄(callback hell)」問題,使得代碼難以閱讀和維護。 爲此,ES6引入了Promises來解決這些問題。Promise代表了一個未來可能完成或失敗的操作及其結果值。

它大大改善了鏈式異步操作(chaining asynchronous operations),讓代碼更加清晰與容易管理錯誤處理流程。 進而,在ES2017中引入了async/await關鍵字使得異步代碼看起來像同步代碼那般直觀。`async` 函数声明定义一个返回 `AsyncFunction` 对象的异步函数;`await` 操作符则用于等待一个 `Promise` 解决(resolve),可以说这大幅度简化了对于 Promises 的使用,并且让异步代码更加易读和维护。

除此之外, 高效利用Web Workers可以将复杂计算从主线程中剥离出去, 通过并行处理进一步优化性能, 这对图形处理、密集型数学运算等场景尤为有益。 总结来说, 异步编程技巧是实现现代 JavaScript 应用高效性能不可或缺部分. 无论你是网络应用开发者还是Node.js后端工作者, 理解并合理运用事件驱动模型(event-driven model), 回调机制(callback mechanism), Promises 和 async/await 是赢得性能战斗必备武器之一. 认真学习这些异步编程范式将有助于你构建出响应迅速、用户体验极佳且资源利用高效的JavaScript应用程序。

表: 強弱危機分析(最後更新: 2023-11-30)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要使用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指標還可以幫助您識別內存洩漏和其他性能相關問題的來源。

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

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