Question

我目前正在计划改造客户的网站，这是一个面向消费者的电子商务网站（非SPA），重点关注的领域是客户端的性能。

该站点最热门的区域之一是菜单导航，其中包括向下滑动的第二级菜单等。该菜单项位于第一折，并且即使用户连接速度较慢，我们也希望此功能几乎立即生效。到目前为止，由于我们的目标是浏览器，而且这次检修的范围还很有限，因此使用CSS尚无法做到这一点-尽管据指出，这将是明年的目标。

大多数博客仍在倡导在使用DOM之前先等待onReady（或非jQuery等效版本）的想法，我认为这为时已晚，尤其是在移动设备上，我们确实关心第一个非缓存的负载。

有什么好的加载Javascript的策略和模式，以便某些元素尽快运行？

到目前为止，我已经考虑过与GTM datalayer.push和旧版GA _gaq.push类似的模式

<script src="/js/menu.js" defer="true" />
<body>
 <div id="menu" data-comment="obviously massively simplified here">
     <a onclick="function(e) { window.actionQueue.push(e) }; return false">a link</a>

不阻止页面加载，尽快开始加载菜单（可能在domReady之前完成），menu.js清空actionQueue并覆盖推送以供将来触发...下一页请求应已缓存菜单.js，因此几乎可以立即使用

或者在主体级别捕获点击以删除嵌入式js

<script>
 window.actionQueue = [];
 window.document.addEventListener('click', function(e) {
    if(e.target.className.includes("menu-item")) {
      window.actionQueue.push(e)
      return false;
    }
 });
</script>
<script src="/js/menu.js" defer="true" />
<body>

  <div id="menu" data-comment="obviously massively simplified here">
     <a class='menu-link">a link</a>

此方法有什么问题？有更好的吗？

非SPA前端-立即互动JS元素的最佳做法

0 个答案: