Javascript 响应菜单（mmenu）导致高CLS_Javascript_Html_Jquery_Performance_Google Search Console

Javascript 响应菜单（mmenu）导致高CLS

javascript html jquery performance

Javascript 响应菜单（mmenu）导致高CLS,javascript,html,jquery,performance,google-search-console,Javascript,Html,Jquery,Performance,Google Search Console,我使用的是我网站上的响应菜单。我最近注意到，在谷歌搜索控制台中，由于高CLS（累积布局变化），我出现了一些错误。我检查过了，这是真的，当我尝试以“慢速”模式打开页面半秒时，我看到了原始的菜单结构，然后加载mmenu（在jQuery就绪等之后），页面显示正确我的简化页面结构是： $（文档）.ready（函数（）{ $（“#菜单”）.mmenu({ “扩展”：[“页面阴影”]， “标题”：{ “标题”：“菜单”， “添加”：正确， “更新”：正确 } }, { //配置非画布：{ 页面选择器：

我使用的是我网站上的响应菜单。我最近注意到，在谷歌搜索控制台中，由于高CLS（累积布局变化），我出现了一些错误。我检查过了，这是真的，当我尝试以“慢速”模式打开页面半秒时，我看到了原始的菜单结构，然后加载mmenu（在jQuery就绪等之后），页面显示正确

我的简化页面结构是：

$（文档）.ready（函数（）{
$（“#菜单”）.mmenu({
“扩展”：[“页面阴影”]，
“标题”：{
“标题”：“菜单”，
“添加”：正确，
“更新”：正确
}
}, {
//配置
非画布：{
页面选择器：“#容器”
}
});
});









这就是内容
如果没有任何使用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>


$（文档）.ready（函数（）{
$（“#菜单”）.mmenu({
“扩展”：[“页面阴影”]，
“标题”：{
“标题”：“菜单”，
“添加”：正确，
“更新”：正确
}
}, {
//配置
非画布：{
页面选择器：“#容器”
}
}).css（“显示”、“显示”）；
});
这就是内容
在没有看到实际代码的情况下很难回答，但要想不等待整个页面准备就绪，您可以将脚本放置在一个不需要使用jQuery的ready
调用的位置
请尝试以下操作：

1-从CDN本地加载jQuery

2-将jQuery脚本标记放在实际的正文html数据之前，并将mmenu
调用放在正文html代码之后，这样在加载所有内容之前不会显示内容
另一种方法是让身体显示加载动画，直到jQuery和其他CDN加载完毕，这样你就可以获取所有内容，运行mmenu调用，然后才向用户显示内容，与我建议的方法相比，这种方法更加用户友好，因为它实际上会显示一些反馈信息，表明内容是为连接速度较慢的用户加载的。
要解决此问题，您需要更改java脚本和CSS的一些代码结构和顺序，这需要一些努力/测试
但是您可以尝试显示一个加载程序/进度条，直到加载“mmenu”，这可能会解决您的问题。
我处理这个问题的方法是，让一个与问题元素大小/形状/颜色相同的虚拟元素作为占位符，同时隐藏问题元素。加载jQuery后，我会删除/隐藏虚拟元素并显示问题元素。
不确定究竟是什么导致了cls，这也取决于菜单在之前/之后的外观，但我认为在执行mmenu之前尝试隐藏菜单是值得的。在菜单中添加一个类，使其占据所需的空间，可能是一个加载器，然后在mmenu执行后删除该类，这样可以最小化布局更改并避免任何硬闪烁。实际上我不知道你为什么被否决。这是一个简单且有效的解决方法。