响应式菜单 (mmenu) 导致 CLS 高
我在我的网站上使用mmenu作为响应式菜单。我最近注意到，在 Google 搜索控制台中，由于 CLS（累积布局偏移）较高而出现错误。我检查了一下，确实如此，当我尝试以“慢速”模式打开页面半秒时，我看到原始菜单结构，然后加载菜单（在 jQuery 准备就绪等之后）并且页面显示正确。
我的简化页面结构是：
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
});
});
<html>
<head>
</head>
<body>
<nav id="menu">
<ul>
<li><a>Categories</a>
<ul>
<li>
<a href="https://example.com/1">Link 1</a>
</li>
<li>
<a href="https://example.com/2">Link 2</a>
</li>
<li>
<a href="https://example.com/3">Link 3</a>
</li>
</ul>
</nav>
<div class="content">This is content</div>
</body>
</html>
您认为，是否可以在此处应用任何快速修复来解决我的 CLS 问题？
潇潇雨雨3回答
-
慕标琳琳
#menu没有任何使用 mmenu 的经验，使用 CSS 隐藏并仅在菜单初始化后才显示它难道不就足够了吗？这似乎对我有用：<html><head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.min.css" /></head><script type="text/javascript" data-no-instant>$(document).ready(function() { $("#menu").mmenu({ "extensions": ["pageshadow"], "header": { "title": "Menu", "add": true, "update": true } }, { // config offCanvas: { pageSelector: "#container" } }).css("display", "");});</script></head><body> <nav id="menu" style="display: none"> <!-- <nav> content from your example --> </nav> <a href="#menu">open menu</a> <div class="content">This is content</div></body></html> -
SMILET
我处理这个问题的方法是使用一个与问题元素具有相同大小/形状/颜色的虚拟元素来充当占位符，同时隐藏问题元素。加载 jQuery 后，我将删除/隐藏虚拟元素并显示问题元素。 -
慕姐4208626
如果没有看到实际的代码，很难回答，但是为了不必等待整个页面准备好，您可以以不需要使用 jQuery 调用的方式定位脚本ready。尝试以下操作：1 - 在本地加载 jQuery，而不是从 CDN2 - 将 jQuery 脚本标记放在实际的正文 html 数据之前，并将该mmenu调用放在正文的 html 代码之后，这样在加载所有内容之前不会显示内容另一种选择是让你的主体显示加载动画，直到 jQuery 和其他 cdns 加载完毕，这样你就能够获取所有内容，运行该 mmenu 调用，然后才向用户显示内容，这种方法有点多用户友好然后是我建议的，因为它实际上不会显示空白屏幕，而是显示一些反馈，表明正在为连接速度较慢的用户加载内容。
随时随地看视频慕课网APP
相关分类
JavaScript