js阻塞怎么解决

JS阻塞怎么解决？
使用异步加载、代码拆分、减少阻塞点、合理优化DOM操作。

使用异步加载：JavaScript 阻塞通常发生在页面加载过程中，因为浏览器在解析 HTML 时，如果遇到 <script> 标签，会暂停解析并执行脚本，这会导致页面加载时间变长，从而影响用户体验。为了解决这一问题，可以使用异步加载技术。通过在 <script> 标签中加入 async 或 defer 属性，可以让浏览器在不阻塞页面加载的情况下下载和执行脚本，从而提高页面加载速度。

接下来，我们将详细讨论其他几种解决JavaScript阻塞的有效方法。

一、使用异步加载

异步加载技术主要包括两种方式：使用 async 和 defer 属性。

1.1、`async` 属性

async 属性允许脚本在后台异步下载，并在下载完成后立即执行。这种方法适用于独立的脚本文件，即不依赖于其他脚本或不需要在页面完全加载后执行的脚本。

<script async src="example.js"></script>

1.2、`defer` 属性

defer 属性则会在脚本下载完成后等待 HTML 文档完全解析和加载完毕后再执行。这种方法适用于依赖于其他脚本或需要在页面完全加载后执行的脚本。

<script defer src="example.js"></script>

使用这两种属性可以有效减少JavaScript阻塞，提升页面加载速度和用户体验。

二、代码拆分

代码拆分是将大型的JavaScript文件拆分成多个较小的文件，以便浏览器可以并行下载和执行，从而减少阻塞时间。

2.1、按需加载

按需加载是根据用户的操作或页面的特定需求，动态加载所需的JavaScript文件。通过这种方式，可以避免一次性加载大量的JavaScript文件，从而减少页面加载时间。

if (condition) {
  import('./module.js').then(module => {
    module.default();
  });
}

2.2、分块（chunking）

分块是一种将大型JavaScript文件拆分成多个小块的技术，通常与打包工具（如Webpack）配合使用。通过分块，可以减少初始加载时间，并且在需要时动态加载特定的块。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

三、减少阻塞点

通过减少JavaScript阻塞点，可以显著提高页面加载速度。以下是一些常见的方法：

3.1、减少同步XHR请求

同步XHR请求会阻塞浏览器的渲染进程，导致页面加载时间变长。应尽量使用异步请求来替代同步请求。

// 异步XHR请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应
  }
};
xhr.send();

3.2、避免长时间运行的JavaScript

长时间运行的JavaScript代码会阻塞主线程，导致用户界面卡顿。应尽量将长时间运行的任务拆分成较小的任务，使用 setTimeout 或 requestAnimationFrame 将任务分批执行。

function longRunningTask() {
  for (let i = 0; i < 1000000; i++) {
    // 执行一些操作
    if (i % 1000 === 0) {
      setTimeout(longRunningTask, 0); // 将任务分批执行
    }
  }
}
longRunningTask();

四、合理优化DOM操作

频繁的DOM操作会导致重绘和回流，从而影响页面性能。应尽量减少DOM操作，并优化其执行方式。

4.1、批量更新DOM

将多次DOM操作合并成一次操作，可以减少重绘和回流的次数，从而提高页面性能。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

4.2、使用虚拟DOM

虚拟DOM是一种在内存中构建的DOM树，它可以在不影响实际DOM的情况下进行操作，并在操作完成后一次性更新实际DOM。React等前端框架广泛使用虚拟DOM来提高性能。

// React示例
const App = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

五、优化渲染顺序

合理安排JavaScript的加载和执行顺序，可以减少阻塞时间，提高页面加载速度。

5.1、将脚本放在页面底部

将 <script> 标签放在页面底部，可以确保HTML文档在JavaScript执行前完全解析，从而避免阻塞页面加载。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <!-- 页面内容 -->
  <script src="example.js"></script>
</body>
</html>

5.2、使用延迟加载

延迟加载是指在页面加载完成后，再动态加载和执行JavaScript代码。可以通过 setTimeout 或 requestIdleCallback 实现延迟加载。

window.addEventListener('load', () => {
  setTimeout(() => {
    const script = document.createElement('script');
    script.src = 'example.js';
    document.body.appendChild(script);
  }, 0);
});

六、使用Web Workers

Web Workers可以在后台线程中执行JavaScript代码，从而避免阻塞主线程，提高页面性能。

6.1、创建和使用Web Worker

通过创建Web Worker，可以将耗时的任务放在后台线程中执行，从而避免阻塞主线程。

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Result:', event.data);
};
worker.postMessage('start');
// worker.js
onmessage = function(event) {
  if (event.data === 'start') {
    // 执行耗时任务
    const result = heavyComputation();
    postMessage(result);
  }
};
function heavyComputation() {
  // 模拟耗时计算
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

6.2、使用Shared Workers

Shared Workers允许多个脚本共享一个Worker线程，可以在多个页面或多个Iframe之间共享数据，提高性能。

// main1.js
const worker = new SharedWorker('sharedWorker.js');
worker.port.onmessage = function(event) {
  console.log('Result:', event.data);
};
worker.port.postMessage('start');
// main2.js
const worker = new SharedWorker('sharedWorker.js');
worker.port.onmessage = function(event) {
  console.log('Result:', event.data);
};
worker.port.postMessage('start');
// sharedWorker.js
onconnect = function(event) {
  const port = event.ports[0];
  port.onmessage = function(event) {
    if (event.data === 'start') {
      // 执行耗时任务
      const result = heavyComputation();
      port.postMessage(result);
    }
  };
};
function heavyComputation() {
  // 模拟耗时计算
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

七、优化第三方脚本

第三方脚本（如广告、分析工具等）可能会导致页面阻塞。可以通过以下方法优化第三方脚本的加载和执行。

7.1、延迟加载第三方脚本

将第三方脚本的加载和执行延迟到页面加载完成后，可以避免阻塞页面加载。

window.addEventListener('load', () => {
  const script = document.createElement('script');
  script.src = 'https://example.com/third-party.js';
  document.body.appendChild(script);
});

7.2、使用异步加载第三方脚本

通过使用 async 或 defer 属性，可以让第三方脚本异步加载，从而避免阻塞页面加载。

<script async src="https://example.com/third-party.js"></script>

八、监控和优化性能

通过监控和分析页面性能，可以识别和优化JavaScript阻塞问题。以下是一些常见的性能监控和优化工具。

8.1、使用浏览器开发者工具

浏览器开发者工具（如Chrome DevTools）提供了丰富的性能分析功能，可以帮助识别和优化JavaScript阻塞问题。

<!-- 打开Chrome DevTools -->
Ctrl + Shift + I (Windows/Linux)
Cmd + Option + I (Mac)

8.2、使用性能监控工具

性能监控工具（如Lighthouse、WebPageTest等）可以自动分析和报告页面性能问题，提供优化建议。

 1. 打开Chrome DevTools 2. 选择"Lighthouse"标签 3. 点击"Generate report"按钮

通过以上方法，可以有效解决JavaScript阻塞问题，提高页面性能和用户体验。同时，合理使用项目管理和协作工具，如研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助团队更高效地管理和优化项目。