谷歌浏览器加速网站JS文件加载过程

1. 启用JS文件预加载
- 在HTML头部添加link rel="preload" href="app.js" as="script"，强制浏览器提前获取脚本。
- 配合`async`属性使用：script src="app.js" async，避免阻塞页面渲染。
2. 压缩与合并JS文件
- 使用工具（如UglifyJS、Webpack）压缩JS代码，移除空格和注释。
- 将多个小脚本合并为一个文件（如`[bundle].js`），减少HTTP请求次数。
3. 利用浏览器缓存
- 在服务器配置中设置`Cache-Control: public, max-age=31536000`，允许浏览器长期缓存JS文件。
- 为文件名添加版本号（如`app.v1.js`），更新时自动清除旧缓存。
4. 异步加载非关键JS
- 将统计代码、广告脚本等非核心功能改为动态加载：
javascript
const loadScript = (url) => {
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
};
loadScript('analytics.js');

- 使用`IntersectionObserver`监听用户滚动，仅在元素进入视口时加载相关脚本。
5. 开启GZIP压缩
- 在服务器端启用GZIP压缩（如Nginx配置`gzip on;`），减小JS文件传输体积。
- 在Chrome开发者工具的“Network”面板中检查`Content-Encoding`是否为`gzip`。
6. 使用CDN分发JS资源
- 将JS文件上传至CDN节点（如阿里云、Cloudflare），修改引用链接为CDN地址（如`https://cdn.example.com/app.js`）。
- 在“Network”面板中验证资源是否从CDN加载，避免原服务器带宽限制。
7. 延迟执行JS代码
- 将非必要脚本放入`window.addEventListener('load', () => { ... });`中，等待页面完全加载后执行。
- 使用`document.readyState`判断文档状态，动态插入脚本：
javascript
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
// 执行JS逻辑
});
} else {
// 直接执行
}

8. 优化JS加载顺序
- 在head中优先加载关键JS（如Web Fonts加载脚本），非关键脚本延后至body底部。
- 使用`rel="modulepreload"`预加载ES6模块（如script type="module" src="main.js"）。