熟悉的< script >标签

最新推荐文章于 2024-04-02 22:33:02 发布

weixin_33958585

最新推荐文章于 2024-04-02 22:33:02 发布

阅读量152

点赞数

文章标签：前端嵌入式 javascript ViewUI

原文链接：https://juejin.im/post/5c47ce39e51d4544390b4e4b

版权

作为前端开发的小伙伴，一看到< script >标签，是不是特别熟悉，因为前端开发的小伙们每天基本都会使用该标签，但是仔细想想真的对< script >标签了解吗，它的的作用是什么？它的位置应该放在哪？为啥这样放？它有几个属性？每个属性是干什么的？当然有些小伙伴已经知道个大概了，那么咱们就带着这几个问题，来真正的了解一下熟悉的< script>标签

1 < script > < /script >标签的产生

我们经常使用的< script > < /script >标签，大家都知道它是放在web核心语言HTML的标签，当初在开发JavaScript的时候，远景公司，为了解决一个重要的问题，就是如何做到JavaScript既能与HTML页面共存，又不影响页面的显示效果，经过尝试、纠错和争论，最终决定就是给web增加统一的脚本支持。这些早期的很多做法也被保留了下来，并正式纳入HTML规范当中。这就是< script>的产生，可以查看《有关javascript的发展史》

2 < script > < /script >标签的属性

前端开发的小伙伴看这个熟悉的< script > < /script >标签，能回答出来有几个属性吗？可能聪明的小伙伴已经知道了，6个！没错就是6个。

1 type
2 src
3 defer
4 async
5 language
6 charset

大家对这个6个属性，比较熟悉的可能依次是 type、src、async、defer，剩下的哪两个可能就不太熟悉了，接下咱们就一起看一下这些属性的用途,这6个属性都是可选的。

2.1 type属性。

前端小伙伴一下到type属性就会想到type='text/javascript'，其实type属性默认值就是text/javascript，type是代替已经废弃的language属性，表示编写代码使用的脚本语言的内容类型（也可以成为MIME类型），虽然text/javascript和text/ecmascript都已经不被推荐使用了。但是大家一致用text/javascript，它还有其他属性值如
application/x-javascriot（但是这个属性会导致脚本会被忽略）
application/javascript|applicationecmascript(考虑到浏览器兼容，当然现在的浏览器不用考虑这些)

2.2 src属性

前端小伙伴对src的属性的熟悉度不会低于type，因为现在js的开发一把都是放在js文件中，这样有利于集中开发和html文档清洁。
一般的情况下大家都会在src的属性值中填写一个相对路径或者与当前域名一直的js路径，因为这样可以保证js文件的来源和安全
某些情况下src的属性值也可能是一个非同域名的地址，但是这个地址最好是自己知道并可以维护的地址，这样可能会出现跨域脚本攻击，得到以下敏感信息，来操作你的用户信息和账户金额等
大家看一下下面,会不会在控制台输出index.js字符串

<html>
<head></head>
<body></body>
< script src='/index.js' > 
    console.log('index.js')
< /script >
</html>

复制代码

答案是不能，因为当使用了src外部资源的时候，浏览器就不会再解析执行< script>内部的代码块了。

2.3 defer属性

该属性是html4.01为< script>标签放在< head>中定义的
,在执行的时候不会影响到页面构造。

//index.js
   document.getElementById('root')
// index.html
<html>
<head>
< script src='/index.js' defer='defer' > < /script >
</head>
<body>
    <div id ='root'></root>
</body>

</html>
复制代码

目的是告诉浏览器，可以立即下载js，但是延迟执行代码。

//index1.js
   document.getElementById('root')
// index.html
//index2.js
   document.getElementById('root')
// index.html
<html>
<head>
< script src='/index1.js' defer='defer' > < /script >
< script src='/index2.js' defer='defer' > < /script >
</head>
<body>
    <div id ='root'></root>
</body>

</html>
复制代码

但是在HTML5的规范中要求脚本按照它们出现的先后顺序执行，因此第一个延迟执行的脚本会先于第二个延迟执行，而这两个脚本会先于DOMContentLoaded事件执行。
实际上在不支持html5规范的浏览器上，延迟不一定会按照顺序执行，也不一定会先于DOMContentLoaded事件执行，因此一个最好包含一个延迟脚本

