清华大学绿色大学建设网站,网站建设 大公司好,长春网络建站,乐平网站在HTML中#xff0c;script标签可以使用async和defer两个属性来控制外部JavaScript文件的加载和执行方式。这两个属性的目的是优化页面加载时间#xff0c;但它们以不同的方式工作。下面是每个属性的具体说明#xff1a;
async属性
当你给script标签添加a…在HTML中script标签可以使用async和defer两个属性来控制外部JavaScript文件的加载和执行方式。这两个属性的目的是优化页面加载时间但它们以不同的方式工作。下面是每个属性的具体说明
async属性
当你给script标签添加async属性时浏览器会异步加载脚本。这意味着脚本会在页面继续解析的同时被加载而不会阻塞文档的解析。一旦脚本下载完成浏览器会暂停HTML的解析执行脚本然后再继续解析HTML。多个async先下载完的先执行 async属性适用于那些不依赖于其他脚本同时也不被其他脚本依赖的情况因为它不能保证脚本的加载顺序。
defer属性
当你给script标签添加defer属性时浏览器也会异步加载脚本但与async不同的是defer脚本会等到整个文档都解析完毕后且在DOMContentLoaded事件触发之前执行。这意味着不管脚本何时完成加载它的执行都会等到文档解析完毕。多个defer等待所有defer下载完依次执行。 defer属性适用于那些依赖于DOM或其它脚本或者被其它脚本依赖的场景。
总结
下面是一个表格比较这两个属性的不同之处
特性asyncdefer加载方式并行加载脚本并行加载脚本执行时机脚本下载完成后立即执行可能会在文档解析完成前文档解析完成后DOMContentLoaded事件触发前执行执行顺序不能保证脚本按照在文档中出现的顺序执行保证脚本按照在文档中出现的顺序执行适用场景不依赖DOM不依赖其它脚本的独立模块依赖DOM或其它脚本且不影响文档显示的脚本
