简体繁体 English

JavaScript文件包含。我不应该联系 <head> ？

[英]JavaScript file inclusion. Should I not link in <head>?

原文 2010-12-14 18:03:01 8 5 javascript/ dom/ application-structure

I'm watching Douglas Crockfords " Theory of the DOM " and he mentioned that the location of my script tags can greatly affect the load time of my applications. 我正在观看Douglas Crockfords的“ DOM理论 ”，他提到我的脚本标签的位置会极大地影响我的应用程序的加载时间。 Furthermore, he asserts that a script tag should be included as far towards the bottom of the document body as possible. 此外，他断言脚本标签应尽可能远离文档主体的底部。

Is this accurate? 这准确吗？

OR 要么

Is this video out of date? 这段视频是否已过期？ (which he actually sites as a reason he didn't lecture on the DOM sooner). （他实际上将网站作为他没有尽快讲授DOM的原因）。

5 个解决方案

Google agrees with Crockford: 谷歌同意克罗克福德：

Yahoo! 雅虎 as well: 以及：

Best Practices for Speeding Up your Website (Section "Put Scripts at the Bottom") 加速网站的最佳实践（“将脚本置于底部”部分）

And other SO users agree as well: 其他SO用户也同意：

Is "Put Scripts at the bottom" correct? “将脚本置于底部”是否正确？

Files included in the header are loaded before the rest of the page even begins loading. 标题中包含的文件在页面的其余部分开始加载之前加载。 It's recommended that you load non-essential files as close to the bottom of the page as possible so the rest of the page can be loaded beforehand. 建议您尽可能将非必要文件加载到页面底部，以便可以预先加载页面的其余部分。

There are some JS libraries (such as LABjs) that you can load in the header instead. 有些JS库（例如LABjs）可以在头文件中加载。 They then allow you to load all of your other JS assets asynchronously and provide a callback so the rest of your code can execute when you know your JS assets have been loaded. 然后，它们允许您异步加载所有其他JS资产并提供回调，以便在您知道已加载JS资产时执行其余代码。

You can also use http://labjs.com/ . 您也可以使用http://labjs.com/ 。

As stated in the project's page: 如项目页面所述：

LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions. LABjs（加载和阻止JavaScript）是Getify Solutions支持的开源（MIT许可证）项目。 The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. LABjs的核心目标是成为一个通用的，按需JavaScript加载器，能够随时从任何位置加载任何JavaScript资源到任何页面。 Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site's performance. 使用LABj加载脚本可减少页面加载期间的资源阻塞，这是优化站点性能的简单有效方法。

LABjs by default will load (and execute) all scripts in parallel as fast as the browser will allow. 默认情况下，LABjs将以浏览器允许的速度并行加载（并执行）所有脚本。 However, you can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. 但是，您可以轻松指定哪些脚本具有执行顺序依赖性，LABj将确保正确的执行顺序。 This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources. 这使得LABjs几乎可以安全地用于任何JavaScript资源，无论您是否控制/托管它，以及它是独立的还是更大的资源依赖树的一部分。

Using LABjs will replace all that ugly " tag soup" -- that is all the tags that commonly appear in the or end of the of your HTML page. 使用LABjs将取代所有丑陋的“标签汤” - 这是通常出现在HTML页面的末尾的所有标签。 The API is expressive and chaining, to let you specify which scripts to load, and when to wait ("block"), if necessary, for execution before proceeding with further execution. API具有表现力和链接性，允许您指定要加载的脚本，以及何时等待（“阻止”）（如有必要）执行，然后再继续执行。 The API also easily allows inline code execution coupling (think: inline tags). API还可以轻松地允许内联代码执行耦合（想想：内联标记）。

LABjs is now privileged to benefit from collaboration with Steve Souders, and is aiming to be the single best solution for optimized, flexible, general script loading available. LABjs现在很荣幸能够与Steve Souders合作，并致力于成为优化，灵活，通用脚本加载的最佳解决方案。

Well, it's correct. 嗯，这是对的。 Unless you use something like 'head.js' which loads you javascript files in parallel. 除非你使用像'head.js'这样的东西并行加载你的javascript文件。 Oh, and, some scripts have to be before the content. 哦，并且，一些脚本必须在内容之前。 For example, the html5-shiv script. 例如，html5-shiv脚本。

http://headjs.com/ http://headjs.com/

I too have heard that JavaScript should be included at the end of the page to "hopefully" ensure the DOM has loaded. 我也听说过应该在页面末尾包含JavaScript以“希望”确保DOM已加载。 I believe I read this in the Yahoo documentation a while back. 我相信我在雅虎文档中读过这篇文章了。