資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學JavaScript 中 Web Workers 對 DOM 的限制有哪些？
JavaScript 是一種單執行緒程式語言。這意味著它以循序漸進的方式執行應用程式的所有程式碼。在某些情況下，我們需要執行計算密集型任務。例如，擁有大型資料庫的應用程式需要處理大量資料，這可能比平時花費更多時間。為了在這種情況下提高應用程式效能，我們需要使用多執行緒，它可以同時執行多個任務。
JavaScript 不支援多執行緒，但 Web Workers 允許我們在後臺執行特定任務，從而提高應用程式的效能和使用者體驗。但是，在訪問 DOM 元素時，使用 Web Workers 有一些限制。下面，我們將討論 Web Workers 的限制以及解決方案。
Web Workers 對 DOM 的限制
1. Web Workers 無法直接訪問 DOM 元素
DOM（文件物件模型）包含網頁的結構。我們可以從 DOM 訪問網頁元素。但是，只有主執行緒可以訪問 DOM 元素並更新它們，而 Web Workers 無法訪問 DOM 元素。Web Workers 需要透過訊息與主執行緒通訊才能執行任何與 DOM 元素相關的操作。
// This is a web worker code in app.js
// The below code will give an error
let ele = document.getElementById("id");
console.log(ele);
// Main JavaScript code
// This code is correct
let ele = document.getElementById("id");
console.log(ele);
2. Web Workers 的 DOM 相關功能有限
Web Workers 的 DOM 相關功能有限。我們不能在 Web Workers 中使用 DOM 相關的 API。例如 `fetch()`、`querySelector()`、`getElementById()`、`document`、`window` 等。我們不能在 Web Workers 中使用這些 API 和與視窗相關的物件。如果我們想使用此類 API，我們需要透過訊息與主執行緒通訊，並在主執行緒中使用這些 API 相關的功能。
在下面的程式碼中，我們可以看到，如果我們在 Web Worker 檔案中使用 `window` 或 `document` 物件，則會報錯。
// This is a web worker code in app.js
// The below code will give an error
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
});
// Main JavaScript code
// This code is the correct
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
});
3. UI 更新受限
Web Workers 不允許更新 UI，因為它們無法訪問 DOM 元素。如果我們需要使用 Web Worker 更新 UI，我們可以向主執行緒傳送訊息以更新 UI，以便主執行緒可以訪問 DOM 元素並相應地更新它。
// This is a web worker code in app.js
// The below code will give an error
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
ele.style.color = "blue";
});
// Main JavaScript code
// This code is the correct
window.addEventListener("load", () => {
let ele = document.querySelector("#id");
ele.style.color = "blue";
});
透過 Web Workers 與主執行緒通訊以克服 DOM 限制
克服 Web Workers 與 DOM 相關限制的最佳解決方案是使用 Web Workers 與主執行緒通訊。我們可以使用 Web Workers 處理資料，並透過訊息事件將結果資料傳送到主執行緒。因此，主執行緒可以更新 DOM 元素。
示例
在下面的示例中，我們使用 `postMessage()` 方法將訊息從 Web Worker 傳送到主執行緒。
在主執行緒中，我們使用 `onmessage` 事件來執行回撥函式，每當它接收到訊息時。我們可以在回撥函式中對 DOM 元素執行操作。在這裡，我們使用其 ID 訪問元素，並使用從 Web Worker 獲取的新文字更新其文字內容。
// Web worker file (app.js)
self.postMessage("This is a updated text!");
// Main thread
const app = new Worker("app.js");
app.onmessage = function(event) {
// Update text in UI
const para = document.getElementById("text");
para.textContent = event.data;
};
Web Workers 非常強大，可以並行或在後臺執行任務，但是當我們將其與 DOM 一起使用時，我們需要透過與主執行緒通訊來克服其限制。在這裡，我們學習了 Web Workers 的三個主要限制以及克服這些限制的解決方案。
453 次瀏覽
