网站首页 > 技术文章正文

浅谈Script标签（简述script标签的工作原理）

nanyue 2024-07-18 22:25:54 技术文章 6 ℃

以前的我这有认为，但是今天却知道了他的奥秘。他并没有表面的那么简单。

属性

asyncboolean异步执行该脚本，但不保证按照指定它们的先后顺序执行

deferboolean通知浏览器该脚本将在文档完成解析后遇到</html>，并会按照它们出现的先后顺序执行。但会在触发 DOMContentLoaded 事件前执行。

integrity包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据

srctypetextcrossorigin使那些将静态资源放在另外一个域名的站点打印错误信息,就是将跨域报错变为同源报错

在XHTML文档中，要把async属性设置为 async = "async", defer = "defer"

知道了那几个属性接下来，来看看下面这个图：

第一个光秃秃的<script>说明了，在html解析中，如果有<script>的话，html会在Script下载并且执行的时候，暂停解析。
第二个带async属性的<script>，如图所示，也就是他下载Script的时候是异步的，但是只要Script文件下好了，那么就马上执行。
第三个带defer属性的<script>，其实和上面带async属性一样都是异步执行去下载Script文件的。但是在这个带有defer的则是在html全部解析完毕之后才去执行Script文件。而且它是按照加载顺序执行脚本的，这一点要善加利用。显然 defer 是最接近我们对于应用脚本加载和执行的要求的

使用动态创建的<script>标签元素来下载并执行代码

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);

这个技术的重点在于：

无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

参考：

《高性能JavaScript》

使用XHR对象下载JS代码注入页面

function loadScript(url, callback){
 var script = document.createElement(
"e");
 script.type = "text/javascript";
 if(script.readyState){ //ie
 script.onreadystatechange = function(){
 if(script.readyState == "loaded" || script.readyState == "complete"){
 script.onreadystatechage = null;
 callback();
 }
 };
 } else {
 script.onload = function(){
 callback();
 }
 }
}
loadScript("the-rest.js", function(){
 Application.init()
});

这样做实现了动态创建标签元素并下载，其次当第二个脚本文件下载时，应用所需的所有DOM结构已经创建完毕，并做好了交互的准备,从而避免了需要另一个事件来检测页面是否准备好。

https://zhuanlan.zhihu.com/p/35239152

网站首页 > 技术文章 正文

浅谈Script标签（简述script标签的工作原理）

猜你喜欢

网站首页 > 技术文章正文