1/5
- 下载图片
- 复制图片
。
频道主
Script标签：向HTML插入JS的方法
没有 defer 或 async，所有<script>元素会按照在页面出现的先后顺序依次被解析，浏览器会立即加载并执行指定的脚本, 只有解析完前面的script元素的内容后，才会解析后面的代码。
async 和 defer 属性仅仅对外部脚本起作用，在 src 不存在时会被自动忽略。
使用<script>的两种方式
1.页面中嵌入script代码， 只需指定type属性
<script type="text/javascript">
function sayHi() {
console.log('hihihi');
// 内部不能出现'</script>'字符串，如果必须出现，必须使用转义标签‘\’
alert('<\/script>');
}
</script>
包含在<script>元素内的代码会从上而下依次解释，在解释器对<script>元素内的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示
2.包含外部js文件, src属性是必须的。
<script src=""></script>
// 带有src属性的元素不应该在标签之间包含额外的js代码，即使包含，只会下载并执行外部文件，内部代码也会被忽略。
与嵌入式js代码一样, 在解析外部js文件时，页面的处理会暂时停止。
改变脚本行为的方法
1. defer: 立即下载，延迟执行
加载和渲染后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行会在所有元素解析完成之后。脚本总会按照声明顺序执行。
在DOMContentLoaded事件之前执行。
<script defer="defer" src="
2. async: 异步脚本
加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行（异步）。但是async 在下载完毕后的执行会阻塞HTML的解析。脚本加载后马上执行，不能保证异步脚本按照他们在页面中出现的顺序执行。
一定会在load事件之前执行，可能会在DOMContentLoaded事件之前或之后执行。
<script async="async" src="
#前端
没有 defer 或 async，所有<script>元素会按照在页面出现的先后顺序依次被解析，浏览器会立即加载并执行指定的脚本, 只有解析完前面的script元素的内容后，才会解析后面的代码。
async 和 defer 属性仅仅对外部脚本起作用，在 src 不存在时会被自动忽略。
使用<script>的两种方式
1.页面中嵌入script代码， 只需指定type属性
<script type="text/javascript">
function sayHi() {
console.log('hihihi');
// 内部不能出现'</script>'字符串，如果必须出现，必须使用转义标签‘\’
alert('<\/script>');
}
</script>
包含在<script>元素内的代码会从上而下依次解释，在解释器对<script>元素内的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示
2.包含外部js文件, src属性是必须的。
<script src=""></script>
// 带有src属性的元素不应该在标签之间包含额外的js代码，即使包含，只会下载并执行外部文件，内部代码也会被忽略。
与嵌入式js代码一样, 在解析外部js文件时，页面的处理会暂时停止。
改变脚本行为的方法
1. defer: 立即下载，延迟执行
加载和渲染后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行会在所有元素解析完成之后。脚本总会按照声明顺序执行。
在DOMContentLoaded事件之前执行。
<script defer="defer" src="
2. async: 异步脚本
加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行（异步）。但是async 在下载完毕后的执行会阻塞HTML的解析。脚本加载后马上执行，不能保证异步脚本按照他们在页面中出现的顺序执行。
一定会在load事件之前执行，可能会在DOMContentLoaded事件之前或之后执行。
<script async="async" src="
#前端
2024-10-28
浏览93
暂无评论
登录后评论
1
评论
分享