Bootstrap切换菜单失效排查及网站提速优化咨询

一、折叠菜单失效原因分析 #

• 版本严重不兼容：你引入了Bootstrap 4.4.1的CSS文件，但搭配了Bootstrap 5.0.2的JS和Popper 2.x，两个版本的API规范、依赖逻辑完全不同，直接导致交互功能无法触发。
• 脚本依赖缺失与顺序错误：Bootstrap 4的交互功能依赖jQuery和Popper 1.x，但你不仅没引入Bootstrap 4的JS文件，还把jQuery放在了页面末尾，且引入了不匹配的Popper 2.x，核心依赖链断裂。
• 属性逻辑冲突：Bootstrap 4使用data-toggle="collapse"触发折叠，而Bootstrap 5改用data-bs-toggle="collapse"，版本混装下即使属性正确也无法正常工作。

二、需移除的冗余资源 #

• Bootstrap 5.0.2的JS文件：<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"...>
• Popper 2.9.2的JS文件：<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"...>
• 指向Bootstrap官网的canonical链接：<link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/jumbotron/">
• 官网的favicon相关资源：<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon.ico">和<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">（建议替换为自身站点图标或直接移除）
• Jekyll生成器meta标签：<meta name="generator" content="Jekyll v3.8.6">（未使用Jekyll构建时可删除）

三、修复后的核心代码调整 #

统一使用Bootstrap 4.x配套资源，调整脚本加载顺序：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <title>Pipes and Wheels</title>
    <meta name="theme-color" content="#563d7c">

    <!-- Bootstrap 4.x 核心CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- 自定义样式 -->
    <link href="jumbotron.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-white">
        <a class="navbar-brand" href="#"><img style="height: 100px;" src="logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#jumbotron1" style="color: black;">Our goals <span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <!-- 按依赖顺序引入脚本：jQuery → Popper.js → Bootstrap 4.x JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

四、网站提速优化方案 #

• 资源版本强统一：始终保持Bootstrap CSS、JS、依赖库（jQuery、Popper）版本匹配，杜绝跨版本混搭。
• 脚本异步加载：对非核心脚本添加async或defer属性，避免阻塞页面渲染。
• 静态资源压缩：确保所有引入的CSS、JS为.min压缩版本，自定义样式和脚本也需提前压缩。
• 图片优化：压缩logo.png等图片体积，改用WebP格式，添加loading="lazy"实现懒加载。
• 缓存策略配置：在服务器端为静态资源（CSS、JS、图片）设置合理的缓存过期时间，减少重复请求。
• 冗余代码清理：定期清理页面中未使用的CSS规则、JS片段，以及无关的meta标签、链接。

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