javascript - Google 的 API javascript 示例中的脚本 async/defer/onload 用法

Question

在 Google 为其 API 提供的各种 javascript 示例中(例如 here )，他们使用以下代码从 html 加载脚本:

<script async defer src="https://apis.google.com/js/api.js" 
    onload="this.onload=function(){};handleClientLoad()" 
    onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

我的理解是async/defer告诉浏览器什么时候加载和执行脚本，有些矛盾。我有几个问题:

1. 在此同时使用async 和defer 是什么意思上下文？
2. Google 为什么选择使用这种技术？它有没有性能或其他好处？
3. 在onload 事件中，为什么他们首先为事件分配一个空函数(function(){};)在调用 handleClientLoad() 之前？
4. 如果我想将整个 javascript 移动到一个单独的 js 文件中，加载这两个脚本的最佳方法是什么？由于新的js文件会依赖api.js 不能异步加载吗？

谢谢。

Answer 1

the WHAT-WG living standard for HTML's section on async and defer 对此进行了很好的介绍，其中包括这个方便的图形:

1. What is the meaning of using both async and defer in this context?

如果浏览器支持async，它会忽略defer 并执行异步工作。如果不是，但它支持 defer，它会改为执行 defer。如果两者都不支持，脚本会阻止 DOM 解析，但所有现代浏览器都至少支持一个。

2.Why did Google choose to use this technique? Does it have any performance or other benefits?

async 在不阻塞 DOM 解析和呈现的情况下获取脚本，并在脚本可用时立即运行，即使 DOM 解析和呈现仍在进行中也是如此。 defer 还将避免阻塞 DOM 解析和呈现，但在解析完成之前不会运行脚本(例如，可能稍后)。

3. In the onload event, why do they first assign an empty function ( function(){}; ) to the event before calling handleClientLoad()?

如果您查看 onreadystatechanged，这一点就会变得很清楚:基本上它确保 handleClientLoad 仅被 GAPI 调用一次，而不是潜在的两次(一次被 onload 和一次 onreadystatechanged。)

4. If I want to move the entire javascript to a separate js file, what's the best approach to load both scripts? Since the new js file will depend on api.js and can't be loaded asynchronously?

好吧，它可以异步加载，您只需使用api.js 处理竞争条件。我可能会:

1. 在 script 标签加载 api.js 上方的内联脚本中有 handleClientLoad，如下所示:

   var clientLoaded = false;
   function handleClientLoad() {
       if (!clientLoaded &&
           typeof mainScriptLoad !== "undefined" &&
           typeof gapi !== "undefined") {
           clientLoaded = true;
           mainScriptLoad();
       }
   }
   

2. 在您的单独文件中有 mainScriptLoad。

3. 在单独文件的末尾，调用 handleClientLoad。

那样:

• 如果您的脚本先运行，它会调用handleClientLoad，但handleClientLoad 会发现GAPI 尚未加载并且不会执行任何操作；稍后，当 GAPI 加载时，它 将调用 handleClientLoad，然后调用 mainScriptLoad，因为一切都已准备就绪。
• 如果您的脚本在 GAPI 加载后运行，它会调用 handleClientLoad 但 handleClientLoad 会发现您的主脚本尚未加载并且不会尝试调用它。稍后，当您的脚本加载并调用 handleClientLoad 时，handleClientLoad 将调用 mainScriptLoad，因为一切就绪。