JS 之 script标签
程序员文章站
2022-06-11 11:50:16
1.script标签 1.js代码的解析(包括下载js文件)会阻塞页面加载 2.当js文件放在头部,页面必须等所有js代码都被下载,解析和执行完成后才开始呈现页面内容(遇到body标签才呈现),对于那些需要很多js文件的页面来说,会有很大的延迟,浏览器页面空白时间, 所以尽量把全部js文件引用放在b ......
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)适应未来
上一篇: Spring hello world
下一篇: JavaScript 高性能数组去重