0

我读过将大部分页面<script>放在<body>. 由于后果似乎不大，我想知道我是否有一个令人信服的理由来尝试它：页面加载速度。

我的问题是：如果 javascript 的其余部分出现在正文之后，那么 pre-body javascript 的执行速度会更快吗？或者换一种说法：下面的人造文档的加载速度是否比我将所有脚本都放在头部更快？

<html>
    <head>
         <script src="urgent-stuff.js"/>
    </head>
    <body>
         <p>Lots of great content</p>
    </body>
    <script src="not-so-urgent-stuff.js">
</html>

注意：我正在为我的网站（=移动应用程序）使用 jQueryMobile。该框架将整个站点放在一个文档中，并在显示页面之前使用主要基于元素“data-”属性的样式和交互来修饰每个页面的基本 HTML。jQM javascript 显然是进入 <head> 的紧急内容的一部分。jQueryMobile 有自己的“开始”事件，称为“pageinit”，它说它在常规 jQuery 中的常规“文档准备就绪”之前触发。

4

2 回答 2

4

文档本身不会在DomReady触发时加载任何“更快”，但文档和资产将在您之前加载，not-so-urgent-stuff.js使其看起来加载速度更快并立即提供内容。

将内容加载到浏览器的最快方法不是通过连续的脚本加载来阻止浏览器 - 任何时候从<script>标签调用脚本时，浏览器都必须获取资源并与任何其他内容串联执行。

您可以使用许多工具（例如 Yslow）将其可视化。Yslow 本身就如何优化文档中的内容放置提供了很好的资源。

http://developer.yahoo.com/yslow/

http://developer.yahoo.com/performance/rules.html

编辑：

在这个相关的堆栈线程Unobtrusive JavaScript: <script> 在 HTML 代码的顶部还是底部？

于 2012-03-27T13:25:38.787 回答
0

性能规则是尽可能多地延迟加载 js。

在较旧的浏览器中，下载 js 将阻止其他文件并行下载，并在下载时阻止 UI。

即使在现代浏览器上，js 的解析和执行也会停止渲染。

将js移到底部的目的之一就是延迟这个UI线程的工作。它还可以防止第三方破坏您的页面加载。

@souders 在这个话题上写了很多。

于 2012-03-27T18:00:28.673 回答