一、优化脚本加载方式
1. 将脚本放在页面底部：默认情况下，浏览器会从上到下依次解析HTML文档。如果将脚本放在页面头部，浏览器在遇到脚本时会停止解析HTML，先执行脚本，等脚本执行完毕后再继续解析HTML。这样会导致页面渲染延迟，出现脚本阻塞。将脚本移到页面底部，在HTML内容加载完成后再加载和执行脚本，可以减少脚本对页面渲染的影响。例如，把``标签从head部分或body标签的前面移到body标签的末尾。
2. 使用异步加载（async）：对于一些不需要立即执行的脚本，可以使用`async`属性进行异步加载。当脚本标记为`async`时，浏览器会在后台下载脚本，不会阻塞页面的解析和渲染。脚本下载完成后，浏览器会立即执行它，而不会等待其他同步操作完成。不过需要注意的是，使用`async`加载的脚本不能保证执行顺序，如果脚本之间存在依赖关系，可能会导致一些问题。例如，script src="example.js" async。
3. 使用延迟加载（defer）：`defer`属性也可以用于减少脚本阻塞。与`async`不同的是，`defer`脚本会在浏览器解析完HTML文档后才执行，并且会按照脚本在页面中出现的顺序依次执行。这样可以确保脚本之间的依赖关系得到正确处理，同时避免脚本阻塞页面渲染。例如，script src="example.js" defer。
二、合并和压缩脚本文件
1. 合并脚本文件：如果网页中使用了多个脚本文件，可以将它们合并成一个文件。这样可以减少HTTP请求的数量，加快脚本的加载速度。合并脚本文件时，要注意解决脚本之间的冲突和依赖关系，确保合并后的脚本能够正常工作。可以使用工具如Webpack、Gulp等来自动化合并脚本文件的过程。
2. 压缩脚本文件：压缩脚本文件可以减小文件大小，提高加载速度。压缩过程会去掉脚本中的空格、注释、换行等不必要的字符，使代码更加紧凑。有许多工具可以用于压缩脚本文件，如UglifyJS、Terser等。在开发环境中，可以使用未压缩的脚本文件方便调试；在生产环境中，使用压缩后的脚本文件以提高性能。
三、利用浏览器缓存
1. 设置缓存头信息：通过设置服务器端的缓存头信息，可以让浏览器缓存脚本文件，避免每次访问页面时都重新下载脚本。常见的缓存头信息包括`Cache-Control`、`Expires`等。合理设置这些头信息，可以指定脚本文件在浏览器中的缓存时间，提高页面的加载速度。例如，设置`Cache-Control: max-age=3600`表示浏览器可以缓存该脚本文件1小时。
2. 使用版本号或哈希值：为了避免浏览器缓存过期的脚本文件，可以在脚本文件的文件名或URL中添加版本号或哈希值。当脚本文件发生变化时，更新版本号或哈希值，这样浏览器就会重新下载新的脚本文件，而不是使用缓存中的旧文件。例如，将`example.js`改为`example.v1.js`或`example.abc123.js`，其中`v1`或`abc123`是版本号或哈希值。
四、懒加载非关键脚本
1. 确定非关键脚本：分析网页功能，找出那些不是立即必要的、可以延迟加载的脚本。例如，一些用于用户交互的动画效果脚本、第三方广告脚本等，可以在页面主要内容加载完成后再加载。
2. 实现懒加载：可以使用JavaScript代码动态创建``标签，并在合适的时机将其插入到页面中，实现脚本的懒加载。例如，可以在页面加载完成后，通过监听`DOMContentLoaded`事件，或者在用户进行某些操作时（如点击按钮），再加载非关键脚本。这样可以减轻页面初始加载时的负担，减少脚本阻塞。
