【js】javascript脚本放在 ＜body＞元素的底部的好处

最新推荐文章于 2023-04-19 22:06:00 发布
最新推荐文章于 2023-04-19 22:06:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ann295258232/article/details/70049572
版权

建议把javascript脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

MDN的解释：

提示：我们将 <script> 元素放在 HTML 文件底部的原因是，浏览器解析 HTML 似乎按照代码出现的顺序来的。如果 JavaScript被首先读取，它也应该影响下面的 HTML，但有时会出现问题，因为 JavaScript 会在 HTML 之前被加载，如果 JavaScript 代码出现问题则 HTML 不会被加载。所以将 JavaScript 代码放在底部是最好的选择。

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

这里写图片描述

向着光芒的女孩
关注
专栏目录
为什么＜link＞标签放在＜head＞内，而带javascript的链接尽量放在＜/body＞前
Eraser_XIU的博客
09-15 2158
1、<link>标签放在<head></head>之间： a. 规范要求； b. 让页面逐步呈现，提高用户体验； c. 防止呈现空白页面或没有样式的内容； d. 如果把样式表放在文档底部，那么很多浏览器（例如Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。 2、<script>标签放在</body>之前： a. 脚本在下载和执行期间会阻止HTML解析。把<scri
JS代码放在head和body中的区别分析
12-10
JavaScript代码在HTML文档中的位置，通常有两种选择：`<head>`和`<body>`标签内。...而那些依赖于DOM元素的脚本，则应放在`<body>`的底部，确保元素加载完成后再执行。这样能保证代码的正确性和页面的性能。
脚本放在 <body> 元素的底部
weixin_30291791的博客
09-09 113
建议把脚本放在 <body> 元素的底部。 这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。 转载于:https://www.cnblogs.com/zuolijun/p/4795406.html
网站的JS块为什么放在网页底部最合适?
weixin_34390105的博客
11-21 118
随时科技的进步，现在人们对物质的追求越来越高，想当初还是modem拨号上网时，我们会等上1到2分钟打开一个网站而高兴很久，而现在网速越来越快，同时访问的用户也越来越多，人们对速度的追求也越来越高， 当搜索一个物件时，一个页面如果10秒钟还没有出现内容时，我相信你会毫不犹豫中换另一个网站。​所以我们前端开发人员在开发一个项目时，首先要站在一个体验者的角度，以速度为先，这就要求我们对代码的效率有了更高...
JS一定要放在Body的最底部么？
weixin_30340353的博客
01-12 83
JS一定要放在Body的最底部么？ 时间2016-01-12 02:00:02 写代码的小德子 原文 http://delai.me/code/js-and-performance/ 主题 JavaScript CSS 一、从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题。比如：为什么大家普遍把 <script src=""&gt...
描述一下脚本＜script＞放在＜head＞和放到＜body＞底部的区别
欣欣酱博客
02-20 2977
------- 放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。 放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。 ------- html渲染执行的顺序为从上到下的一个执行顺序，首先第一步执行head中的内容，如果有外联样式，则下载外联样式，如果有script标签，那么浏览器的渲染引擎则停止，交给JavaScript引
js代码写在body，head和body后面的区别
qq_40816649的博客
02-25 8163
计算机读代码的顺序是从上往下读的,html文件中的顺序是&lt;head&gt;→&lt;body&gt;→body后方javascript代码写在&lt;head&gt;里面：由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定）javascript代码写在&lt;body&gt;里面：这里可以放函数也可以放立即执行的语句...
<script>标签放在<head>和<body>的区别
05-17
一般来说，推荐将JavaScript代码放在<body>标签的底部，因为它可以减少页面加载时间，并防止脚本阻塞页面的渲染过程。不过，在一些情况下，如果需要在页面加载之前执行某些初始化任务，那么将脚本放在<head>标签中也...
在 html 页面上编写 javascript 代码时，应编写在 (B ) 标签中间 A. <javascript></javascript> B. <script></script> C. <head></head> D. <body></body>
最新发布
06-17
在HTML页面上编写...JavaScript代码通常插入在`<head>`标签中，以便在文档加载时执行，或者放在`<body>`标签的底部，以确保页面结构先加载完毕再执行脚本。但直接指定放置位置的话，`<script>`是最准确的选择。
js放在body里面还是html外面,JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制...
weixin_29022821的博客
07-14 1017
(点击上方公众号，可快速关注)作者：德来网址：http://segmentfault.com/a/1190000004292479一、从一个面试题说起面试前端的时候我喜欢问一些看上去是常识的问题。比如：为什么大家普遍把 放到导航栏的下面，结果是这样的：从上面的Timeline我们可以看出：首屏时间和DomContentLoad事件没有必然的先后关系所有CSS尽早加载是减少首屏时间的最关键js的下载...
JavaScript标签放在HTML的末尾
chengyin4096的博客
02-02 929
理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内： <body> <!--这里是其他的HTML标签--> <script>//这里是代码</script&gt...
告诉你为什么js脚本要写在<body>代码的后面（因为DOM是从上到下按照顺序加载！）
HD243608836的博客
02-03 3367
$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。 $(document).ready(function(){
JavaScript放在body还是head中？
m0_57236802的博客
04-19 1108
中，浏览器在解析页面的同时可能需要执行 JavaScript。这可能导致页面渲染被阻塞，从而影响加载速度和用户体验。如果 JavaScript 代码是关键性的，即在页面加载时立即需要执行，那么可以将它放在。然而，根据不同的需求和最佳实践，通常推荐将 JavaScript 放在。总之，根据不同的需求和最佳实践，通常推荐将 JavaScript 放在。然而，在某些特殊情况下，你可能需要将脚本放在。尽管如此，在某些情况下，将 JavaScript 放在。中可能导致错误，因为所需的元素在脚本执行时尚未加载。
JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
weixin_33950035的博客
01-12 719
说明： 本文提到的浏览器均是指Chrome。 “script标签“指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即白的，有些手段过头了反而降低性能，所以在讨论条件和结论的时候，虽然很多条件本身会带来其他细微的负面或正面影响，为了不使论述失去重点，不会扩展太开。 一、从一个面试题说起 面试前端的...
html开发中为什么js要放在body的底部？
Chenglin(Ben) Yu's Miracle
05-04 1052
html开发中为什么js要放在body的底部？ 因为如果写在<head>里，此时DOM还没有解析完成。
有的js为什么放在body里面
hello world
02-26 1498
理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内： <body> <!-- 这里是其他的HTML标签 --> <script> // 这里是代码 </script> </body> 这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题。另外，Yahoo的前端优化指南里就有这一条。 放
js 是放在head还是放在body底部其实是有本质区别的
zwy122的博客
12-28 2085
html页面中js放在head部分，也就是整个html一开始就加载的方式，和放在body底部的方式，也就是在html页面最后再加载，对于有些情况下是有本质区别的，详见前端view文件夹中临床界面的hospital.html界面对于下拉菜单控件的加载方式，也就是现在处于body部分的js加载的内容，把他移动到head部分是有本质区别的
js文件为什么放在页面的底部
weixin_43794749的博客
08-20 1339
因为浏览器加载完 JS 文件就会去执行，这时候如果 JS 里面有对 DOM 的操作的话，DOM 可能还未加载完，就会出错。 因为浏览器渲染HTML文件是从上往下渲染的。 即先执行head标签里的内容，再执行body标签里的，一行行渲染下去。碰到头部有js文件引用时，浏览器就会开始下载这个js文件，下载后再执行，执行完毕后再继续解析后面的html。如果这个js文件很大，需要两秒来下载，那么浏览器就会停下来两秒，势必会影响用户体验。所以原则就是尽可能快地让首屏内容先展现，再加载其他资源。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值