Javascript非阻塞脚本,为什么不简单地将所有脚本放在标记之前?

时间:2011-07-26 09:54:27

标签: javascript nonblocking deferred-loading

3 个答案:

答案 0 :(得分:1)

一般说不。即使脚本将在页面的所有内容之后加载,脚本的加载和执行也会阻止页面。原因可能是脚本中存在写命令。

但是,如果要实现的只是加载页面内容的速度,则在</body>标记之前放置脚本标记的结果与动态创建脚本标记的结果相同。最重要的区别是,当您以常见的静态方式加载脚本时,它们会逐个执行,换句话说,不会并行执行脚本文件(在旧版浏览器中,同样适用于下载脚本)。

答案 1 :(得分:1)

如果您需要异步脚本。 如果可以在您使用的浏览器中使用,则使用(HTML5)异步标记。这就是Google Analytics在您发布的代码中所做的事情(特别是行ga.async = true MDN Link, scroll down for async)。< / p>

但是,这可能导致您的脚本在页面加载期间的任意时间加载 - 这可能是不合需要的。在选择使用异步之前,值得问自己以下问题。

不需要用户输入?然后使用async属性。

是否需要回复按钮或导航?然后您需要将它们放在页面顶部(头部)而不是使用异步标记。

异步脚本以任何顺序运行,因此如果您的脚本依赖于(例如)jQuery,并且jQuery被加载到另一个标记中,那么您的脚本可能会在jQuery脚本执行之前运行 - 从而导致错误。


为什么没有人们把东西放在body标签的底部?如果脚本花了足够的时间来加载它的速度那么慢/暂停网站的负载,很可能该网站在网站加载后暂停/挂起网站(期望在不同的浏览器上有不同的行为) - 使您的网站看起来没有响应(点击按钮)没有任何反应)。在大多数情况下,这并不理想,这就是发明异步属性的原因。

<小时/> 或者,如果您的脚本需要很长时间才能加载 - 您可能希望(在测试之后)缩小连接您的脚本,然后再将其发送到服务器。

我建议使用require.js进行缩小和连接,它很容易运行和使用。

缩小可减少需要下载的数据量。

连接脚本减少了往返次数&#34;到服务器(对于远程服务器,200毫秒ping,5个请求需要1秒)。

答案 2 :(得分:0)

异步加载的一个优点(特别是像分析片段这样的东西),至少如果你把它放在顶部,它将尽快加载,而不会在渲染页面时花费任何时间。因此,通过分析,在用户离开页面之前(可能在页面完全加载之前)实际跟踪用户的可能性会更高。

并且使用insertBefore而不是append,因为如果我没记错的话就有错误(我认为在某些IE版本中,请参阅下面的链接,评论中的内容)。

对我来说这个链接: Async JS 是迄今为止我发现的最有用的。特别是因为它也带来了问题,即使使用谷歌分析代码,onload事件仍将被阻止(至少在某些浏览器中)。如果您希望不发生这种情况,请将该函数更好地附加到onload事件。

要将异步代码段放在底部,实际上会在您发布的链接中进行说明。他似乎只是为了确保在没有使用onload事件的情况下完全加载DOM。所以它可能取决于你的脚本正在做什么,如果你没有操纵DOM,那么就没有理由将它添加到body的底部。除此之外,我个人更愿意将它添加到onload-event中。