Bootstrap modal在Firefox运行正常但Chrome不生效问题咨询

问题产生原因 #

• Bootstrap 模态框的hide/show方法是异步执行的，内置过渡动画逻辑，相关DOM更新和渲染会被浏览器推入任务队列等待执行。
• Chrome的主线程调度策略中，同步JS任务的优先级高于UI重绘任务，你后续的Papa.parse解析逻辑、以及大量设置了async: false的同步AJAX请求属于重负载同步阻塞任务，会完全占住主线程，导致浏览器没有空闲时间执行模态框的UI渲染操作，直到所有同步任务执行完毕才会更新页面视图，因此出现模态框迟迟不切换的现象。
• Firefox的主线程调度策略对UI渲染的优先级更高，可以在同步任务执行前先完成模态框的切换，因此运行符合预期。
• 额外隐含问题：你代码中的进度条更新也会被同步任务阻塞，无法实时变化，所有进度更新会等到任务结束后一次性生效，看不到渐变过程。

解决方案 #

步骤1：等待模态框完全显示后再执行解析逻辑 #

利用Bootstrap模态框的shown.bs.modal事件，确认进度条模态框已经完全渲染完成后，再启动解析和请求逻辑，避免异步渲染和同步任务冲突。
修改点击事件逻辑如下：

$('#BtnUpCsv').on('click', function (e) {
  $('#csvModal').modal('hide');
  $('#pBarModal').modal('show');
  // 仅绑定一次shown事件，执行完自动销毁
  $('#pBarModal').one('shown.bs.modal', function() {
    // 在这里执行Papa.parse逻辑
    Papa.parse(document.getElementById('csvinput').files[0], {
      // 原有解析配置保持不变
    });
  })
});

步骤2：移除所有同步AJAX，改为异步请求 #

async: false是导致主线程阻塞的核心原因之一，将所有AJAX改为异步，同时封装重复的请求逻辑，用异步遍历控制执行顺序，保证进度条可以实时更新。
修改complete回调内的逻辑如下：

complete: async function(results) {
  pBarMax = results.data.length - 1;
  iPbar = 0;
  // 异步遍历每一条数据
  for (const data of results.data) {
    const csvPcode = data.pcode;
    // 把所有字段整理成数组，批量处理请求
    const fields = [
      {name: 'AntiOx', value: data.AntiOx},
      {name: 'Calories', value: data.Calories},
      {name: 'Carbs', value: data.Carbs},
      {name: 'Fats', value: data.Fats},
      {name: 'Fibers', value: data.Fibers},
      {name: 'Lipides', value: data.Lipides},
      {name: 'Proteins', value: data.Proteins},
      {name: 'Sat_fats', value: data.Sat_fats},
      {name: 'Sodium', value: data.Sodium},
      {name: 'Sugars', value: data.Sugars}
    ];
    // 并发发送当前行的所有字段请求
    await Promise.all(fields.map(field => {
      return $.ajax({
        type: 'POST',
        url: '../contents/cbk-data-process.php',
        data: {
          method: 'prod-variable-saveby-name',
          node: <?php echo $node ?>,
          pcode: csvPcode,
          objectname: field.name,
          value: field.value
        },
        dataType: 'json'
      });
    }));
    // 更新进度条，此时主线程空闲，可以正常渲染
    iPbar++;
    pBarPerc = ((iPbar/pBarMax) * 100).toFixed();
    $('#progressBar').text(pBarPerc + '%');
    $('#progressBar').css('width', pBarPerc + '%');
  }
  // 原有完成后的逻辑保持不变
  $('#pBarModalLabel').text('Completed, ' + results.data.length + ' records updated');
  pBarMax = 0;
  pBarPerc = 0;
  $('#tbl-pcodes').DataTable().ajax.reload();
  setTimeout(function() {$('#pBarModal').modal('hide');}, 2000);
  setTimeout(function() {$('#pBarModalLabel').text('Processing... please wait');}, 2500);
}

额外优化建议 #

• 如果CSV数据量很大，可以给Papa.parse开启worker: true配置，用Web Worker在后台线程执行CSV解析，完全不阻塞主线程的UI渲染。
• 可以把单条数据的10个字段请求合并成一个接口请求，减少网络IO次数，大幅提升处理速度。

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