1. 使用`rel="preload"`预加载关键资源
- 在HTML头部添加代码link rel="preload" href="style.css"→提前加载CSS文件→避免渲染阻塞（如将样式表优先级提高）。
- 通过script rel="preload" href="app.js"→预加载JS但暂不执行→配合`onload`事件延迟执行（需控制执行时机）。
2. 调整`async`和`defer`属性
- 在JS脚本标签添加`defer`属性→等待HTML解析完成后执行→防止阻塞页面渲染（如将script src="main.js"改为script src="main.js" defer）。
- 通过`async`属性→并行下载脚本但不保证执行顺序→适合独立功能（如第三方统计代码）。
3. 优化CSS加载顺序
- 将关键样式内联到head→减少网络请求→优先加载必要样式（如将按钮颜色直接写入HTML）。
- 通过link rel="stylesheet" href="style.css" media="none" onload="this.media='all'"→先加载后启用→避免白屏（需测试兼容性）。
4. 使用`Content-Security-Policy`控制资源类型
- 在服务器配置或HTML头部添加`Content-Security-Policy: script-src 'self'`→限制JS来源→防止外部脚本干扰加载顺序（如禁用未授权的CDN）。
- 通过`Content-Security-Policy: style-src 'self'`→仅允许内联或同源CSS→避免第三方样式覆盖（需配合HTTPS使用）。
5. 延迟非关键JS执行
- 在底部添加``标签→放置非核心脚本→减少首屏加载时间（如将广告代码移至页面末尾）。
- 通过`window.addEventListener('load', function() { // 执行代码 })`→等待页面完全加载后运行→避免阻塞关键资源（需测试性能影响）。