script元素
- 将js插入html的主要方法是使用script元素
- 是由网景公司创造出来的,后来被加入html规范
- 有8个属性
- 解释行内js代码和外部代码,页面都会有阻塞,包含下载文件的时间
- 使用了src属性的script标签,就不能在包含js代码,否则会不执行js代码
- 不管什么代码,浏览器会按照script在页面的顺序依次解释,除非使用了defer和async
- 浏览器解析src资源时,会向指定路径发送一个get请求。这个请求不受浏览器同源限制。
script元素的8个属性
- async :可选,表示立改立即下载脚本。但不能阻止其他页面动作。只对外部脚本文件有效。
- charset:可选。使用src属性指定的代码字符集。这个属性很少使用,因为浏览器不在乎它的值。
- crossorigin:可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源的签名和这个属性指定的签名不匹配,则页面会报错,脚本不会执行。这个属性可以确保内容分发网络(CDN)不会提供恶意内容。
- language:废弃。最初用于表示代码块中的脚本语言。
- src:可选。表示外部文件。
- type:可选。代替language,表示脚本语言的内容类型。按照惯例,这个值始终都是“text/javascript”。
script标签位置
- 以前,都是放在head里面。但这样,就得解析完所有js代码,才能渲染也页面。就会有页面空白。
- 现在,放在body里面。处理js代码之前,就可以渲染页面了。空白页面时间就会短一些。
推迟执行脚本
- 设置defer这个属性,浏览器会立即下载,但是会延迟执行脚本,延迟到html全部解析完了再执行
异步执行脚本
- 设置async这个属性,就是告诉浏览器,不必等脚本下载和执行完后再加载页面和执行其他脚本。
动态加载脚本
- 使用dom api 动态添加script标签
- 默认情况,是添加了async属性,但是不是所有浏览器都支持async。所以要明确设置为同步加载,script.async='false'
- 这种方式获取的资源,对浏览器预加载器是不可见的。这回影响他们在资源获取队列中的优先级,可能会严重影响性能。
- 要想让预加载器知道这些动态请求文件的存在,可以在文档头部显示声明他们。比如
<link rel="preload" href="gibberish.js">