为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前？
你这个问题问得很有意思，也确实是很多开发者在实践中会遇到的一个点。简单来说，把 `script` 标签放在 `` 标签的结束标签 `` 之后，`` 标签之前，是一种非常常见的做法，而且背后有着重要的原因，主要关乎页面的加载和渲染效率，以及用户体验。
想象一下，当浏览器开始解析你编写的 HTML 文档时，它就像一个流水线工人，从上到下，一行一行地读取和处理。遇到 ``，它知道这是文档的开始；遇到 ``，它知道这里面是一些页面的元信息，比如标题、字符集、样式表的链接等等，这些信息在渲染页面内容之前可能就需要被处理，但它们本身不会直接显示在屏幕上。
然后，到了 ``。浏览器开始逐一解析 `` 里的内容，比如 `
浏览器在解析到那个 `script` 标签时，它会暂停当前 HTML 的解析和渲染，转而去下载并执行这部分 JavaScript 代码。为什么会暂停呢？因为 JavaScript 有可能去“操作”页面上的元素，比如修改某个 `div` 的内容，或者添加一个按钮。如果浏览器还没解析到那个它想要操作的元素，JavaScript 就已经开始执行了，那就会出错，或者产生非预期的结果。所以，浏览器为了保证代码的正确性，不得不停下来，等 JavaScript 执行完毕。
想象一下，你的页面上有大量的文本、图片，这些内容是用户最关心的，是构成页面主体信息的部分。如果一个 JavaScript 文件非常大，或者网络传输速度比较慢，那么在下载和执行这个 JavaScript 的过程中，用户就会长时间地看到一个空白的页面，或者一个只加载了一部分的页面。这无疑会大大降低用户体验，让用户觉得网页加载很慢，甚至会让他们失去耐心而离开。
所以，为了避免这种“阻塞”的情况，聪明的做法是将 `script` 标签放到 `` 的末尾。这样，浏览器可以先一口气解析和渲染完 `` 里的所有 HTML 内容，把页面的基本结构和可见内容都呈现给用户。当所有 HTML 都加载完毕，页面基本成型之后，浏览器才会去下载和执行 `script` 标签里的 JavaScript。
这样做的好处有几点：
1. 快速看到内容，提升用户感知速度： 用户看到页面的内容，即使 JavaScript 还没有完全加载，他们也能开始阅读、浏览，这就给他们一种“页面加载很快”的错觉，或者说，至少他们在等待 JavaScript 执行的时候，不是在盯着一个空白屏幕。
2. JavaScript 有机会操作已存在的 DOM： 当 `script` 标签在 `` 结束标签之前时，它所指向的 JavaScript 代码就有足够的时间去访问和操作页面上已经存在的 DOM 元素。比如，你可能会写代码来给某个按钮添加点击事件，如果这个按钮已经渲染在页面上了，JavaScript 就可以很顺利地找到它并绑定事件。如果 JavaScript 在按钮渲染之前就尝试去操作它，就会报错。
3. 避免潜在的渲染错误： 如果 JavaScript 在页面渲染过程中就试图去修改某些元素的样式或者结构，这可能会导致页面的闪烁或者出现不正确的渲染效果。把 `script` 放在最后，可以确保 HTML 的渲染是相对完整的，再由 JavaScript 进行后续的动态操作。
当然，也有一些例外情况。比如，有些 JavaScript 是必须在页面渲染之前就执行的，用来设置一些全局的变量或者进行一些初始化操作。对于这种情况，通常会将 `script` 标签放在 `` 里，但会加上 `defer` 或 `async` 属性。
`defer` 属性会告诉浏览器，这个脚本可以延迟执行，直到 HTML 文档完全解析完毕之后，并且会按照它们在 HTML 中出现的顺序来执行。
`async` 属性则表示脚本可以异步下载，下载完成后立即执行，但执行时会阻塞 HTML 的解析。
但对于大多数不影响初始页面渲染的脚本，比如用于增强交互、发送统计数据、或者操控已经加载好的 DOM 元素的脚本，把它们放在 `` 结束标签之前，始终是提升页面加载速度和用户体验的稳妥之道。这是一种在浏览器工作机制下，为了更有效率地传递信息和提供互动而形成的约定俗成的最佳实践。
想象一下，当浏览器开始解析你编写的 HTML 文档时，它就像一个流水线工人，从上到下，一行一行地读取和处理。遇到 ``，它知道这是文档的开始；遇到 ``，它知道这里面是一些页面的元信息，比如标题、字符集、样式表的链接等等，这些信息在渲染页面内容之前可能就需要被处理，但它们本身不会直接显示在屏幕上。
然后，到了 ``。浏览器开始逐一解析 `` 里的内容，比如 `
` 标题、`
` 段落、`` 图片等等。这些内容是我们要呈现在用户眼前的，是页面的“骨架”和“血肉”。
现在，如果一个 `script` 标签，里面写着一堆 JavaScript 代码，被放在 `
浏览器在解析到那个 `script` 标签时，它会暂停当前 HTML 的解析和渲染，转而去下载并执行这部分 JavaScript 代码。为什么会暂停呢？因为 JavaScript 有可能去“操作”页面上的元素，比如修改某个 `div` 的内容，或者添加一个按钮。如果浏览器还没解析到那个它想要操作的元素，JavaScript 就已经开始执行了，那就会出错，或者产生非预期的结果。所以，浏览器为了保证代码的正确性，不得不停下来，等 JavaScript 执行完毕。
想象一下，你的页面上有大量的文本、图片，这些内容是用户最关心的，是构成页面主体信息的部分。如果一个 JavaScript 文件非常大，或者网络传输速度比较慢，那么在下载和执行这个 JavaScript 的过程中，用户就会长时间地看到一个空白的页面，或者一个只加载了一部分的页面。这无疑会大大降低用户体验，让用户觉得网页加载很慢，甚至会让他们失去耐心而离开。
所以，为了避免这种“阻塞”的情况，聪明的做法是将 `script` 标签放到 `` 的末尾。这样，浏览器可以先一口气解析和渲染完 `` 里的所有 HTML 内容，把页面的基本结构和可见内容都呈现给用户。当所有 HTML 都加载完毕，页面基本成型之后，浏览器才会去下载和执行 `script` 标签里的 JavaScript。
这样做的好处有几点：
1. 快速看到内容，提升用户感知速度： 用户看到页面的内容，即使 JavaScript 还没有完全加载，他们也能开始阅读、浏览，这就给他们一种“页面加载很快”的错觉，或者说，至少他们在等待 JavaScript 执行的时候，不是在盯着一个空白屏幕。
2. JavaScript 有机会操作已存在的 DOM： 当 `script` 标签在 `` 结束标签之前时，它所指向的 JavaScript 代码就有足够的时间去访问和操作页面上已经存在的 DOM 元素。比如，你可能会写代码来给某个按钮添加点击事件，如果这个按钮已经渲染在页面上了，JavaScript 就可以很顺利地找到它并绑定事件。如果 JavaScript 在按钮渲染之前就尝试去操作它，就会报错。
3. 避免潜在的渲染错误： 如果 JavaScript 在页面渲染过程中就试图去修改某些元素的样式或者结构，这可能会导致页面的闪烁或者出现不正确的渲染效果。把 `script` 放在最后，可以确保 HTML 的渲染是相对完整的，再由 JavaScript 进行后续的动态操作。
当然，也有一些例外情况。比如，有些 JavaScript 是必须在页面渲染之前就执行的，用来设置一些全局的变量或者进行一些初始化操作。对于这种情况，通常会将 `script` 标签放在 `` 里，但会加上 `defer` 或 `async` 属性。
`defer` 属性会告诉浏览器，这个脚本可以延迟执行，直到 HTML 文档完全解析完毕之后，并且会按照它们在 HTML 中出现的顺序来执行。
`async` 属性则表示脚本可以异步下载，下载完成后立即执行，但执行时会阻塞 HTML 的解析。
但对于大多数不影响初始页面渲染的脚本，比如用于增强交互、发送统计数据、或者操控已经加载好的 DOM 元素的脚本，把它们放在 `` 结束标签之前，始终是提升页面加载速度和用户体验的稳妥之道。这是一种在浏览器工作机制下，为了更有效率地传递信息和提供互动而形成的约定俗成的最佳实践。
网友意见
Google并没有把<script>插入在</body>之后，而只是没有写</body>和</html>闭合标签。 【这样做是符合标准的。不仅是html5标准，从第一个HTML正式标准HTML 2.0开始，这样做都是允许的。相反，在</body>之后插入其他元素，从HTML 2.0起就是不合标准的。】
新浪微博确实有在</body>之后输出<script>。
新浪微博所用的doctype是XHTML 1.0，但是其response的content type头并没有用XHTML mimetype，所以浏览器仍然会按HTML语法进行parsing。【顺便说一句，虽然新浪微博用了XHTML 1.0 DTD，但是其实际内容连well-formed也没有做到，是典型的挂羊头卖狗肉的XHTML。新浪的前端同学们应该检讨一下啊！当然了，腾讯微博也是用XHTML 1.0的DTD，并且也不是well-formed的，跟新浪微博是难兄难弟啊！如果说一定要较个高下，那企鹅还是略胜一筹——其网页出现第一个解析错误的行数更靠后一点。】
按照HTML5标准中的HTML语法规则，如果在</body>后再出现<script>或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。
总之，这种写法虽然也能work，但是并没有带来任何额外好处，实际上出现这样的写法很可能是误解了“将script放在页面最末端”的教条。所以还是不要这样写为好。
【补充】
有同志说因为新浪微博使用bigpipe，所以“从直觉触发，为了避免浏览器出现未知异常，应该在首次吐出的页面框架中闭合body”。但是这个逻辑上说不通。因为在body以外写script也可能存在其他异常嘛。有什么理由能让开发者推断出后者会更安全呢？实际上在没有充分测试的前提下，如果要进行推断，那么可以推断出后者的风险更大。
第一，这是不合标准的行为，而且从有HTML标准以来都是不合标准的，因此浏览器实现不一致或者在这种情况下有bug的风险显然更大。
第二，虽然将<script>写在</body>之后，但最终的DOM树里，<script>元素还是会成为body的子节点，这一点很容易在firebug等调试器里验证。既然如此，如果将<script>写在</body>之前会有问题，你又如何保证写在之后（并在DOM里又变成了和写在之前一样的结构）就没有问题？
类似的话题
-
你这个问题问得很有意思，也确实是很多开发者在实践中会遇到的一个点。简单来说，把 `script` 标签放在 `` 标签的结束标签 `` 之后，`` 标签之前，是一种非常常见的做法，而且背后有着重要的原因，主要关乎页面的加载和渲染效率，以及用户体验。想象一下，当浏览器开始解析你编写的 HTML 文档时............. -
在HTML的世界里，你可能会想当然地认为，既然``这样的标签可以用自闭合的方式书写（例如``），那么`script`标签是不是也能如法炮制，写成``？答案是，不能，至少不能按照你期望的那样工作。这背后涉及到HTML解析器如何理解和处理这些标签，以及`script`标签的特殊性。首先，我们得明白，HT.............
-
“怪物屋”（Monster House）这个称呼并非东亚地区普遍使用或官方认可的称呼。在一些特定的语境下，尤其是在讨论某些文化现象、社会问题或地缘政治时，可能会有人用这个比喻来形容东亚。要理解为什么有些人可能会使用这样的比喻，我们需要深入探讨一些可能导致这种看法的原因。这通常是基于一种负面的、夸张的.............
-
将资本的投入再生产称为“剥削”是源自马克思主义的理论，核心在于对剩余价值的分析。要理解为什么这个过程会被称为剥削，我们需要深入探讨马克思的劳动价值论和资本主义生产的内在逻辑。核心概念：劳动价值论与剩余价值1. 劳动是价值的唯一源泉： 马克思认为，在资本主义社会中，一切商品的价值（其交换价值）最终都.............
-
你这个问题很有意思，问到了历史叙事中的一个关键点：为什么我们称呼那个长达三百多年的时期为“宋朝”，而不是“辽朝”呢？这背后涉及历史的复杂性、朝代定义的标准以及后世评价的侧重点。要理解这个问题，我们得先梳理一下那个时期的基本格局： 辽朝（9161125）：由契丹族建立，占据了中国北部和东北部的大片.............
-
要把上海叫做“魔都”，这事儿说来话长，得从头说起。这可不是什么官方的封号，而是民间给它起的绰号，一叫就叫了好几十年，而且还越来越响亮。你想想，一个城市能被叫做“魔都”，肯定是有它特别的地方，不是随便什么地方都能担此重任的。这“魔都”的说法，其实最早是源自于一部日本的小说。上世纪二十年代吧，有一个叫大.............
-
哈哈，这个问题很有意思，这其实是一个利用了声音的“谐音梗”和“倒放梗”组合而成的脑洞。让我来给你拆解一下，为什么“一把石手”倒放会变成“我是傻逼”。首先，我们得明白，语音倒放并不是一种完美的、可逆的过程。人说话的声音是由很多复杂的声波组成的，而且在说每个字的时候，声带的振动、口腔的形状、气流的控制等.............
-
要说高中语文课本第一篇选《沁园春·长沙》，这背后可不是随随便便定的，里面藏着挺多学问，也确实是花了不少心思。它作为开篇之作，承载的意义绝不仅仅是认识一位伟大的文学家，更是为整个人生旅程定下了一个基调。首先，从时代意义和教育目标上来说，把它放在课本第一篇，就是想一开始就抓住学生的眼球，让他们感受到文字.............
-
在海军指挥体系中，将巡洋舰作为驱逐舰队的旗舰，这背后可不是简单的“人多力量大”或者“谁更威风”就能决定的，而是由一整套复杂的作战需求、技术优势和历史演变共同促成的。要理解这一点，咱们得把这个问题的根源刨一刨，从头说起。首先，咱们得弄明白巡洋舰和驱逐舰各自扮演的角色。驱逐舰，顾名思义，它的主要职责是“.............
-
“具象化”这个词，在建筑设计语境下，常常带有那么点儿微妙的贬义，好像一提起它，就能联想到那些过于直白、缺乏想象力的“仿生”建筑，或者把某种象征意义生硬地塞进一个实体空间里。为什么会这样？这背后其实涉及到建筑作为一种艺术和技术的交叉学科，它与抽象、象征、以及我们对空间的体验之间错综复杂的关系。首先，我.............
-
好的，咱们来聊聊为什么给有蹄类动物分“偶蹄目”和“奇蹄目”，而不是按蹄子数量直接分成“一蹄目”、“二蹄目”、“三蹄目”什么的。这事儿说起来可不是随便分的，里面藏着不少生物演化的智慧。首先得明白，生物分类不是随便按个位数数的。咱们给动植物起名字、分门别类，是为了更好地理解它们之间的亲缘关系和演化历史。.............
-
遇到过这种情况的朋友，可能都会感到一头雾水：明明把系统内核镜像文件好好地放到了U盘里，想着开机就能通过BIOS引导，结果电脑却愣是不识别，甚至直接跳过了U盘启动项，直接进到了现有系统。这究竟是怎么回事？别急，咱们一点一点来捋清楚。首先，得明确一点，咱们电脑的BIOS（或者现在更新一点的UEFI固件）.............
-
这事儿啊，得从几个方面掰扯掰扯。你把一根直的铁条随便一弯，那它就是个弯的铁条，弹不了多大的劲儿。但你要是把它做成弹簧那个螺旋劲儿的模样，那就不一样了，弹力一下子就上来了，而且还能弹好几回。这中间的奥妙，主要就藏在材料本身的性质和弹簧的特殊结构这两大块。一、 铁这种材料的“脾气”：韧性是关键咱们得先说.............
-
北洋水师的全军覆没，这可不是小事儿，它直接被看作是洋务运动的“判死令”，标志着这场轰轰烈烈的改革彻底栽了跟头。要说为啥这么说，咱们得掰开了揉碎了好好聊聊。首先，你得明白洋务运动的“初心”。那时候，咱们国家被列强欺负得够呛，李鸿章那帮人一看，不行啊，得学人家点儿东西，不然这日子没法过了。他们最开始想学.............
-
“工业革命”这个词，一说出口，仿佛自带一种魔力，让人联想到蒸汽滚滚、机器轰鸣、烟囱高耸的宏伟景象。而提到欧洲的工业革命，更是被描绘成人类文明的一次飞跃，直接将世界带入了现代。咱们老祖宗呢？特别是明朝那会儿，也不是个傻子，中国人也不是天生就对新奇玩意儿不感兴趣。那为什么，当欧洲人一头扎进蒸汽机的海洋时.............
-
关于恩施的归属问题，也就是为什么最终划归湖北而非重庆，这涉及到一段相当长的历史演变过程，并且其中掺杂着地理、民族、经济、行政管理等多种因素的考量。要把这个问题讲透，咱们得从头说起。首先，咱们得明白恩施这地方在哪儿。恩施土家族苗族自治州，位于湖北省西南边陲，与重庆市接壤。它的地理位置就很有意思，地处湘.............
-
将《大学》和《中庸》从《礼记》中独立出来，并将其提升到与《论语》《孟子》并列的“四书”地位，这绝非偶然，而是背后蕴含着深刻的历史变迁和思想发展。这背后隐藏着统治者、学者们对于儒家思想的重新解读、整合与运用，其用意绝非仅仅是“抽出来”那么简单，而是带有明确的政治、文化与教育目的。一、历史的脉络：从《礼.............
-
把喜马拉雅山分水岭作为边界，绝对是个大错特错的主意，这简直是为麻烦事埋下了伏笔。要说清楚为什么，得从地理、历史、文化和实际操作这几个层面掰开了揉碎了讲。一、 地理上的“不可能三角”首先，喜马拉雅山本身就不是一个规整的直线，它是一条曲折绵延的山脉，横跨了五六个国家，地理环境极其复杂。把如此庞大的山体作.............
-
你这个问题问得太有意思了！很多人都有过这种经验，洗车、浇花或者在家里玩水的时候，都会下意识地把水管的出水口捏一捏，然后惊奇地发现，水柱一下子变得又细又远，好像威力倍增了一样。这背后其实藏着一些很有趣的物理原理。咱们一步步来聊聊，为什么这么做能让水流“跑得更远”。核心原理：压强增大，速度加快（伯努利原.............
-
理解您提出的关于宠物狗待遇和食用狗肉之间存在认知差异的问题。这个问题确实涉及到一个复杂的文化、伦理以及动物福利的讨论。下面我将尝试详细阐述一下，并尽量避免生硬的AI痕迹，用更贴近日常的语言来解释。首先，我们来聊聊为什么给宠物狗“阉了”（绝育）、“砍掉尾巴”（通常是指断尾，但现在很多地区已经禁止这种做.............
本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等
© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有