优化html中js加载性能的核心策略是代码分割和懒加载。代码分割通过将代码拆分为按需加载的模块减少首次加载体积，例如使用webpack的import()语法动态导入路由或功能模块；懒加载则延迟非关键资源的加载，如利用intersection observer实现图片或组件的按需加载；此外，合理使用预加载（preload）和预取（prefetch）可提前加载关键资源或未来页面所需资源；tree shaking通过移除未使用的代码减少打包体积；async和defer属性可控制脚本异步或延迟执行以避免阻塞渲染；最后，持续使用chrome devtools、lighthouse等工具监控分析性能瓶颈并迭代优化。
HTML中JS加载性能优化，核心在于减少阻塞渲染、优化资源请求。代码分割和懒加载是两大关键策略，能显著提升页面加载速度和用户体验。
代码分割与懒加载方案
什么是代码分割？
代码分割就像把一本厚重的书拆分成若干个小册子。原本一次性加载所有JS代码，现在根据路由、功能模块等维度，将代码拆分成更小的chunk。用户首次访问时，只加载必要的代码，其余代码按需加载。
立即学习“前端免费学习笔记（深入）”；
想象一下，你打开一个电商网站，首页只需要展示商品列表。如果所有JS代码都一次性加载，购物车、支付等模块的代码也会被下载，造成资源浪费。代码分割可以将这些模块的代码延迟加载，减少首页加载时间。
实现代码分割，Webpack、Rollup等打包工具提供了强大的支持。以Webpack为例，使用import()语法可以实现动态导入，将代码分割成独立的chunk。
// 示例：动态导入
async function loadModule() {
const module = await import('./my-module.js');
module.default();
}
loadModule();懒加载（Lazy Loading）的魔力
懒加载，顾名思义，就是“延迟加载”。它是一种按需加载资源的策略，只在需要时才加载对应的JS代码。
懒加载的应用场景非常广泛，比如：
- 图片懒加载： 页面滚动到图片可视区域时才加载图片。
- 组件懒加载： 点击某个按钮或触发某个事件时才加载对应的组件。
- 路由懒加载： 切换到某个路由时才加载该路由对应的JS代码。
懒加载可以有效减少首次加载的资源体积，提升页面响应速度。
// 示例：Intersection Observer 实现图片懒加载
const images = document.querySelectorAll('img[data-src]');
function preloadImage(img) {
img.src = img.dataset.src;
img.onload = () => { img.removeAttribute('data-src'); };
}
const imgOptions = {
threshold: 0,
rootMargin: "0px 0px 50px 0px"
};
const imgObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
preloadImage(entry.target);
observer.unobserve(entry.target);
});
}, imgOptions);
images.forEach(image => {
imgObserver.observe(image);
});如何选择合适的代码分割策略？
选择合适的代码分割策略，需要根据项目特点和业务需求进行权衡。常见的策略包括：
- 按路由分割： 每个路由对应一个chunk，切换路由时加载对应的代码。适用于单页应用（SPA）。
- 按功能模块分割： 将功能模块拆分成独立的chunk，按需加载。适用于大型Web应用。
- 按需分割： 根据用户行为或设备特征，动态加载不同的代码。适用于个性化推荐等场景。
没有一种策略是万能的，需要根据实际情况进行调整和优化。
预加载（Preload）与预取（Prefetch）
预加载和预取是两种优化资源加载的策略，但它们的应用场景有所不同。
-
预加载（Preload）： 告诉浏览器尽快加载当前页面需要的资源，比如字体、图片、关键JS/CSS文件。它能确保这些资源在需要时已经准备就绪，减少加载延迟。
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="app.js" as="script">
-
预取（Prefetch）： 告诉浏览器加载将来可能需要的资源，比如下一个页面需要的JS代码。它利用浏览器的空闲时间，提前下载资源，提升页面切换速度。
<link rel="prefetch" href="next-page.js" as="script">
预加载用于优化当前页面，预取用于优化未来页面。合理使用预加载和预取，可以进一步提升用户体验。
Tree Shaking：摇掉无用的代码
Tree Shaking是一种移除Dead Code（未使用的代码）的技术。它通过静态分析代码，找出未被引用的模块、函数、变量等，并在打包时将其移除。
Tree Shaking可以有效减少打包后的代码体积，提升加载速度。Webpack、Rollup等打包工具都支持Tree Shaking。
要启用Tree Shaking，需要满足以下条件：
- 使用ES Module规范（
import和export）。 - 代码没有副作用（Side Effects）。
异步加载（Async/Defer）属性
<script></script>标签的async和defer属性可以改变脚本的加载和执行方式，避免阻塞页面渲染。
-
async： 异步加载脚本，下载完成后立即执行。多个async脚本的执行顺序不确定。 -
defer： 延迟加载脚本，在HTML解析完成后，按照脚本在页面中的顺序执行。
通常情况下，defer更适合需要操作DOM的脚本，而async更适合独立的、不依赖DOM的脚本。
<script src="script.js" async></script> <script src="script.js" defer></script>
监控与分析：持续优化
性能优化是一个持续的过程，需要不断地监控和分析。
- 使用Chrome DevTools： 分析页面加载时间、资源请求情况、JS执行时间等。
- 使用Lighthouse： 评估页面性能，并提供优化建议。
- 使用WebPageTest： 在真实网络环境下测试页面性能。
通过监控和分析，可以找到性能瓶颈，并采取相应的优化措施。记住，优化是一个迭代的过程，需要不断地尝试和改进。
