JS加载

闲爱孤烟

同步加载

• 阻塞模式，提高安全性
  
  
  
  • 过多JS加载会影响页面效率
    
  • 默认情况下，JS是同步加载，及优先加载外部JS，只有当JS文件加载完成，don和css才开始加载
    
  
  

1. [/code][size=6][font=STFangsong][color=#2181ff]异步加载[/color][/font][/size]
3. [list]
4. [*][font=STFangsong][color=#2181ff]非阻塞加载[/color][/font]
5. [list]
6. [*][font=STFangsong][color=#2181ff]动态创建script[/color][/font]
7. [*][font=STFangsong][color=#2181ff]defer 延迟加载JS，等到HTML的DOM完全解析之后[/color][/font]
8. [*][font=STFangsong][color=#2181ff]async HTML的文档解析和脚本的获取同时进行[/color][/font]
9. [/list]
10. [/list][code] #defer
11. #async

复制代码

理解优化

• 浏览器解析html的DOM是从上到下的,JS默认为同步加载
  
• 先被解析head的JS资源, 在body没有解析完之前会被绑定监听
  

即：head的JS资源在页面加载前，body的JS资源在页面加载后逐一获取JS
如：JS替换页面全局变量时, 需要将JS在body获取, 或者在head进行defer
PS：网页播放器一般放在body最底部,网页播放器与内容相干甚少,直接按需求defer/async

默认

async

defer

• 默认: 提前加载并执行, 都占用html解析
  
• async: 异步加载, 获取和解析同时, 执行占用html解析
  
• defer: 异步加载, 获取完并不执行, 执行不占用html解析
  

来源:https://www.cnblogs.com/nagisb/p/18412822
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！