是否有关于如何加载 javascript 的一揽子规则。我看到人们说它现在应该放在页面的末尾。
想法?
将其放在文档末尾的想法是确保在尝试引用文档中的元素之前已下载文档的全部内容。如果首先加载 JavaScript,则代码可能会在文档尚未准备好时去寻找元素。
ready
jQuery 用这个函数解决了这个问题:
绑定要在 DOM 准备好被遍历和操作时执行的函数。
这可能是事件模块中包含的最重要的功能,因为它可以大大提高您的 Web 应用程序的响应时间。
还有一些性能考虑建议在页面底部包含 JavaScript文件- 这是因为下载 JavaScript 文件可能会阻止所有其他 HTTP 请求(对于图像、CSS 等),直到它完成。
那么有两种情况(至少)取决于你想要实现什么。如果您需要在页面加载之前或期间可用的脚本或脚本中包含的功能,例如函数库,那么您应该在 head 标记中加载 JavaScript 代码。如果您需要做一些需要仅在页面加载后才可用的资源(即 DOM 资源)的事情,那么您应该在页面底部加载脚本(这也可以使用 onDOMReady 事件解决已经在大多数 JavaScript 框架中可用)。还有一些性能问题可能会影响您的决定。例如,在某些情况下,在 head 标签中加载一个或多个脚本会减慢页面渲染速度,如果您可以为页面渲染提供基本功能,直到脚本完全正常运行,那么应该再次在底部加载一个或多个脚本。这或多或少是基于您需要做什么的决定。
没有规则:如果要先加载 Js,则将其放在头部。如果您希望它成为浏览器加载的最后一件事,请将其放在底部。
对于可以使用 JS 的网站,您可能希望将其放在顶部,在头部。对于降级良好的网站,您将关注 Yahoo! 建议并让页面呈现,然后加载脚本。
注意:这与在加载 DOM 之前或之后执行脚本无关。这个问题不是真正的问题,大多数时候您使用 onload 或 $.ready 等价物。这是关于文件实际加载的时间,而不是执行的时间。
如果您需要在文档仍在加载时使用 javascript 来运行一些特殊的逻辑,您可以将最少的代码放在顶部。但实际上,当今富 Web 应用程序中所有的 javascript 使用都需要在文档准备好之后,因此<script>
标签可以安全地放在</body>
.
这是一个非常相关的阅读:http: //developer.yahoo.com/performance/rules.html
当我部署到生产环境时,我喜欢将我的代码最小化到一个文件中。因此,在开发过程中,我为每个 JavaScript 类创建了一个文件,并将每个文件加载到头部(在CSS 文件之后)。由于我等待来自浏览器的事件表明 DOM 已准备就绪,因此我将 JS 文件放在唯一的 HTML/JSP 页面的头部。