Question

如果我将JavaScript放在head标记中，如下所示：

<head>
 <script type="text/javascript" src="jQuery.js"></script>
 <script type="text/javascript">
// my jscript
  </script>

</head>

是否会干扰图片，文字等其他内容的加载？我刚和我的朋友争吵他说这会扰乱网站设计的加载。

Answer 1

是的，除非您使用async或defer，否则javascript将在html内容之前加载。您可以将脚本移动到所有图像/文本下方，并将其放在最终正文标记之前。

如今，浏览器速度如此之快，除非你的网站过于复杂，否则它不是一个大问题。更不用说，jQuery在每次迭代时变得越来越快，越来越紧凑。

另一个方面是一些现代浏览器并行加载多个资源，因此在这些浏览器中可能没有太多问题。我不知道这个错综复杂的细节，也许其他人会提供一些见解......

Answer 2

是的。

这就是使用'ready'回调（在jQuery中可用）很重要的原因。这是确保代码仅在页面加载完成后执行的正确方法，这在大多数情况下都是您想要的。

<head>
 <script type="text/javascript" src="jQuery.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
          // my jscript
     }
  </script>

</head>

Answer 3

是的，在外部脚本完成加载并完成执行之前，它将阻止页面呈现。

Answer 4

如果您担心页面加载速度更快：

将CSS置于顶部，JavaScript置于底部。 Steve Souders（高性能网站，O'Reilly）发现将样式表移动到头部元素的顶部会使页面加载速度加快逐步。

使用脚本，情况正好相反。如果可能，请移动外部JavaScript 文件到页面底部，或延迟或推迟加载JavaScript文件头。

对于脚本输入后放置的所有内容，将阻止渐进式渲染你的HTML。

JavaScript会干扰其他内容的加载吗？

4 个答案: