首页 > 其他分享 >HTML 中 script 标签的属性和加载顺序

HTML 中 script 标签的属性和加载顺序

时间:2023-02-26 21:48:30浏览次数:46  
标签:dom script js HTML 执行 下载 加载

script 标签默认是阻塞加载的,也就是先下载src内容,然后执行src内容,然后再往后读文档

head 中的 script 按顺序加载执行,然后再加载 body 的元素。

image

把 script 移动到文档最后,自然就会先加载body,再加载script,页面看上去更快了

image

如果加了 defer 属性,表示这个 script 下载后不急着执行,等到html解析结束后再执行。浏览器会下载a.js和b.js,同时一起加载 dom,加载完后再按顺序执行a.js 和 b.js

image

如果加了 async,就表示下载这两个脚本,下载好了和dom一起执行。浏览器会下载a.js和b.js,js下载时渲染dom,下载完后转到js执行,但一方面此时dom可能还没读完,所以不要操作 dom。一方面两个script的执行顺序可能不一样了,所以他们不能相互依赖;

image

标签:dom,script,js,HTML,执行,下载,加载
From: https://www.cnblogs.com/ofnoname/p/17149844.html

相关文章

  • JavaScript 工厂方法创建对象
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *创建一个对象 */ varobj={......
  • JavaScript 构造函数
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *创建一个构造函数,专门用来创建Person对......
  • JavaScript 立即执行函数
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> //函数对象() /* *立即执行函数 ......
  • 重学HTML的记忆内容
    HTML<img>标签的alt属性。<hr>标签定义水平线。pre标签对空行和空格进行控制,非常适合用于显示计算机代码。使用命名锚时,可以创建直接跳至该锚的链接。(<a>定义锚。首先......
  • JavaScript 枚举对象中的属性
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> varobj={ name:"孙悟空", age:1......
  • JavaScript 作用域
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *作用域 * -作用域指一个变量的......
  • JavaScript 相等运算符
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *相等运算符用来比较两个值是否相等, ......
  • JavaScript 条件运算符
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *条件运算符也叫三元运算符 * 语法: ......
  • JavaScript 运算符的优先级
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *,运算符 * 使用,可以分割多个语......
  • JavaScript 代码块
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *我们的程序是由一条一条语句构成的 ......