JS加载

同步加载

  • 阻塞模式,响应安全性强
    • 过多JS加载会影响页面效率
    • 默认情况下,JS是同步加载,及优先加载外部JS,只有当JS文件加载完成,don和css才开始加载
<script src = 'index.js' ></script>

异步加载

  • 非阻塞加载,执行效率高
    • 动态创建script
    • defer 延迟加载JS,等到HTML的DOM完全解析之后
    • async HTML的文档解析和脚本的获取同时进行
<script src = 'index.js' defer></script> <!-- defer -->
<script src = 'index.js' async></script> <!-- async -->

理解优化

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

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

默认

async

defer

  1. 默认: 提前加载并执行, 都占用html解析
  2. async: 异步加载, 获取和解析同时, 执行占用html解析
  3. defer: 异步加载, 获取完并不执行, 执行不占用html解析
posted @   NAGISB  阅读(76)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示