为什么最好把JS的script标签放在body标签结束之前

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量441 收藏 6
点赞数 10
文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79420857/article/details/134607776
版权

这是什么原因呢？不知道嫩想过这个问题没。

  浏览器在解析HTML文档的时候呢是按照顺序执行的，遇到<script>标签的时候会停止解析，并且去加载执行JS的代码。

  如果我们把<script>放在<head>标签中，那么在JS加载或执行的过程，HTML的解析会停止，页面会出现延迟，会给我们造成很不好的用户体验。

  所以我们一般把<script>标签放在</body>结束标签之前，确保页面的HTML结构的全部加载完毕后，再去加载JS。

一定不要因为粗心而忘记哦！！！因为我忘记过。。。 

聂聂脸
关注
为什么script标签要放在body前，而不是head中？
weixin_30980795的博客
06-04 1327
一，按照传统的做法，所有script元素都应该放在页面的head元素中，这种做法的目的就是把所有外部文件（包括css和JavaScript文件）的引用都放在相同的地方，可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面内容（浏览器在遇到body标记时才开始呈现内容）。 二，对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为
把script标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析他们？
LuckXinXin的博客
03-10 961
答： 如果说放在body的封闭之前，将会阻塞其他资源的加载。 如果放在body封闭之后，不会影响body内元素的加载。
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
把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
高先生的猫
04-16 704
html标签只包含head 和body两个标签，解析时，所有标签都会解析进这两个标签里边。body之前的任何位置都会解析进head里边，之后的都会解析进body里边。 ...
为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前？(转)
weixin_43152527的博客
10-09 882
作者：贺师俊 链接：https://www.zhihu.com/question/20027966/answer/13727164 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 Google并没有把新浪微博确实有在之后输出新浪微博所用的doctype是XHTML 1.0，但是其response的content type头并没有用XHTML mimetype，所以...
为什么引用CSS的link标签放在头部，引用JS的script标签放在body结束标签之前？
weixin_42397937的博客
07-18 1305
为什么引用CSS的link标签放在头部，引用JS的script标签放在body结束标签之前？
为什么要将script脚本放在body底部
大鱼吃小鱼7的博客
07-18 3692
文章目录 一、从一个面试题说起 “页面渲染出来了” 指的是什么？ 陷阱 二、浏览器的渲染机制 几个概念 浏览器的渲染过程 看 Timeline，一目了然 三、问题的答案 四、总结、再进一步 说明： 本文提到的浏览器均是指Chrome。 “script标签“指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即...
全面了解js中的script标签
10-22
通常，将 script 标签放置在 HTML 文件的 body 标签结束之前是一种好的实践。这是因为如果 script 标签放在 head 中，浏览器会等待脚本下载并执行完毕才会继续解析和渲染页面的其他部分，从而阻塞了页面的加载过程。...
JavaScript动态添加css样式和script标签
10-21
- 考虑到性能优化，应当合理安排脚本标签的添加位置（如尽量放在body标签结束之前），以及对旧浏览器的兼容性进行测试。 通过上述知识点，我们可以了解到JavaScript动态添加CSS样式和script标签的技术细节，这些...
javascript标签在页面中的位置探讨
12-09
然而，这种做法也存在一个问题，那就是当浏览器遇到<body>标签开始渲染页面内容时，如果JavaScript文件还没有下载和执行完毕，那么用户将看到一个空白的页面，直到所有脚本加载并执行结束，这显然会影响用户体验，...
学习javascript文件加载优化
11-22
一种常见的优化策略是将`<script>`标签放置在`<body>`标签的底部，以确保DOM树尽早构建，从而允许浏览器提前呈现页面内容，触发`DOMContentLoaded`事件。然而，对于某些浏览器，如iOS Safari、Android Browser和iOS ...
HTML中style标签和script标签的存放位置
Rsun2018的博客
01-15 1746
       html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞...
＜script＞标签与＜/body＞闭合标签之间的顺序
tcliuwenwen的博客
01-24 579
博文背景 当js引入位于页面底部时script标签到底是放在body闭合标签之前还是之后？ 解决办法 https://www.zhihu.com/question/20027966 首先呢某乎存在讨论。然后我下载了几个著名网站的index.html发现script标签有很多是放在body闭合标签之后的。这对于强迫症的我不知作何选择。 所以怎么搞才是“正确”的呢？用w3c html checker看一下就知道了。 在以后的实践中我会把它放在闭合标签之前，因为这样符合规范，不过随便咋整都没关系，浏览器很智能
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2788
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 829
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 411
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 852
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1274
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
HTML基础教程：标签详解与属性应用
- `<title>`标签用于定义网页的标题，显示在浏览器标签页和搜索引擎结果中，必须放在`<head>`标签内。 - 示例中的HTML代码展示了如何设置`<title>`元素以及使用其他CSS属性，如文本颜色和段落对齐。 理解并熟练...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值