2016-03-25 32 views
0

顶我一直在使用模板作为这样一会儿引导模板和我尝试修改或添加更多的脚本,我总是会遇到这两种情况下为什么要使用JavaScript运行时,在页面的底部或有时

情景1:在某些模板中,脚本仅在将它们放置在顶部即头部时才起作用。 但同时在元素

<head> 
<!--required scripts here e.g.--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 

</head> 

<body> 

    <div class="content"> 
     <!--elements that require scripts i.e. forms and button--> 
    </div> 
<footer> 


</footer> 
</body> 

方案2的底部不起作用:在一些模板,脚本只有当它们被放置在底部页脚工作。 但是当放在我靠想了解这些场景背后的思想元素

<head> 

</head> 

<body> 

    <div class="content"> 
     <!--elements that require scripts i.e. forms and button--> 
    </div> 
<footer> 
<!--required scripts here e.g.--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 


</footer> 
</body> 

顶部不起作用。这是什么导致这种行为?或者应该考虑什么?

+0

的[在哪里?是把

1

JavaScript一次运行一件事。通常它首先运行代码。因此,在运行声明它们的代码之前,您不能要求变量或函数。例如:

<script> var one = 1 </script> 
<script> console.log(one) </script> 

将然而注销1:

<script> console.log(one) </script> 
<script> var one = 1 </script> 

将注销不确定。

在你的例子中,我认为代码坏了,因为它需要jQuery,但jquery在代码试图运行后加载。

1

JavaScript是一个单线程编程环境。在头标顶部加载多个脚本时,其下面的其他脚本标记将被阻止,直到该脚本标记加载为止。如果一个脚本标记无法加载,则其余所有脚本都会卡住......直到浏览器超时为该脚本标记。为了解决这个阻塞问题,开发人员在过去几年中一直在将脚本标记移动到网页的底部。

当一个网站有大量的JS文件在页面顶部&正在从第3,第4,第5,通过第N方广告供应商服务器加载时,问题真的很明显。当广告供应商的服务器脱机时,他们的广告无法再投放 - 这种情况经常发生 - 那么页面上的JS会等待浏览器超时。这会导致页面在加载时出现卡住现象。这会造成糟糕的用户体验。

将脚本标记移动到页面底部的开发者技巧有助于缓解这两个问题。它也使网页加载更快&可用于更快为两个用户&搜索机器人。由于搜索引擎机器人关心页面加载时间,他们可以在网页加载速度很快时为网站提供支持。

因此,尽可能将脚本标记移动到页面底部很重要。

+0

问题不是页面加载速度更快。问题是元素不能正常工作,例如由javascript激活的按钮。其他人在脚本处于顶部时工作,而其他人在脚本底部时工作 –

+0

某些jQuery代码可以在没有包装页面加载功能的情况下编写。所以它寻找$('。content'),不包括$(function(){$('。content')});后面的代码示例将等待整个DOM加载,然后再运行jQuery。如果您要将调试器添加到jQuery库中,那么当页面顶部加载

相关问题