JS阻塞问题通常通过以下方法解决：异步加载、延迟加载、使用Web Workers、代码拆分。 其中最常用的方法是异步加载，通过将JavaScript文件的加载和执行设置为异步，可以显著减少页面加载时间，从而提高用户体验。
异步加载可以通过使用async或defer属性来实现。 async属性会使脚本在下载完成后立即执行，而defer属性则会推迟脚本的执行，直到HTML文档完全解析完毕。两者都可以有效避免JavaScript文件的加载和执行阻塞页面的渲染。
一、异步加载
什么是异步加载
异步加载是指在加载页面的过程中，JavaScript文件的下载和执行与HTML文档的解析和渲染是并行进行的。这意味着JavaScript文件不会阻塞页面的渲染，从而可以显著提高页面加载速度。
如何实现异步加载
实现异步加载的方法主要有两种：使用async属性和defer属性。
1. async属性
async属性用于指示浏览器立即下载脚本，并在下载完成后立即执行。使用async属性的脚本会与HTML文档的解析并行进行，但脚本的执行顺序并不一定按照它们在文档中出现的顺序。
2. defer属性
defer属性用于指示浏览器下载脚本后推迟执行，直到HTML文档完全解析完毕。使用defer属性的脚本会按照它们在文档中出现的顺序执行。
二、延迟加载
什么是延迟加载
延迟加载（Lazy Loading）是一种优化技术，指的是在页面初始加载时不加载所有资源，而是根据用户的需要按需加载。这可以显著减少页面初始加载时间，提高用户体验。
如何实现延迟加载
实现延迟加载的方法有很多，以下是几种常用的方法：
1. 使用Intersection Observer API
Intersection Observer API可以用于检测元素是否进入视口，从而决定是否加载该元素的资源。
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let script = document.createElement('script');
script.src = entry.target.getAttribute('data-src');
document.body.appendChild(script);
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('[data-src]').forEach(script => {
observer.observe(script);
});
2. 手动延迟加载
在某些情况下，可以手动控制脚本的加载和执行时机。例如，可以在用户点击按钮时加载脚本。
三、使用Web Workers
什么是Web Workers
Web Workers是一个独立的JavaScript执行环境，允许你在后台线程中运行脚本，而不会阻塞主线程。这可以用于执行计算密集型任务，从而避免阻塞页面的渲染。
如何使用Web Workers
创建和使用Web Workers非常简单。以下是一个基本的示例：
// main.js
let worker = new Worker('worker.js');
worker.onmessage = function(event) {
console.log('Received message from worker:', event.data);
};
worker.postMessage('Hello, worker!');
// worker.js
onmessage = function(event) {
console.log('Received message from main thread:', event.data);
postMessage('Hello, main thread!');
};
四、代码拆分
什么是代码拆分
代码拆分（Code Splitting）是一种优化技术，通过将代码分割成多个更小的文件，可以按需加载这些文件，从而减少页面初始加载时间。
如何实现代码拆分
实现代码拆分的方法主要有以下几种：
1. 使用Webpack进行代码拆分
Webpack是一个流行的JavaScript模块打包工具，支持代码拆分功能。以下是一个基本的示例：
// webpack.config.js
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
2. 动态导入
动态导入（Dynamic Import）是一种语法，允许你在运行时按需加载模块。以下是一个基本的示例：
import('./module.js').then(module => {
module.default();
});
五、优化DOM操作
减少DOM操作
频繁的DOM操作会导致性能问题，因为每次操作都会引起页面的重绘和重排。减少DOM操作可以显著提高页面性能。
使用文档片段
文档片段（Document Fragment）是一个轻量级的文档对象，可以用于批量操作DOM元素，从而减少重绘和重排次数。以下是一个基本的示例：
let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
let div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
document.body.appendChild(fragment);
六、使用合适的框架和库
选择轻量级框架和库
选择轻量级的框架和库可以显著减少页面的加载时间。例如，如果你的项目只需要一些简单的DOM操作和事件处理，可以考虑使用像jQuery这样的轻量级库，而不是复杂的框架。
按需加载库
按需加载库是指在需要时才加载库文件，而不是在页面初始加载时加载所有库文件。例如，可以使用webpack的代码拆分功能按需加载库文件。
import('lodash').then(_ => {
console.log(_.join(['Hello', 'world'], ' '));
});
七、使用缓存
启用浏览器缓存
启用浏览器缓存可以显著减少页面的加载时间。通过设置适当的缓存策略，可以确保浏览器在用户访问页面时不必每次都重新加载所有资源。
使用Service Workers
Service Workers是一种脚本，可以在后台独立于网页运行，用于管理缓存和网络请求。以下是一个基本的示例：
// service-worker.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
八、优化图像和其他资源
使用合适的图像格式
选择合适的图像格式可以显著减少页面的加载时间。例如，对于简单的图像，可以使用SVG格式；对于复杂的图像，可以使用JPEG或PNG格式。
压缩图像
压缩图像可以显著减少图像文件的大小，从而减少页面的加载时间。可以使用像ImageOptim、TinyPNG等工具来压缩图像。
九、优化CSS
最小化和压缩CSS
最小化和压缩CSS文件可以显著减少文件大小，从而减少页面的加载时间。可以使用像cssnano、CleanCSS等工具来最小化和压缩CSS文件。
避免使用阻塞CSS
避免使用阻塞CSS可以显著提高页面的加载速度。可以将非关键的CSS文件推迟加载，或者使用media属性来指定CSS文件的加载条件。
十、使用CDN
什么是CDN
内容分发网络（CDN）是一种分布在多个地理位置的服务器网络，用于加速内容的交付。通过将资源存储在离用户更近的服务器上，可以显著减少页面的加载时间。
如何使用CDN
使用CDN非常简单，只需将资源的URL替换为CDN提供的URL。例如：
通过综合应用上述方法，可以显著减少JavaScript阻塞问题，提高页面的加载速度和用户体验。
相关问答FAQs：
1. 什么是JS阻塞问题？JS阻塞问题是指在浏览器加载网页时，由于JS代码执行时间过长或者存在其他阻塞因素，导致页面加载速度变慢的现象。
2. 如何解决JS阻塞问题？
异步加载JS文件： 使用async或defer属性将JS文件异步加载，可以使JS文件在后台加载，不影响页面的加载和渲染。
压缩和合并JS文件： 将多个JS文件合并为一个文件，并进行压缩，减少HTTP请求的数量和文件大小，加快页面加载速度。
延迟执行JS代码： 将耗时较长的JS代码放在页面底部，或者使用setTimeout函数在页面加载完毕后执行，以避免阻塞页面渲染。
优化JS代码： 对JS代码进行优化，减少代码量和冗余，提高代码执行效率，减少阻塞时间。
使用CDN加速： 将JS文件托管到CDN上，利用CDN的分布式节点加速JS文件的加载，减少网络延迟，提高页面加载速度。
3. 如何判断是否存在JS阻塞问题？
使用浏览器开发者工具： 在浏览器的开发者工具中，查看网络面板，可以看到JS文件加载的时间和耗时。
使用性能分析工具： 使用性能分析工具，如Lighthouse、WebPageTest等，可以分析页面加载过程中JS阻塞的情况，并提供优化建议。
观察页面加载效果： 如果页面加载速度明显变慢，出现白屏或者页面渲染延迟的情况，可能存在JS阻塞问题。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3909870