2.4 asycn 异步脚本

HTML5为< script>元素定义了async属性。这个属性与咱们看的上面的defer类似，async只适合外部脚本文件，告诉浏览器立即下载文件，但于defer不同的async并不保证按照它们的出现先后顺序执行

//index1.js
   document.getElementById('root')
// index.html
//index2.js
   document.getElementById('root')
// index.html

<!DOCTYPE html>
<html>
<head>
< script src='/index1.js' async > < /script >
< script src='/index2.js' async > < /script >
</head>
<body>
    <div id ='root'></root>
</body>

</html>
复制代码

上面代码不确定 index1.js会先执行与index2.js，所以一定要保证index2.js不依赖与index1.js

2.5 language 属性

该属性已被废弃，咱们大家只做了解，原来用于表示编写怠慢使用的脚本语言，（JavaScript、JavaScript1.2或者VBScript），但是大多数浏览器都会忽略这个属性，因此没有必要在使用了。

2.6 charset 属性

可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

3 < script > < /script >的使用

3.1 嵌入使用，看代码

<!DOCTYPE html>
<html>
<head>


</head>
<body>
    <div id ='root'></root>
</body>
< script  > 
    function sayHi（）{
         console.log('Hi')
    }
  
< /script >
</html>
复制代码

包含着< script>内部的代码将被从上到下依次解释，解释器解释一个函数的定义，然后将该定义保存到自己的环境中。在解释器对< script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或者显示。
在使用< script> 嵌入JavaScript代码时，不要在代码证任何地方出现“”字符串。

<!DOCTYPE html>
<html>
<head>


</head>
<body>
    <div id ='root'></root>
</body>
< script  > 
    function sayHi（）{
         console.log("< /script >"")
    }
  
< /script >
</html>
复制代码

在浏览器中加载时会出现一个错误。

3.2 外部引入

<!DOCTYPE html>
<html>
<head>
< script src='/index1.js' async > < /script >
</head>
<body>
    <div id ='root'></root>
</body>

</html>
复制代码

这种引入方式和嵌入的加载顺序一样，但是多了一步下载流程。但是他的好处是非常大的，

1可以统一集中的管理开发js
2相比嵌入式对html的整洁性有很大的太高
3 有利于分离开发

虽然有好处很大，但是也会出现以下加载位置或者加载顺序的问题。
从上面的得到，在浏览器加载的时候，浏览器只会一心一意的加载解析js代码，其他的工作都会先放下，那么问题来了。

<!DOCTYPE html>
<html>
<head>
< script src='/index1.js'> < /script >
</head>
<body>
    <div id ='root'></root>
</body>

</html>
复制代码

如果index1.js代码解析的比较慢的话，页面就会出现一个空白页面。
如果index1.js代码解析的很快的话，由于index1.js中操作了某个dom其实，是无效的。
根据咱们了解的< script>标签的 async 和 defer的属性咱们可以解决，空白页面的问题。
但是async 和 defer的属性都有自己的局限性

1 async 能够保证不立即执行js代码，但是无法保证两个外链代码的执行顺序
2 defer 虽然规定了，能够保证不立即执行js代码，保证外链代码的执行顺序，但是一般浏览器不是这么做的

那么最好的解决方案是，需要把< script >标签放在底部

这就是我们常用的< script>大家是不是有跟进一步的了解这这个标签，欢迎大家补充不足的地方，欢迎留言点赞

转载于:https://juejin.im/post/5c47ce39e51d4544390b4e4b

weixin_33958585

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
熟悉的< script >标签

作为前端开发的小伙伴，一看到< script >标签，是不是特别熟悉，因为前端开发的小伙们每天基本都会使用该标签，但是仔细想想真的对< script >标签了解吗，它的的作用是什么？它的位置应该放在哪？为啥这样放？它有几个属性？每个属性是干什么的？当然有些小伙伴已经知道个大概了，那么咱们就带着这几个问题，来真正的了解一下熟悉的< script>标签1 <...
复制链接

扫一扫