script标签的引入位置

最新推荐文章于 2022-11-26 18:24:05 发布
最新推荐文章于 2022-11-26 18:24:05 发布
阅读量707 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A444477/article/details/121722820
版权

JavaScript的执行会阻塞HTML的解析渲染；
JavaScript的下载会阻塞HTML的解析，不会阻塞渲染。

内嵌式script时，不管放在哪里，都会因为执行js而阻碍html的解析和渲染

外部引入script时，network线程下载只会影响html的解析，不会影响渲染。所以将script标签放在body尾部可以避免出现因为阻塞html渲染而导致的长时间白屏现象。

当使用script标签引入外部js文件时, Network线程会阻塞HTML的解析, 但不会阻塞HTML的渲染;
因此网上大部分的观点是错误的, JavaScript执行确实会阻塞HTML的解析渲染, 若是以嵌入的方式引入JavaScript, 不管script标签是放在head标签中或是body标签尾部, 页面都会由于JavaScript的执行而持续白屏; 而在引入外部js文件的情况, 由于Network线程下载外部js文件仅阻塞HTML的解析而不会阻塞HTML的渲染, script标签置于body标签尾部可以避免由于js文件下载时间太长导致的页面持续白屏!

张登辉的奇妙旅程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于script标签引入vue.js
08-21
html页面基于script标签引入vue使用时，将此js放在项目路径中引用即可离线使用vue框架，避免在线引用网络延迟。 具体使用方法可参考我的博客
基础vue代码-script标签引入vue框架
07-21
基础vue代码-script标签引入vue框架
script在html中的摆放位置
weixin_30372371的博客
08-23 441
以前一直觉得script在html中的任何位置都可以，今天做一个需求的时候才更正了自己的错误思想啊--script的位置也不是随便放的。 首先是想实现一个select标签，有是和无两个option，但是在初始化的时候要求select标签默认选择空值，所以我在点击的时候加了一个方法让他把空值删掉： <!DOCTYPE html> <html> <h...
script标签引入
qq_39115357的博客
06-15 911
1、css写在哪？ 内部样式表：属性样式：“样式属性值” 内部：style双标签，包裹css样式 外部(外联)：link单标签href属性，引入css文件路径 2、js写在哪？ 内联：属性形式：事件触发； <input type="button" value="点击一下" onclick="alert('hello world')"/> 不建议使用，原因：结构和行为的分离，优化项目，便于管理，为了测试方便； 内部：script双标签，包裹js代码 不太建议内部，结构和行为分离 外部(外联):s
在HTML页面中引入公共的部分的代码
祈澈菇凉
05-16 7394
在做前端网页的时候，会涉及到很多界面，有的时候，这些界面都会有重复的代码，比如侧边栏菜单的重复代码，头部导航的 重复代码，底部的重复代码，这个时候，为了使每个页面的代码看起来简洁明了，我们需要把这些重复的代码放到公共的页面里面，在具体页面只需引用即可。 主要代码 <div id="head"></div> <div id="s...
在html中引入css和js标签的位置
weixin_30502965的博客
01-21 412
　　以前在刚学java web的时候学了jsp的相关知识，其中重要的一点是在jsp中需要引入css和js,同来渲染页面的样式和增加页面中需要动态实现的功能，我记得当时老师教的时候，就是在<head>标签中引入两者，但是后来自己做项目之后，看见很多的jsp中都是讲<script>标签放在<body>尾部。所以那时候也在网上查了查相关的解释，网上说的挺好的，一般都是...
script标签属性用type还是language
09-03
在HTML文档中，`<script>`标签用于引入和执行脚本。本文主要讨论了`<script>`标签的两个属性：`type`和`language`，它们都是用来标识脚本语言类型的，但`language`属性在HTML和XHTML标准中已被废弃，推荐使用`type`...
Script标签与访问HTML页面详解
09-04
Script标签是HTML中的一个重要元素，用于在网页中插入可执行的脚本，通常用来引入JavaScript或TypeScript等客户端脚本语言，以实现动态交互和功能增强。在HTML5中，`language`属性已被废弃，推荐使用`type`属性来...
全面了解js中的script标签
11-22
在页面中用script标签引入javascript文件（[removed][removed]），浏览器在渲染页面的时候，当读取到script元素时，浏览器不会以HTML或XHTML的方式处理其内容，浏览器会通知浏览器的脚本引擎来接管script元素中的...
JavaScript文件的引入方式
我的博客
02-25 1715
JavaScript文件的引入方式
总结：JS文件中引入其他JS文件的方法，以及＜script＞标签中间如何嵌套＜script＞标签
weixin_48033662的博客
08-28 4807
本质上相当于在页面的body或者head中引入一组新的script标签，从而实现引入新的JS文件；而并不是两组script标签的直接互相嵌套，这样并不会效果。
JS的引入方式
qq_64156125的博客
11-26 2170
js的三种引入方式
javascript的四种引入方法
ZhaoYulin6的博客
09-08 1171
Script标签引入方式：4种 1.script的标签 <script> var str1 = "123"； console.log(str1)；//控制台打印 </script> 2.a标签引入 <a href="javascript:alert('hah')">sdfsdf</a> 3.div后面引入 <div onclick="alert('我被点击了')"></div> //直接在后面写点击事件 4.script引入JS
thymeleaf中文件引入外部文件夹里的css、js文件不到的原因
热门推荐
看不见鲸鱼的鼻子的博客
12-20 1万+
因为之前配置editor.md所以在static文件夹下配置比较方便配置好后将其移入templates后一直出现导入不到css、js的情况，遂查询文档并且尝试最后成功  先列一下之前的 &lt;script type="text/javascript" src="../../static/js/editormd.js" &gt;&lt;/script&gt;   就像上面一样引入最后发现...
CSS 引入和 Script 引入的方式
innocence_123的博客
05-06 2578
1、引入外部独立的 CSS 文件，这个标签 link 中属性是 href <link rel="stylesheet" type="text/css" href=""/> 2、script 标签引入 js 文件的时候，是 scr 属性 <script src="js/1.js" type="text/javascript" charset="utf-8"></script> 3、使用工具 ，不打尖括号 <，可以出提示 <script type=
script标签到底该放在哪里
我的博客
04-30 7179
一般script标签会被放在头部或尾部 头部就是<head>里面,但是将script放在头部，会让网页内容呈现滞后，导致用户感觉到卡。 尾部一般指将script放在<body>里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。将script放在尾部，优点是能加速网页加载。 缺点：是浏览器只能先解析完整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析
再次被JS气炸——<script>引用的位置
liyuqi_liyuqi的博客
06-18 3097
再练习使用image对象时，把引用放在中，被引用的js有时能用，有时无效，一开始以为是js代码本身的问题，我他么调试了一上午，最后实在找不到哪儿出了bug，我就把引用放在了文档下面，然后就正常运行了，懵逼脸！
<script>标签在HTML中的位置
pwdjying的博客
07-12 4815
通常，我们把元素都放在页面的元素中，例如： window.onload = function(){//页面所有元素加载完毕 var btn = document.getElementById("btn");  //获取id为btn的元素(button) btn.onclick = function(){   //给元素添加onclick事件 var arrays
通过script标签引入mathjs
最新发布
03-14
可以通过以下代码引入mathjs： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.min.js"></script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值