预加载 JavaScript

在网站中使用JavaScript时，我们常常会遇到以下情形：

• 由于JavaScript文件较大，页面加载速度过慢；
• JavaScript文件被放在页面底部，导致页面渲染出现延迟；
• 用户打开页面后才会加载JavaScript，可能会出现闪烁或白屏等问题。

这些问题都可以通过预加载JavaScript来解决。

什么是预加载JavaScript？

预加载JavaScript，顾名思义，就是在页面渲染进行之前，就把JavaScript文件加载到浏览器中。这样，当需要用到JavaScript时，浏览器就已经加载好了，可以立即执行，并且不会影响页面的渲染。

如何预加载JavaScript？

1. JavaScript的async和defer属性

在HTML5中，可以使用 <script> 标签的async(defer)属性来实现预加载JavaScript。

• async属性：表示异步。这个属性告诉浏览器立即开始下载JavaScript文件，但并不保证文件一定在页面加载前下载完成。当浏览器下载文件的同时，页面可以继续渲染。但是当文件下载完成后，浏览器会暂停渲染，执行JavaScript，执行结束后再继续渲染。适用于不依赖于文档操作的脚本，如嵌入式广告、统计、社交分享等。
• defer属性：表示推迟。这个属性告诉浏览器暂停渲染，等到JavaScript文件下载并执行完成后再继续渲染。适用于依赖于文档操作的脚本，如页面交互、表单验证、倒计时等。

使用 async 属性示例：

<script src="example.js" async></script>

使用 defer 属性示例：

<script src="example.js" defer></script>

2. 动态加载 JavaScript

这种方式是通过JavaScript代码来实现动态引入JavaScript，达到预加载的效果。

动态加载 JavaScript

<script>
  var script = document.createElement('script');
    script.onload = function() {
        console.log('script loaded');
    }
    script.src = 'example.js';
    document.head.appendChild(script);
</script>

预加载 JavaScript 的好处

• 加快网页加载速度，提升用户体验；
• 保证JavaScript文件的执行顺序；
• 少出现各种奇怪问题。