升级jQuery与Bootstrap后遇TypeError及页面加载缓慢问题求助

一、修复 Uncaught TypeError: e.indexOf is not a function 错误 #

这个错误核心原因是jQuery 3.x 移除/修改了旧版本API，或是第三方插件、自定义代码不兼容jQuery 3.x，具体解决步骤如下：

1. 排查第三方插件兼容性 #

你使用的 datatables.net-buttons-bs、AdminLTE、particles-custom.js 等插件可能不兼容jQuery 3.6.3：

• 升级DataTables及其按钮插件到支持jQuery 3.x的版本（如DataTables 1.10.20+）；
• 确认AdminLTE版本适配jQuery 3.x（建议升级至AdminLTE 2.4.18+，该版本官方支持jQuery 3.x）；
• 检查 particles-custom.js、ajax-core.js 等自定义脚本，确认是否使用了jQuery 3.x已移除的API（比如 $.browser、非window对象的$.fn.load()、$.fn.unload() 等）。

2. 修复jQuery 3.x不兼容的API调用 #

如果自定义代码存在以下情况，需对应修改：

• 替换废弃的事件方法：将 $(img).load(function(){}) 改为 $(img).on('load', function(){})；
• 避免调用非字符串/数组的indexOf：如果报错位置在自定义代码，先检查变量 e 的类型，确保是字符串或数组后再调用方法，示例：

  if (typeof e === 'string' || Array.isArray(e)) {
    // 执行indexOf操作
  }
  

3. 临时兼容方案：引入jQuery Migrate #

如果暂时无法全面修改代码，可引入jQuery Migrate 3.x插件，它会兼容jQuery 3.x移除的旧API，并在控制台输出兼容性警告，帮助定位需修改的代码：

{% block js %}
    <!-- jQuery -->
    <script src='{% static "/vendors/jquery/dist/jquery.min.js" %}'></script>
    <!-- 引入jQuery Migrate 3.x -->
    <script src='{% static "/vendors/jquery-migrate/dist/jquery-migrate.min.js" %}'></script>
    <!-- Bootstrap -->
    <script src='{% static "/vendors/bootstrap/dist/js/bootstrap.min.js" %}'></script>
    <!-- 其他JS文件 -->
{% endblock js %}

二、解决网页加载耗时过长的问题 #

1. 优化资源加载策略 #

• 合并压缩资源：将多个CSS、JS文件分别合并为单个文件，减少HTTP请求次数；
• 改用CDN加载公共库：使用CDN加载jQuery、Bootstrap、Font Awesome等公共资源，利用CDN的全球缓存加快加载速度，示例：

  <!-- 替换本地jQuery为CDN -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
  <!-- 替换本地Bootstrap为CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  

• 启用静态资源缓存：在服务器端配置静态资源的缓存头（如 Cache-Control: max-age=31536000），让浏览器缓存静态文件，避免重复下载。

2. 优化图片资源 #

• 压缩图片：使用TinyPNG等工具压缩 login_background.jpg、logo.jpg，减少图片文件大小；
• 改用现代图片格式：将图片转换为WebP格式，在保持画质的前提下大幅减小体积，可通过CSS做兼容回退：

  body {
    background-image: url("/static/images/login_background.webp");
  }
  /* 兼容不支持WebP的浏览器 */
  @supports not (background-image: url("")) {
    body {
      background-image: url("/static/images/login_background.jpg");
    }
  }
  

3. 优化粒子动画加载 #

粒子动画脚本 particles-custom.js 可能阻塞页面渲染，建议在页面完全加载后再初始化：

// 修改粒子动画初始化逻辑
$(window).on('load', function() {
  $("body").prepend('<div id="particles-js"></div>');
  // 粒子动画初始化代码放在此处
});

4. 移除不必要的资源 #

检查页面中未使用的资源，比如当前页面若不需要DataTables按钮样式，可移除 datatables.net-buttons-bs/css/buttons.bootstrap.min.css，减少加载量。

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