Jit*_*yas 7 javascript css performance xhtml jquery
如果我将JavaScript代码保留在底部或将JavaScript代码保留在<head>内部document.ready,那两者是否相同？
我对这两种方法感到困惑,http://api.jquery.com/ready/和http://developer.yahoo.com/performance/rules.html#js_bottom.
将JavaScript代码放在底部(就在之前</body>)是否有任何好处,即使我保留代码.
$(document).ready(function() {
// code here
});
随着JavaScript的附加
<head>
<script type="text/javascript" src="example.js"></script>
</head>
一般情况下,您应该将您的Javascript文件放在HTML文件的底部.
如果您使用"经典" <script>标记文件,那就更为重要.大多数浏览器(甚至是现代浏览器)都会阻止UI thread你HTML markup加载和执行javascript时的渲染过程.
这反过来意味着,如果您在页面顶部加载了大量的Javascript,则用户将暂停"慢速"加载页面,因为在所有脚本加载完毕后,他将看到整个标记执行.
为了使这个问题更严重,大多数浏览器不会以并行模式下载javascript文件.如果您有这样的事情:
<script type="javascript" src="/path/file1.js"></script>
<script type="javascript" src="/path/file2.js"></script>
<script type="javascript" src="/path/file3.js"></script>
你的浏览器会
在这样做的同时,UI thread阻止了渲染过程.
有些浏览器Chrome最终开始以并行模式加载脚本文件,这使得整个问题不再是一个问题.
解决该问题的另一种方法是使用dynamic script tag insertion.这基本上意味着您只在<script>标签上加载一个javascript文件.然后,此(加载程序)脚本动态创建<script>标记并将其插入到标记中.这是同步的,并且在性能方面更好.