javascript 的script标签

script元素

script标签的作用就是将js插入到HTML

属性表示不同的场景

async

defer

src

type

crossorigin

charset

使用script标签的注意点

不要出现在字符串中出现 </script> , 浏览器会当成结束标签解析

解决方案 : 转义 <\/script>

script的标签位置

放在<head></head>标签中, 就意味着必须把js代码解析完成之后, 才开始渲染页面

执行到 <body></body> 标签时才开始渲染页面

此时会有一个问题存在如果我script的标签有10000+那我的页面岂不是显示的很慢?

完美的做法 ------> script标签放在body标签的最后位置

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body>...................<script src="demo1.js"></script><script src="demo2.js"></script>
</body>

script 场景一 --- 推迟执行脚本 ( 仅限于script标签引入外部js文件 ) --- defer属性

script 标签设置 defer 属性时, 被认为立即下载, 最后执行

最后两个脚本可能会在 DOMContentLoaded 事件前或后可能按顺序执行

如果你觉得这是个问题 ---- 那就推迟一个脚本

<head>.....<title>Document</title><script defer src="demo1.js"></script><script defer src="demo2.js"></script>
</head>

script 场景二 --- 异步执行脚本( 仅限于script标签引入外部js文件 ) --- async属性

script 标签设置 async 属性时, 被认为立即下载不阻塞加载dom, 不保证执行顺序

设置 async 属性告诉浏览器你不必等我加载完或执行完再去加载页面和执行其他脚本

  <script async src="demo1.js"></script> console.log(1)<script defer src="demo2.js"></script> console.log(2)执行结果 可能是 1 , 2  也可能是 2, 1

script 场景三 --- 动态加载脚本

实现原理 : createElement(' script ') 创建script元素追加时默认 async 属性为 true

<body>...................<button>动态加载脚本</button><script>const btn = document.getElementsByTagName('button')btn[0].addEventListener('click', () => {const script = document.createElement('script')script.src = 'demo2.js'document.head.appendChild(script)})</script>
</body>

弊端 (红宝书原话) : 这种方式动态加载资源对浏览器预加载器是不可见的 , 这会影响资源在获取队列中的优先级 , 可能会影响性能

解决方案 : 告诉浏览器我可能要动态的加载资源文件

<head>...............<script src="demo1.js"></script><link rel="preload" href="demo2.js">
</head>

javascript 的script标签相关推荐

javascript --- [jsonp] script标签的妙用(绕过同源限制)
1. 同源 1.1 什么是同源协议.域名.端口号相同 1.2 为什么有同源政策同源政策是为了保护用户信息的安全,放置恶意的网站窃取数据.最初的同源政策是指A网站再客户端设置的Cookie,B网站是 ...
用手动创建新的script标签的方式，实现JavaScript脚本的异步加载
代码第四行里新建一个script标签页,在第8行的回调函数onreadystatechange里,根据属性readyState判断当前标签页的状态,如果为loaded或者complete,说明脚本加载 ...
JavaScript ＜script＞标签
目录 1. HTML中使用JavaScript. 1.1 直接将JavaScript代码放入<script>标签中. 1.2 通过src引用外部JavaScript文件. 2. <s ...
JavaScript script标签同步异步加载过程
同步加载同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作. <script src="http://xxx/script.js& ...
Script标签的async和defer
之前有写过HTML页面渲染过程,知道了JavaScript是会阻塞DOM解析的,所以我们会把script标签放到底部防止阻塞HTML解析.其实script还有两个属性,async和defer,也是可以 ...
script标签的defer属性
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了. 如果您的脚本不会改变文 ...
面试小记---外部脚本必须包含 script 标签吗？
外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
前端 HTML 常用标签 head标签相关内容 script标签
script标签定义JavaScript代码  <script type="text/javascript">& ...

javascript 的script标签

script元素

属性表示不同的场景

使用script标签的注意点

script的标签位置

script 场景一 --- 推迟执行脚本 ( 仅限于script标签引入外部js文件 ) --- defer属性

script 场景二 --- 异步执行脚本( 仅限于script标签引入外部js文件 ) --- async属性

script 场景三 --- 动态加载脚本

javascript 的script标签相关推荐

最新文章

热门文章