在处理完成之前，在</ head>标记之前编写<脚本defer>比在</ body>标记之前编写<脚本defer>快吗？
在处理完成之前，在</head>标记之前编写<script defer>比在</body>标记之前编写<script defer>快。
<script defer>是HTML5中引入的属性，用于延迟脚本的执行。当浏览器解析到<script defer>标签时，会继续解析HTML文档的同时异步下载脚本文件，并在HTML文档解析完成后按照顺序执行脚本。而且，多个<script defer>标签的脚本会按照它们在HTML文档中的顺序依次执行。
相比之下，在</body>标记之前编写<script defer>会导致浏览器在下载脚本文件时阻塞HTML文档的解析和渲染，直到脚本文件下载完成并执行完毕后才会继续解析和渲染HTML文档。这可能会导致页面加载速度变慢，用户体验下降。
因此，推荐在处理完成之前，在</head>标记之前编写<script defer>，以提高页面加载性能和用户体验。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
- 腾讯云云安全中心（SSC）：https://cloud.tencent.com/product/ssc
- 腾讯云云监控（Cloud Monitor）：https://cloud.tencent.com/product/monitor
相关·内容
大家好，我是JavaScript和web开发的新手。我最近遇到了一个关于脚本标记位置的问题。我知道这是一个常见的问题，我在stackoverflow上看过一些答案，在google上也看过这个风格指南。但是我对这个问题仍然不是很清楚。
例如，我有一个包含外部脚本js文件的i html页面，如下所示
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></ti
浏览 0提问于2018-07-13得票数 0
我编写了以下HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="j1.js" **defer**></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E
浏览 0提问于2020-09-09得票数 0
截至2017年7月，从HTML页面调用外部Javascript文件的最佳实践是什么？
1)在HEAD中使用DEFER属性：
<head>
<title></title>
<script src="script.js" defer></script>
</head>
2)在HEAD中不带DEFER属性，并将所有js代码放在一个函数中，该函数在DOM加载后触发。
<head>
<title></title>
<script src=
浏览 0提问于2017-07-17得票数 0
在下面的脚本中，我得到了一个“未定义的ReferenceError: jQuery未定义”错误，只要延迟属性中包含了jQuery.js。同样，调用jQuery对象的内联脚本也会被推迟。
为了加快页面呈现速度，我尝试推迟脚本。
是否可以在没有这样的错误的情况下延迟jQuery？
未定义的ReferenceError: jQuery未定义
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="te
浏览 0提问于2013-06-21得票数 3
2回答
下面的片段摘自。这个片段有趣的部分是，onload事件处理程序在<head>中的两个<script async>中是在<body>中稍后定义的。异步脚本中的onload事件是否仅在解析<body>之后触发？有任何规格提供这样的保证吗？或者，这段代码只有在隐含的假设下是正确的，即<head>中的这两个特定脚本需要很长时间才能获取和执行？
<!DOCTYPE html>
<html>
<head>
<script async defer src="https://apis.google
浏览 14提问于2022-05-03得票数 2
回答已采纳
我试图在head部分而不是body中包含我的脚本标记，但是我意识到在一些教程中，脚本标记是通过在脚本标记中使用单词defer来放置在头上的。我真的不知道为什么
浏览 2提问于2022-03-23得票数 -1
具有以下代码：
<html>
<head>
<script>
function elem_onload() {
console.log("elem_onload");
};
</script>
</head>
<body onload="elem_onload()">
<scr
浏览 3提问于2016-01-12得票数 4
回答已采纳
我为这样的dart应用程序设置了我的index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>basic_app</title>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
浏览 3提问于2017-01-14得票数 1
回答已采纳
我已经在我的jquery脚本中添加了defer属性来提高网页性能，但是现在我得到了错误$ is not defined。当页面加载时，我需要执行JS代码，所以我使用jQuery.ready事件，但当使用defer时，它不起作用。
<head>
<script defer="defer" src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<scr
浏览 2提问于2012-10-24得票数 3
回答已采纳
3回答
JavaScript延迟
、、、
在结束<body>标记之前放置<script>标记与将它们放在<head>部分并指定defer="defer"属性是相同的吗？
谢谢。
浏览 3提问于2011-04-20得票数 2
回答已采纳
据我所知，如果我们在脚本标记上设置defer关键字，它不会阻止页面的其余部分呈现，页面的其余部分将呈现，就在窗口加载事件发生之前，脚本标记将被执行。
我有一个简单的HTML，它有一个带有延迟属性的脚本标记。在脚本标记中，我有一个很长的循环，因此需要时间，而在这个脚本标记下面，我也有一个段落标记。理想情况下，当我重新加载浏览器时，应该呈现我的所有内容，然后应该执行脚本，但最后一段并不像预期的那样提前呈现。
这是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="
浏览 4提问于2020-07-29得票数 0
我在这里读到一篇文章：
它说我应该使用类似这样的东西来加载javascript：
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)window.addEventLis
浏览 1提问于2016-11-11得票数 3
考虑以下情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="js/heavy_js_file.js" defer></script>
<script src="js/heavy_js_file2.
浏览 0提问于2017-05-20得票数 3
我刚刚用Javascript加载了屏幕，我想知道HTML文档的哪一部分必须放置。我是说在结束标签之前还是在里面？有些文件说必须把它放在上面，因为它必须在任何内容之前加载，但即使我以前说过，它似乎也很好用。
你能告诉我HTML文档的哪一部分我“必须”或“最好”放置脚本吗？是否与“延迟”或“不延迟”有分别？
window.addEventListener('load', function () {
document.querySelector('#js-loading').classList.add('hide');
});
.loadi
浏览 2提问于2019-04-14得票数 0
回答已采纳
11回答
我有几个关于属性async & defer for <script>标记的问题，据我所知，这些属性只适用于HTML5浏览器。
我的一个站点有两个外部JavaScript文件，目前位于</body>标记的上方；第一个是来自谷歌的，第二个是本地的外部脚本。
关于现场负荷速度
将async添加到页面底部的两个脚本中有什么好处吗？
将async选项添加到两个脚本并将它们放在<head>页面的顶部有什么好处吗？
这是否意味着它们会在页面加载时下载？
我认为这会导致HTML4浏览器的延迟，但是它会加速HTML5浏览器的页面
浏览 11提问于2012-05-29得票数 751
回答已采纳
有没有办法保留‘延迟’或内联混合的脚本的执行顺序？
例如。考虑以下场景：
<head>
<script src="/polyfills.js" />
<script>
// Small inline script that needs polyfills to work
</script>
<script src="/feature1.js" defer>
<script src="/feature2.js" defer>
</head>
浏览 3提问于2016-10-23得票数 4
1回答
在浏览器请求页面下方的各种资源之前，我正在尝试设置一些cookie(通过javascript)。以下代码在Chrome/Firefox中有效，但在IE中不起作用：
some_page.html
<!doctype html>
<head>
<script>
var hash=new Date();
document.cookie='hash=' + hash + ';';
console.log("From page: " + hash);
</script>
<scr
浏览 0提问于2011-09-23得票数 1
回答已采纳
我创建了一个基于当前请求区域设置加载内容的脚本。有点像
class ScriptsTagLib {
static namespace = "my"
def loadLangInfo = { attrs ->
Locale locale = RequestContextUtils.getLocale(request)
r.script() {
out << '$(function(){ loadLangInfo("'+locale.language+'") });'
}
浏览 7提问于2012-11-19得票数 1
回答已采纳
2回答
具有以下代码：
<html>
<head>
<script>
function elem_onload() {
console.log("elem_onload");
};
</script>
</head>
<body onload="elem_onload()">
<scr
浏览 4提问于2016-01-12得票数 5
我有一个角12的应用程序，我试图与LTR和RTL语言(例如英语和阿拉伯语)一起工作，这些语言可以由最终用户在使用应用程序时选择和应用。引导(我用于UI样式)要求我在HTML元素上设置dir属性，并在要显示阿拉伯文本时从原始的LTR文件中引用一个单独的RTL文件。
我想我可以像这样设置我的index.html：
<app-root></app-root>
然后让我的app-component.html生成HTML、HEAD、LINK和BODY等元素，如下所示：
<!doctype html>
<html [lang]="lang" [di
浏览 12提问于2022-01-27得票数 0
1回答
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8">
</head>
<body>
works
<script defer>
alert()
</script>
</body>
</html>
在Chrome和Firefox中，这个页面将显示"works“，然后显示警报框，但在safari 11.1中，它将是空白的，然后显示警报框。
在safari中做脚本块渲染吗？
浏览 3提问于2018-04-17得票数 0
老实说，我不知道为什么这不起作用。我正在阅读面向网络开发人员的专业JavaScript第三版，并尝试示例。脚本不是应该在html标记完成后立即加载吗？
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="test/javascript" defer src="js/example1.js"></script>
<script type="
浏览 0提问于2013-06-10得票数 1
回答已采纳
1回答
由于浏览器从上到下读取文件，如果js文件位于底部，那么使用延迟属性有什么意义？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>some title</title>
</head>
<body>
<h1>hello world</h1>
<img src=">
<script d
浏览 5提问于2020-11-18得票数 0
回答已采纳
我理解分散在html代码中的内联javascripts (如下面的示例)是糟糕的
<html>
<head>
</head>
<body>
<p> Foo <script></script></p>
</body>
</html>
但是，在编写了一段时间代码之后，理解在文档末尾加载Javascripts是最好的方法。我确实看到了很多在文档末尾加载脚本的站点，这样做的方式如下：
<html>
<head>
</he
浏览 4提问于2016-09-04得票数 1
回答已采纳
例如：
<body>
...all content is above the script...
<script src="https://foo/bar.js" defer></script>
</body>
如果我们从脚本标记中删除defer重要吗？通过将脚本放在body标记的末尾，已经延迟了脚本的执行，所以上面的代码应该与下面的代码片段相同，对吗？
<body>
...all content is above the script...
<script src="https://fo
浏览 1提问于2022-06-07得票数 3
3回答
我如何转换这个脚本，使其在加载时触发，而不是使用按钮单击？我正在试着理解这一点，但它并没有被理解。谢谢
<script type="text/javascript">
jQuery(function($){
// unordered list
$('button.item').click(function(){
$('ul').foo();
});
});
</script>
</head>
<body>
<ul>
<l
浏览 0提问于2012-10-23得票数 0
回答已采纳
在文档底部编写的代码总是在DOM准备好之后执行吗？
正在侦听文档的ready事件
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// code ..
浏览 4提问于2015-02-27得票数 0
1回答
有很多关于async和defer如何影响加载时间和外部脚本开始执行的文档，但我找不到任何提到脚本何时完成执行的文档。
例如，假设外部脚本定义函数one()、two()、three()和four()
<head>
…
<script async="async" src="…"></script>
…
</head>
<body>
…
<script> window.onload="one()" </script>
浏览 4提问于2020-06-25得票数 0
回答已采纳
TL；博士检查最后一段
我的场景：，我有以下文件：
app.css (在</head>之前添加html )
vendor.js (在</body>之前添加html )
app.js (在</body>之后添加html，在vendor.js之后添加)
正在我的html模板中添加上面的文件。在这种情况下， first make将无法请求下载vendor和app，必须先等待样式表被下载。那可不好。第二个，当DOM已经呈现为时，脚本将不必要地停止它来呈现第一个画图。
对于第二个，我要添加解决这个问题的defer。但是对于first，为什么我的d
浏览 5提问于2017-07-16得票数 3
早上好，我有这个代码
document.getElementById("button").onclick = function () {
document.getElementById("confirm").innerHTML = "Order Placed Cheack your email!";
document.getElementById("button").style.display = "none";
}
上面的代码在Firefox上运行，但当我在Chrome版本81.0.4044.13
浏览 33提问于2020-05-11得票数 1
回答已采纳
2回答
我正在加载由Google提供的第三方script元素：
var h = document.getElementsByTagName('head')[0];
var xml = '<script defer="true" src="https://apis.google.com/js/api.js"></script>';
h.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml'
浏览 2提问于2018-08-04得票数 1
回答已采纳
我最近开始使用pyscript，在标记中我只编写了一个print语句。在浏览器上，值打印，但只打印一秒钟，然后消失。我目前正在使用CDN来使用pyscript。有什么我需要注意的吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
浏览 3提问于2022-05-07得票数 2
1回答
我想用Vue & Laravel。为了避免不受样式限制的内容闪现，我想在Laravel中使用空间中的包。
然而，就我所理解的情况而言，只有当我将整个HTML代码放入一个app.vue文件中，而我的刀片最终只能是这样的时候，它才能起作用：
<html>
<head>
<title>My server side rendered app</title>
<script defer src="{{ mix('app-client.js') }}">
&l
浏览 1提问于2020-04-08得票数 0
我使用Firebase-CLI创建了一个应用程序，并编写了一个代码，以便在用户登录到另一个位置时重定向，而他没有这样做。但是当我尝试发球的时候，它就不起作用了
这是我的html代码
<!DOCTYPE html>
<html>
<head>
<title>JTM Check</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial
浏览 0提问于2019-05-17得票数 0
1回答
我做了一份报告，这件事发生了..
1.2JavaScript的page在初始页面加载过程中被解析。延迟解析JavaScript以减少页面呈现的阻塞。
https://www.youtube.com/yts/jsbin/player_ias-abcdefg/en_US/base.js (1.0MiB)
https://www.youtube.com/yts/jsbin/www-embed-player-vfll7K9A4/www-embed-player.js (93.7KiB)
https://js.stripe.com/v3/fingerprinted/js/shared-sdffdw93f
浏览 4提问于2020-02-20得票数 1
我的老板让我require一个脚本，但是把路径放到一个脚本标签上，比如：
<body>
<script defer src="<%= require.resolve('foo') %>"></script>
</body>
但是，它呈现的是<script defer=defer src=Kw5r>，而不是预期的<script defer=defer src="path-to-foo.js">。我可以导入这样的脚本吗？
注意:我对涉及document.createE
浏览 0提问于2019-09-11得票数 0
我想我快疯了，我所有的搜索都表明我做得很好，但我仍然得到了相反的结果。我有两个脚本。第一个是库(RecordRTC)，第二个是使用库的javascript。无论我做什么，我的脚本都是先加载的，然后才是库。我的浏览器一直在显示(在时间线上)这是真的，我的脚本一直显示错误"RecordRTC not defined“--我的脚本在加载之前调用了这个库。
下面是我使用的所有html代码。请派人来帮忙。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Recor
浏览 3提问于2015-06-22得票数 1
1回答
我有两个脚本，其中一个在p5画布上有一个动画，在另一个脚本上我对它做了一些操作。
脚本A- p5动画：
function setup() {
let canvas = createCanvas(640, 480);
canvas.id("vizCanvas");
// ...
}
function draw() {
// animation ...
}
脚本B-使用动画做一些事情：
const myCanvas = document.getElementById('vizCanvas');
doSomethingWithMyCanvas(myC
浏览 1提问于2020-12-29得票数 3
回答已采纳
如果外部脚本定义了HTML中引用的函数(例如，onclick=...)，则脚本应该位于<head>中，以便立即下载，使这些函数可供HTML使用：
<script src="/.JS/onclicks.js" />
如果外部脚本对HTML进行更改(例如，用class="special"修改所有内容)，那么它应该位于<body>之后，或者位于<head>中，并将执行推迟到所有HTML加载之后：
<script src="/.JS/highlight-special.js" defer="d
浏览 0提问于2020-03-25得票数 4
<script>
$(document).ready(function() {
$("#various2").fancybox({
'width': 800,
'height': 570,
'type':'iframe'
});
});
</script>
我在I
浏览 4提问于2011-09-26得票数 1
回答已采纳
1回答
请参阅：
Google在这里使用：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
我的问题是，为什么谷歌使用“延期”，因为在我看来，它在上面的脚本中没有做任何事情？
让我们比较一下这个(1)：
<script src="script.js" defer></script>
<
浏览 7提问于2017-11-02得票数 1
1回答
我在Google网页测试工具上运行我的网页，它建议我使用'defer‘或'async’属性来摆脱渲染阻塞JS。我的HTML是这样的：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Pa
浏览 15提问于2018-03-06得票数 0
我是javascript代码的新手。我的问题是在html外部插入javascript。当我在html中使用form标签时，我不得不在form标签之后写脚本代码，如果我在head tage或form标签之前写脚本代码，那么代码javascript将不起作用。请查看下面的详细信息。
我有textbox_message.js
var text = "i am just a box only";
var textid = document.getElementById("text_id");
var linkid = document.getElementById(&#
浏览 3提问于2014-04-16得票数 0
1回答
我正在尝试使用KineticJS，但遇到了这样的问题：
好了，在我的JavaScript文件的顶部区域，我得到了以下小花边新闻：
var cuin = '';
//...
var cuinShow = new Kinetic.Text({
x: 320,
y: 81,
text: '',
fontSize: 18,
fontFamily: 'Lucida Bright',
fill: 'black'
});
然后我有这个函数：
function updateText(){
cuinShow.setText(cu
浏览 0提问于2013-07-11得票数 0
回答已采纳
1回答
如何减少第三方代码在我的next.js应用程序中的影响？我正在使用谷歌分析和谷歌广告代码在我的网站上。而且我的表现也有问题。
_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
re
浏览 10提问于2022-03-13得票数 0
1回答
如果我运行yarn run build，那么HTMLWebpackPlugin将从一个模板文件中生成index.html，但是我的所有代码都会运行两次，因为脚本标记被添加了两次。
我的index.html模板文件：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini
浏览 3提问于2021-07-24得票数 1
回答已采纳
我在当地创建了一个Laravel5.6项目。
我有<script src="{{ asset('js/app.js') }}" defer></script>在<head>
在其中一种观点中，我试着
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#ddtype" ).change(function() {
alert( "
浏览 0提问于2018-03-28得票数 16
回答已采纳
我得去归档了。一个HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>JavaScriptSolution</title>
<script src='./script.js' charset='utf-8' defer='defer'><
浏览 5提问于2013-10-13得票数 0
1回答
我的意思是。以下列例子为例：
<!doctype html>
<html>
<head><title>test page</title></head>
<body>
Will this always be the first thing on the screen every time?
<script>document.write('Will this be 2nd?');</script>
<script async src
浏览 1提问于2012-12-14得票数 1
回答已采纳
1回答
我正在使用多个外部JavaScript文件-客户机/前端文件-我的Nuxt应用程序的设计( Nuxt通用模式，服务器端呈现+客户端导航)，将它们放在nuxt.config.js文件中。
nuxt.config.js
<script>
export default {
head () {
return {
script: [
{ src: '/scripts/jquery.min.js', body: true },
{ src: '/scripts/jquery.dropotron.min.js
浏览 0提问于2021-06-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
