Safari中使用.load()执行搜索后div未刷新问题求助

这大概率是Safari的渲染重绘/重排延迟问题，而非缓存问题，原因很直观：

• 你已经通过console.log确认DOM已经正常加载，说明AJAX请求和DOM插入都成功了，缓存问题不会导致DOM存在但不显示；
• 打开Web Inspector或移动区域会强制浏览器触发重绘/重排，这是这类渲染延迟问题的典型特征——Safari的渲染引擎在某些动态DOM更新场景下，不会自动触发重绘，需要手动“唤醒”它。

具体解决办法 #

1. 在AJAX回调中强制触发重绘

在load方法的回调函数里，给目标元素做一个微小的样式修改，强制Safari重新渲染该区域：

$("#searchBox").on("keyup",function(){ 
  var search = $(this).val(); 
  if(search != ""){ 
    load_data(search); 
  } else { 
    load_data(); 
  } 
}); 

function load_data(search){
  $("#leftContent").load(
    "includes/handlers/search-handler.php", 
    {search:search}, 
    "#article",
    // 加载完成后的回调，强制触发重绘
    function() {
      const $leftContent = $(this);
      // 先隐藏再显示，触发重排
      $leftContent.css('display', 'none');
      void $leftContent[0].offsetHeight; // 读取offsetHeight会强制浏览器计算布局
      $leftContent.css('display', '');
    }
  ); 
}

或者用硬件加速的方式（更平滑，无闪烁）：

function load_data(search){
  $("#leftContent").load(
    "includes/handlers/search-handler.php", 
    {search:search}, 
    "#article",
    function() {
      const $leftContent = $(this);
      // 开启硬件加速触发重绘
      $leftContent.css('transform', 'translateZ(0)');
      // 延迟恢复样式，避免影响布局
      setTimeout(() => $leftContent.css('transform', ''), 0);
    }
  ); 
}

2. 优化搜索事件的触发频率

你的keyup事件会在每输入一个字符就触发一次AJAX请求，频繁的DOM更新可能加重Safari的渲染负担，建议添加防抖函数减少请求次数：

// 防抖计时器
let searchDebounceTimer;

$("#searchBox").on("keyup",function(){ 
  clearTimeout(searchDebounceTimer);
  var search = $(this).val(); 
  // 延迟300ms执行，避免频繁请求
  searchDebounceTimer = setTimeout(() => {
    if(search != ""){ 
      load_data(search); 
    } else { 
      load_data(); 
    }
  }, 300);
}); 

function load_data(search){
  $("#leftContent").load("includes/handlers/search-handler.php", {search:search}, "#article"); 
}

3. 检查目标元素的CSS样式

确认#leftContent的CSS没有设置可能影响渲染的属性，比如：

• visibility: hidden（虽然DOM存在，但元素不可见）
• overflow: hidden且初始高度为0（加载内容后高度未自动计算）
• 存在动态切换display的逻辑，确保加载内容后恢复为block/flex等可见值

为什么排除缓存问题？ #

如果是缓存问题，通常表现为：

• 加载的内容是旧数据，而非空白；
• console.log中不会看到新的DOM内容；
• 打开Web Inspector不会让缓存的内容突然显示——缓存问题需要清理缓存或添加缓存控制头解决，和重绘无关。

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