JavaScript需等待页面全元素加载完成才可执行 移动端菜单交互延迟求助

问题核心原因 #

你当前遇到的交互延迟由两个常见问题叠加导致：

• head内引入的脚本均为同步阻塞加载：浏览器解析HTML时，遇到没有特殊属性的普通script标签，会直接暂停后续DOM解析流程，优先下载并执行完JS文件，才会继续渲染页面内容，天然拉长了页面可交互的时间。
• 脚本内部的交互绑定时机不对：如果绑定汉堡菜单点击事件的逻辑写在了window.load或jQuery对应的$(window).load()回调里，必须等页面所有资源（图片、轮播素材、第三方埋点等）全部加载完成才会执行绑定，这也是你感知到“所有元素加载完才能点菜单”的最直接诱因。

具体优化步骤 #

• 第一步：给head内的业务脚本添加defer属性
  defer的特性是：浏览器遇到带defer的script标签时，不会暂停DOM解析流程，会在后台并行下载JS文件，等整个DOM树解析完成后，再按照脚本在HTML中出现的顺序依次执行。
  defer的执行时机晚于DOM树解析流程，因此即使把脚本放在head中，执行时也已经可以访问到页面内的DOM元素，完全不存在找不到元素的问题，和把脚本放在body末尾的效果一致，同时还能提前并行下载资源，不阻塞页面渲染。
  针对你当前的脚本依赖关系（jQuery是后续业务脚本的前置依赖），defer会严格保持脚本的执行顺序，不会出现依赖加载错乱的问题。改造后的script标签代码如下：

  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script defer src="/js/scripts.js"></script>
  <script defer src="/js/main.js"></script>
  

• 第二步：修正脚本内的事件绑定时机
  检查scripts.js、main.js内的汉堡菜单绑定逻辑，将原来写在全资源加载回调中的绑定逻辑，替换为DOM解析完成就触发的回调：

  • 原生JS实现：将绑定逻辑移入document.addEventListener('DOMContentLoaded', () => { 绑定逻辑 })
  • jQuery实现：将绑定逻辑移入$(document).ready(() => { 绑定逻辑 })
    这类回调仅等待DOM树构建完成就会执行，不等图片等其他静态资源加载，可大幅提前交互生效时间。

• 第三步：明确脚本属性的使用边界

  • 存在依赖顺序的脚本不要使用async属性：async的执行时机是JS下载完成后立刻执行，不保证脚本的执行顺序，很容易出现jQuery未加载完成、依赖它的脚本先执行导致的$ is not defined报错。
  • 仅需要在页面渲染前执行的特殊脚本（比如防止样式闪烁的初始化脚本），不要加defer，保持同步加载放在head靠前位置即可。
  • 非首屏交互用到的脚本（比如长页面滚动触发的功能、页脚交互逻辑），可拆分出去做按需加载，不用在head内提前全量加载。

内容的提问来源于stack exchange，提问作者kanohn