为什么script标签要放在body前，而不是head中？

最新推荐文章于 2022-03-05 10:52:08 发布
最新推荐文章于 2022-03-05 10:52:08 发布
阅读量6.2k 收藏 7
点赞数 7
分类专栏： 阅读笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40633159/article/details/79367099
版权

按照传统的做法，所有script元素都应该放在页面的head元素中，这种做法的目的就是把所有外部文件（包括css和JavaScript文件）的引用都放在相同的地方，可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面内容（浏览器在遇到body标记时才开始呈现内容）。

对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为避免这个问题，现代web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。


                                                                                            ——《JavaScript高级程序设计(第3版)》 12页


位于head块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载。


                                                                                                        ——《JavaScript DOM编程艺术(第2版)》 73页
Vian102512
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript标签在页面中的位置探讨
12-09
在制作网页的过程中，我们经常写类似下面的代码： [html] 代码如下: <html> <head> <title>Example HTML Page</title> [removed][removed] [removed][removed] </head> <body> <!– 这里放内容 –> </body> </html> <html> <head> <title>Example HTML Page</title> <scrip
获取body标签的两种方法
09-05
获取body标签的两种方法，有时候需要动态的在body中添加内容用得到。
JS代码放在head和body中的区别分析
12-10
那么有什么不同呢？先看一个例子： 一个二级级联动态下拉列表框，一级分类（即大类别）id=”vSort0″. 代码如下: <head> function changelocation(id) {…………} </head> <body><select class=”input1″ id=”vSort0″ name=”vSort0″ onChange=”changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);” style=”width:100px;”>……省略……</sele
JavaScript执行顺序
a7458969的专栏
04-17 3922
1.6  JavaScript执行顺序<br />上一节是从JavaScript引擎的解析机制来探索JavaScript的工作原理，下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序。如果说，JavaScript引擎的工作机制比较深奥是因为它属于底层行为，那么JavaScript代码执行顺序就比较形象了，因为我们可以直观感觉到这种执行顺序，当然 JavaScript代码的执行顺序是比较复杂的，所以在深入JavaScript语言之前也有必要对其进行剖析。1.6.1  按HTML文档流顺序执
将script放在body中内容的最后的原因详解
BIGDgreen
11-09 4723
chrome在页面渲染过程中的，绿色标志线是First Paint的时间。为什么会出现firstpaint，页面的paint不是在渲染树生成之后吗？其实现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。假如我们将js放在heade...
为什么推荐把<script>元素写在body里面
BertKing的专栏
10-16 1万+
首先我们要知道两点：   (1) 浏览器在遇到元素才开始显示内容;   (2) 当HTML页面中含有外部的JavaScript代码引用，会首先对其进行下载，解析。 在最初的写法中，我们都将元素写在HTML页面的元素中。 这样写的好处是：把所有的外部文件(即.css文件和.js文件)的引用都放在了相同的位置。 但是这样就会产生一个问题： ...
关于script标签在HTML页面放置的位置
weixin_45832482的博客
03-05 1万+
一般script标签会被放在头部或尾部，头部就是head标签里，尾部就是body里，也有放在body闭合标签之后。 1、script标签放在head标签内部 <head> <title>获取DOM元素</title> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script&g
script标签放在body标签前后的区别
热门推荐
前端萌新一枚
06-10 1万+
&amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp
探讨JavaScript标签位置的存放与功能有无关系
11-24
在网页中，我们可以将JavaScript代码放在html文件中任何位置，但一般放在head或body标签里面。 一般来说，[removed]元素放在哪里与其的功能作用是紧密相关的，在这里讨论2种情况： 1、放在<head>里 将...
Javascript无阻塞加载具体方式
12-12
还是在head中，用以保证在js加载前，能加载出正常显示的页面。 [removed]放在</body>前。 2、成组脚本 由于每个[removed]标签下载时阻塞页面解析过程，所以限制页面的[removed]总数也可以改善性能。适用于内联...
bmob js-sdk 在vue中的使用教程
12-29
将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>&...
【JavaScript】JavaScript简介和执行方式
Get your hands dirty
09-20 560
JavaScript是一种解释型脚本语言，必须通过嵌入HTML/XHTML的方式才能执行，不像其他高级编程语言一样可以独立运行。JS的运行不需要配置开发环境，只要一个Web浏览器就可以了，这种特性决定了JS的用途没有其他高级语言那样广泛，但也正因如此，JS比较容易学习和掌握。 JavaScript必须通过HTML/XHTML文档执行，方式有两种： 1、将JS代码放到文档&lt;hea...
为什么要将script脚本放在body底部
大鱼吃小鱼7的博客
07-18 3597
文章目录 一、从一个面试题说起 “页面渲染出来了” 指的是什么？ 陷阱 二、浏览器的渲染机制 几个概念 浏览器的渲染过程 看 Timeline，一目了然 三、问题的答案 四、总结、再进一步 说明： 本文提到的浏览器均是指Chrome。 “script标签“指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即...
js性能---为什么将你的script标签置于</body>标签之前
javapolo的博客
10-05 201
The reason is because of how web pages load. When a browser hits a web page, it first sends a request to the server for the document at the URL. Then once that document arrives at the browser, the b...
body 最后添加html,将script放在body中内容的最后的原因详解
weixin_42292183的博客
06-14 721
将script放在body中内容的最后的两点原因避免JavaScript操作DOM失效在解析JavaScript代码之前，将页面的内容完全呈现在浏览器中，用户会因为浏览器显示空白页面的时间缩短而感到打开页面的速度变快了下面，对这两点原因进行说明。原因分析：JavaScript阻塞HTML解析下面这张图来自HTML规范，图中清晰地描述了外部JavaScript对HTML解析的阻塞(内联脚本没有加载脚...
JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
weixin_33950035的博客
01-12 705
说明： 本文提到的浏览器均是指Chrome。 “script标签“指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即白的，有些手段过头了反而降低性能，所以在讨论条件和结论的时候，虽然很多条件本身会带来其他细微的负面或正面影响，为了不使论述失去重点，不会扩展太开。 一、从一个面试题说起 面试前端的...
TCABEE 008-2020 轨道交通车站高效空调系统技术标准.docx
最新发布
05-07
TCABEE 008-2020 轨道交通车站高效空调系统技术标准.docx
<script>标签放在head和放在body有什么好处和坏处
05-31
将<script>标签放在<head>标签中的好处是可以提高网站的加载速度，因为它们会在页面的其余部分加载之前被加载和解析。这可以确保脚本在页面显示之前可用并且能够更快地运行。但是，如果您的脚本涉及文档对象模型（DOM）的操作，则会导致页面停止响应，因为DOM尚未完全加载。 将<script>标签放在<body>标签中的好处是可以确保DOM已完全加载，从而避免了上述问题。此外，放在<body>标签中的脚本可以访问<body>中的任何元素，这对于与页面元素交互的脚本非常有用。但是，这可能会导致页面加载速度变慢，因为脚本将在页面加载后才被加载和解析。 因此，选择将<script>标签放在<head>或<body>中取决于您的脚本的性质和对页面加载速度和响应时间的优先级。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值