1. 调整脚本加载位置
- 将``标签从head移动到body底部（页面内容加载完成后执行）。
- 使用`defer`或`async`属性：script src="app.js" defer（按顺序执行）或`async`（并行加载）。
2. 优先加载关键CSS
- 在head中内联关键样式（如字体、布局），减少对外部CSS的依赖。
- 使用link rel="preload" href="style.css" as="style"提前加载CSS文件。
3. 延迟非必要JS执行
- 将非核心功能（如统计代码、弹窗）放入`window.onload`或`DOMContentLoaded`事件中执行。
- 动态插入脚本：`const script = document.createElement('script'); script.src = 'analytics.js'; document.body.appendChild(script);`
4. 合并与压缩资源
- 将多个CSS/JS文件合并为一个文件，减少HTTP请求次数。
- 使用工具（如UglifyJS、CSSNano）压缩代码，移除空格和注释。
5. 利用浏览器缓存
- 在服务器配置中设置`Cache-Control`头（如`max-age=31536000`），允许浏览器缓存静态资源。
- 为CSS/JS文件添加版本号（如`style.v1.css`），更新时自动清除旧缓存。
6. 异步加载第三方资源
- 为广告、社交分享等第三方脚本添加`async`属性：script async src="third-party.js"。
- 使用`intersectionObserver`监听用户滚动，仅在进入视口时加载相关脚本。
7. 提取关键渲染路径
- 在开发者工具中打开“Lighthouse”，检查“Critical Requests”和“Scripts”部分。
- 移除阻止渲染的JS（如`alert()`弹窗），确保CSSOM（CSS对象模型）快速构建。
8. 避免CSS阻塞渲染
- 将非样式相关的CSS（如动画、特效）延后加载：link rel="preload" href="effects.css" as="style" onload="this.onload=null; this.rel='stylesheet'"。
- 使用媒体查询拆分样式：link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"。
9. 使用Service Worker预缓存资源
- 在`service-worker.js`中预缓存关键CSS/JS：
javascript
installEvent.waitUntil(
caches.open('runtime').then(cache => {
return cache.addAll(['style.css', 'app.js']);
})
);

- 启用后，资源从本地缓存读取，跳过网络请求。