在构建网页时，合理地调用公共JavaScript脚本对于提升页面性能和用户体验至关重要。以下是一些方法和技巧，帮助你轻松掌握如何高效调用公共JavaScript脚本。
1. 使用 <script> 标签的 async 和 defer 属性
HTML5 提供了 async 和 defer 两个属性，用于控制 <script> 标签的加载和执行时机。
async 属性
- 作用：使脚本异步加载，不阻塞文档解析。
- 适用场景：当你不确定脚本的确切加载时间，或者脚本不需要依赖其他脚本时。
- 示例：
<script src="path/to/script.js" async></script>
defer 属性
- 作用：使脚本异步加载，但会按照在文档中出现的顺序执行。
- 适用场景：当脚本依赖于其他脚本或需要按顺序执行时。
- 示例：
<script src="path/to/script.js" defer></script>
2. 使用 <script> 标签的位置
将 <script> 标签放置在页面底部（在 </body> 标签之前），可以减少阻塞页面渲染的时间。因为当脚本位于页面顶部时，浏览器会暂停渲染，直到脚本加载和执行完成。
3. 合理分割脚本文件
将大型JavaScript文件分割成多个小文件，可以并行加载这些文件，从而加快页面加载速度。
示例：
<script src="path/to/first.js"></script>
<script src="path/to/second.js"></script>
4. 利用 CDN 加速加载
使用内容分发网络（CDN）可以将你的JavaScript文件分发到全球多个节点，从而减少加载时间。
示例：
<script src="https://cdn.example.com/path/to/script.js"></script>
5. 使用 Webpack 等模块打包工具
Webpack 等模块打包工具可以帮助你将多个JavaScript文件打包成一个文件，并进行优化，如代码分割、压缩等。
示例：
// 使用 Webpack 进行代码分割
import { myFunction } from './module.js';
6. 避免重复加载脚本
在页面中重复加载相同的脚本会导致性能问题。确保每个脚本只加载一次。
示例：
<!-- 避免重复加载 -->
<script src="path/to/script.js"></script>
<script src="path/to/script.js"></script>
7. 监控脚本加载性能
使用浏览器的开发者工具（如 Chrome DevTools）监控脚本加载性能，找出性能瓶颈并进行优化。
通过以上方法，你可以轻松掌握如何让HTML页面高效调用公共JavaScript脚本。合理地调用脚本，不仅可以提高页面加载速度，还能提升用户体验。