首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

我应该在哪里将<script>标记放在HTML标记中？

作者：echo7111436 | 2023-09-01 09:12
如何解决《我应该在哪里将<script>标记放在HTML标记中？》经验，为你挑选了9个好方法。

在JavaScript文档中嵌入JavaScript时,放置

Welcome back, user

使用Javascript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

因为您的浏览器不知道my-script.js在下载和执行之前不会修改文档,解析器会停止解析.

过时的推荐

解决此问题的旧方法是将

具有async属性的脚本是异步执行的.这意味着脚本在下载后立即执行,同时不会阻止浏览器.
这意味着脚本2可以在脚本1之前下载并执行.

根据http://caniuse.com/#feat=script-async,94.57%的浏览器支持此功能.

延缓

具有defer属性的脚本按顺序执行(即第一个脚本1,然后是脚本2).这也不会阻止浏览器.

与异步脚本不同,延迟脚本仅在加载整个文档后执行.

根据http://caniuse.com/#feat=script-defer,94.59%的浏览器支持此功能.94.92%至少部分支持它.

关于浏览器兼容性的重要说明:在某些情况下,IE <= 9可能无序执行延迟脚本.如果您需要支持这些浏览器,请先阅读此内容!

结论

当前最先进的技术是将脚本放在标记中并使用async或defer属性.这样可以在不阻止浏览器的情况下尽快下载脚本.

好消息是,您的网站仍应在6%不支持这些属性的浏览器上正确加载,同时加快其他94%.

我很惊讶没有人引用谷歌的解释...... https://developers.google.com/speed/docs/insights/BlockingJS
为什么没有使用`async`和`defer`属性？我的意思是,我从互联网上查看了很多HTML资源,而且我没有在任何地方看到`async`和`defer`属性.......？
这个答案有误导性.现代浏览器在到达可能影响HTML的同步脚本标记时不会停止解析,它们只是停止呈现/执行,并继续乐观地解析以开始下载其他资源,如果没有HTML受到影响,可能会随后请求这些资源.
@Doug例如`document.write`在dom上运行.问题不是*如果*脚本操纵dom,而**当*它操作.只要所有dom操作在'domready`事件触发后发生,你就可以了.jQuery是一个库,因此不会 - 或者不应该 - 自己操纵dom.
我不清楚什么触及DOM,什么不是.你能澄清一下吗？在像jquery.js这样的东西上进行异步加载是否安全？
这篇文章现在已经3岁了.我猜浏览器支持现在应该超过90%？
这个答案也是反对的,[在脚本标签上使用`type`属性被认为是浪费](https://google.github.io/styleguide/htmlcssguide.html#type_Attributes).他们不需要,只是迂腐

2> Cammel..：

就在关闭身体标签之前,如上所述

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

把脚本放在底部

脚本引起的问题是它们阻止了并行下载.HTTP/1.1规范建议浏览器每个主机名并行下载不超过两个组件.如果您从多个主机名提供图像,则可以并行执行两次以上的下载.但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载.

如果这是最佳实践,为什么堆栈溢出包括中的所有脚本标记？:-P
在某些情况下,特别是在ajax重型站点,装载头部实际上可以加快加载时间.请参阅:http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/(请注意,"live()"函数在jquery中已弃用,但该文章仍适用于"on" ()"或"委托"功能).也可能需要加载以保证正确的行为,如@Hermant所指出的那样.最后,http://modernizr.com/docs/建议将其脚本放在中,原因在其网站上有解释.
@Hermant旧评论,但您可以默认禁用字段,然后在DOM完全加载时使用JS启用它们.这就是Facebook现在似乎在做什么.
同意这个概念及其解释.但是如果用户开始玩页面会发生什么.假设我有一个AJAX下拉列表,它会在页面向用户显示后开始加载,但在加载时,用户会点击它!如果"真正不耐烦"的用户提交表单怎么办？
刚用chrome测试过,检查一下是否还是一样.它是.您可以在此处检查浏览器的页面加载时间差异.http://stevesouders.com/cuzillion/

3> Salman A..：

非阻塞脚本标记可以放在任何地方:

async 脚本一旦可用就会异步执行

defer 文档完成解析后执行脚本

async defer 如果不支持async,脚本将回退到延迟行为

这样的脚本将在文档就绪后异步执行,这意味着你不能这样做:

或这个:

或这个:

或这个:

话虽如此,异步脚本提供了以下优势:

并行下载资源:
浏览器可以并行下载样式表,图像和其他脚本,而无需等待脚本下载和执行.

源顺序独立性:
您可以将脚本放在头部或主体内而不必担心阻塞(如果您使用的是CMS,则非常有用).执行顺序仍然很重要.

可以通过使用支持回调的外部脚本来规避执行顺序问题.许多第三方JavaScript API现在支持非阻塞执行.以下是异步加载Google Maps API的示例.

@elbow 99%的时间``script src = jquery.js>`后面跟着`$(function(){...})`块在页面的某个地方.异步加载并不能保证在浏览器尝试解析这些块时会加载jQuery,因此它会引发_ $未定义错误(如果从缓存加载jQuery,则可能无法获得错误).我回答了一个关于异步加载jQuery并保留`$(function(){...})`的问题.我会看看我是否能找到它,或者你可以看看这个问题:http://stackoverflow.com/q/14811471/87015
这是今天的正确答案 - 使用这种方法意味着更容易保持小部件自包含,不需要花哨的``包含逻辑.

4> orip..：

雅虎推出的标准建议!卓越的性能团队,是将

脚本标记应始终在正文关闭之前使用或在HTML文件中使用底部.

然后你可以在加载js文件之前先看到页面的内容.

如果需要,请检查:http: //stevesouders.com/hpws/rule-js-bottom.php

这实际上回答了这个问题.我想知道几乎所有发布的例子都没有给出"页面结尾"的正确视觉背景

8> cquezel..：

2019年的现代方法是使用ES6模块类型脚本。

默认情况下，模块是异步加载和延迟的。也就是说，您可以将它们放置在任何位置，它们将并行加载，并在页面加载完成后执行。

此处描述了脚本和模块之间的区别：

/sf/ask/17360801/

与脚本相比，模块的执行描述如下：

https://developers.google.com/web/fundamentals/primers/modules#defer

支持如下所示：

https://caniuse.com/#feat=es6-module



9> dkretz..：

传统(并且被广泛接受)的答案是"在底部",因为在任何事情开始执行之前,整个DOM都将被加载.

出于各种原因,有异议者从可用的练习开始,故意开始使用页面onload事件执行.

推荐阅读
devbox
echo7111436
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有