JavaScript 阻塞 UI 是指在執行某些 JavaScript 代碼的過程中，UI 界面出現了卡頓或者無響應的狀態。這是由于 JavaScript 是一種單線程語言，當代碼執行時間過長，會阻塞其它任務的執行，包括 UI 界面的渲染。因此，寫 JavaScript 代碼的時候需要注意一些阻塞 UI 的情況，以保證 UI 的流暢性。

一個簡單的例子是在 JavaScript 中使用循環來計算一個數值，如下：

function calculate() {
var sum = 0;
for (var i=0; i<1000000; i++) {
sum += i;
}
return sum;
}

當用戶點擊一個按鈕，調用這個函數時，由于計算需要一定的時間，UI 界面會在這段時間內無響應，直到計算完成。這將導致用戶體驗不佳，甚至可能讓用戶誤以為應用程序已經崩潰了。

另一個例子是在 JavaScript 中使用了大量的同步請求，這也會阻塞 UI 的執行。比如：

function request() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false);
xhr.send();
return xhr.responseText;
}

如果在頁面加載時需要大量地請求后端數據，并且使用同步請求的方式，那么 UI 界面將會在這段時間內無響應，直到所有請求完成。如果數據加載時間過長的話，就可能造成用戶體驗不佳的局面。

為了避免 JavaScript 阻塞 UI，可以采取一些策略，如下：

• 使用異步請求：異步請求可以讓代碼在請求數據時不會阻塞 UI 界面的執行。比如：

function request() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.send();
}

• 使用 Web Worker：Web Worker 可以讓 JavaScript 代碼在后臺執行，不會阻塞 UI 界面的執行。比如：

var myWorker = new Worker("worker.js");
myWorker.onmessage = function(e) {
console.log("Worker said: " + e.data);
}
myWorker.postMessage("Hello World");

• 避免長時間運算：如果代碼中存在長時間運算的代碼，可以嘗試通過分塊處理的方式來避免阻塞 UI。比如：

function calculate() {
var sum = 0;
var chunk = 1000;
for (var i=0; i<1000000; i+=chunk) {
for (var j=0; j<chunk; j++) {
sum += i+j;
}
setTimeout(function() {}, 0);
}
return sum;
}

在實際開發中，需要根據具體情況選擇合適的策略來避免 JavaScript 阻塞 UI。這不僅能夠提升用戶體驗，還能讓應用程序更加穩定和可靠。