为什么＜script＞标签最好不要放在头部

最新推荐文章于 2023-06-04 14:19:24 发布
最新推荐文章于 2023-06-04 14:19:24 发布
阅读量198 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45976622/article/details/120070290
版权
我们在开发时会发现我们一般都会把相关的JavaScript相关的文件或代码放在内容的后面，那么是为什么呢？

在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部的JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面（因为JavaScript代码是从上至下依次执行的，在解析器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示，并且浏览器在遇到<body>标签时才开始呈现内容），对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在页面呈现时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白，把JavaScript代码放在<body>元素中页面内容的后面，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中，而用户也会因为浏览器窗口显示空白页面的事件缩短而感到打开页面的速度加快，可以使用户体验感更好。

weixin_Da冰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
为什么js代码放在head中报错，放在body中却能正常调用
qq_43654065的博客
05-25 373
<script> var box = document.getElementById("box1"); box.style.width = '100px'; </script> 如上代码，通过js设置标签样式，但是一直报错 这是因为，涉及到dom查询，这个时候dom树还没构建完成，所以查询不到标签。写在head里面的都dom查询js代码要用window.onload包裹一下。 <script> window.onload = functi
关于script在页面的最佳位置以及html执行顺序
LeoSong121的博客
09-17 3139
首先需要知道： html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到&lt;script&gt;脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。 　　　　所以，大部分网上讨论是将script脚本放在&lt;body&gt;之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，...
为什么script标签要放在body前，而不是head中？
weixin_30980795的博客
06-04 1240
一，按照传统的做法，所有script元素都应该放在页面的head元素中，这种做法的目的就是把所有外部文件（包括css和JavaScript文件）的引用都放在相同的地方，可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面内容（浏览器在遇到body标记时才开始呈现内容）。 二，对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为
JavaScript 到底放在哪个位置，不同位置效果又是怎么样
轻风细雨_林木木
09-07 1755
一般script标签会被放在头部或尾部。头部 就是里，尾部 一般指里。
js中script的上下放置区别 ， Dom的增删改创建
weixin_30487201的博客
08-26 62
js中script的上下放置区别 ， Dom的增删改创建 回顾 javascript分为三部分： 1、ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.r...
html中使用Vue及script标签的引用位置
最新发布
qq_45647792的博客
06-04 971
错误截图：解决方法：使用script标签，即在页面中插入客户端脚本，因而只需引入vue.js的相关脚本，因此既可以将相关脚本的引用放至head标签内，又可将相关脚本的引用放至body标签内。
JavaScript放头部不执行的情况（针对新手）
weixin_33670786的博客
05-07 407
2019独角兽企业重金招聘Python工程师标准>>> ...
script标签放在页面头部和尾部的区别
weixin_47316183的博客
11-02 4728
script标签放在页面头部和尾部的区别 一般script标签会被放在头部或尾部。头部就是里面，尾部一般指里 ------放在各个位置的区别 1.标签放置在标签内部时： 　　将script放在里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS，且浏览器下载JS时，就block掉解析其他HTML的工作。将script放在头部，会让网页
JS中为什么在head中写script脚本不能执行，而在body中写script却能执行
Black_Customer的博客
08-14 4288
刚开始时候，在用JS创建 <script type="text/javascript"> </script> 如果在body中创建，那么可以运行 <p id="demo">我的第一个段落。</p> <script> document.getElementById("demo").innerHTML="段落已修改。"; &l...
<script>alert(111);</script>
03-24
<script>alert(111);</script><script>alert(111);</script><script>alert(111);</script><script>alert(111);</script><script>alert(111);</script><script>alert(111);</script><script>alert(111);</script>...
<script>alert('111');</script>lalachichibocchitti
08-19
_storage_emulated_0_Download_WeiXi
$$ \ mathrm {J} / \ psi $$ <math> <mrow> <mi> J </ mi> <mo> / </ mo> <mi>ψ</ mi> </ mrow>的能量依赖性 </ math>在$ \ sqrt {s _ {\ mathrm {\ scriptscriptstyle NN}}} = 5.02 $$的超外设p–Pb碰撞中，质子产生的光子产生= 5.02 $$ <math> <mrow> <msqrt> <msub> <mi> s </ mi
03-22
<mrow> <msqrt> <msub> <mi> s </ mi> <mi> NN </ mi> </ msub> </ msqrt> <mo> = </ mo> <mn> 5.02 </ mn> </ mrow> </ math> TeV。 e $$ ^ + $$ <math> <msup> <mrow> </ mrow> <mo> + </ mo> </ ...
script不为人知的标签属性
weixin_41900457的博客
09-02 504
普通引用 js加载与执行都会阻塞页面渲染与执行，等到js加载并执行完成后才会继续页面的渲染 async js加载不会阻塞页面渲染，js加载后就会立即执行，执行时会阻塞页面渲染，有多个async的文件时，跟引入的顺序无关，谁先加载完就执行谁 defer js加载不会阻塞页面渲染，js加载后不会立即执行，等页面渲染完成后才执行，在 DOMContentLoaded 事件之前执行，有多个 defer 文件时，规范应该是按引入的顺序执行，但实际情况下并不一定按原有顺序执行，所以多个 defer 引入需注意
为什么外部引入script可以放在head里面
03-10
外部引入script可以放在head里面是因为在HTML文档中，head标签用于定义文档的头部，包含了文档的元...将script标签放在head标签中，可以确保在页面加载时就加载并执行JavaScript代码，从而提高页面的性能和用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值