我最近阅读了Yahoo宣言中的“加快网站速度的最佳做法”。他们建议在可能的情况下将JavaScript包含项放在HTML代码的底部。
但是确切的地点和时间?
我们应该在关闭之前</html>
还是之后放置它?最重要的是,我们什么时候仍应将其放在本<head>
节中?
我最近阅读了Yahoo宣言中的“加快网站速度的最佳做法”。他们建议在可能的情况下将JavaScript包含项放在HTML代码的底部。
但是确切的地点和时间?
我们应该在关闭之前</html>
还是之后放置它?最重要的是,我们什么时候仍应将其放在本<head>
节中?
Answers:
真正不干扰脚本的可能性有两种:
</body></html>
)包含一个外部脚本文件第二个可能更快,因为最初的Yahoo研究表明,某些浏览器在命中script标签时会尝试加载脚本文件,因此,在完成浏览后,它们才加载页面的其余部分。但是,如果脚本具有“就绪”部分,并且必须在DOM准备就绪后立即执行,则可能需要将其放在头部。另一个问题是布局-如果您的脚本要更改页面布局,则您希望它尽快加载,这样您的页面就不会花费很长时间在用户面前重新绘制自身。
如果外部脚本站点位于另一个域(例如外部窗口小部件)上,则可能值得将其放在底部,以避免它延迟页面的加载。
对于任何性能问题,请自己制定基准 -一次完成研究可能会因您自己的本地设置或浏览器的更改而改变。
从来没有这么干过-雅虎建议将脚本放在结束</body>
标记之前,这会产生一种幻觉,即页面在空的缓存上加载速度更快(因为脚本不会阻止下载文档的其余部分)。但是,如果您有一些要在页面加载时运行的代码,则仅在整个页面加载后才开始执行。如果将脚本放在<head>
标记中,它们将在执行之前开始执行-因此,在准备好的缓存中,页面实际上看上去加载得更快。
同样,并非总是可以将脚本放在页面底部的特权。如果需要在依赖于之前加载的库或其他JavaScript代码的视图中包括内联脚本,则必须将这些依赖项加载到<head>
标记中。
雅虎的所有建议都很有趣,但并不总是适用,应根据具体情况进行考虑。
<script>
标签并不意味着Javascript具有吸引力。
<script>
标签与标记分开,可以与增强界面的代码一起使用,但这不是必需的。因此,内联<script>
标签并没有天生就吸引人。
<script>
标签将这些值编码为javascript变量,以便与内联编辑或其他类似行为。
就像其他人所说的那样,将其放置在结束体 html标签之前。
前几天,我们接到许多客户的电话,抱怨他们的网站速度非常慢。我们在本地访问了他们,发现他们花了20到30秒来加载单个页面。考虑到服务器性能不佳,我们登录了-但是Web和sql服务器的活动均为〜0%。
几分钟后,我们意识到外部站点已关闭,我们正在将其链接至Javascript跟踪标签。这意味着浏览器正在点击站点头部的script标签,并等待下载script文件。
因此,至少对于第三方脚本/外部脚本,我建议将其作为页面的最后内容。然后,如果它们不可用,浏览器将至少加载该页面直到该点为止-并且用户将忽略它。
如果您想修改脚本的位置,YSlow是一个很棒的工具,可以在改善或损害性能的情况下为您提供风味。将javascript放在某些文档位置确实可以缩短页面加载时间。
不,不应该在之后,</html>
因为那将是无效的。放置脚本的最佳位置就在</body>
这主要是因为大多数浏览器在评估您提供的脚本时都会停止呈现页面。因此可以在页面的任何位置放置非阻塞代码(我主要考虑的是将功能附加到onLoad
事件的事物,因为事件绑定是如此之快以至于可以自由释放)。这里的一个致命杀手是在页面的开头放置一些广告服务器脚本,该脚本可以阻止在广告完全下载之前加载任何页面,从而使页面加载时间激增