JS 之 script标签

Posted 2021-01-09 你今天学习了吗

1.script标签
　　1.js代码的解析（包括下载js文件）会阻塞页面加载
　　2.当js文件放在头部，页面必须等所有js代码都被下载，解析和执行完成后才开始呈现页面内容（遇到body标签才呈现），对于那些需要很多js文件的页面来说，会有很大的延迟，浏览器页面空白时间，              所以尽量把全部js文件引用放在body标签内的最底部，先呈现内容，用户体验更好
2.defer延迟脚本
　　script标签加上defer属性，浏览器会异步地下载该文件，不会影响后续dom的渲染，如果有多个defer的script标签，则会按顺序执行所有的script；defer脚本会在文档渲染完毕后，DomContentLoad前执行
Dom文档加载步骤：
（1）解析html结构

（2）加载外部脚本和样式表文件

（3）解析并执行脚本代码

（4）构造HTML DOM模型 //DOMContentLoaded执行点

（5）加载图片等外部文件

（6）页面加载完毕 //load

3.async异步脚本
　　告诉浏览器异步下载async属性文件，async不保证脚本的执行顺序，先加载完先执行

4.嵌入代码与外部文件
　　外部文件优点：
　　（1）可维护性：不必触及html标记，专心编辑js
　　（2）可缓存： 引用同一个外部文件可被浏览器缓存，只需下载一次
　　（3）适应未来