无限滚动功能问题：滚动时浏览器频繁卡顿求解

我为项目开发了一个无限滚动功能（index.php），当用户滚动到页面底部时，会从带offset参数的load.php加载内容。目前遇到两个问题：

• 移动设备浏览器（iOS端Firefox和Safari）滚动时会短暂卡顿1-2秒，之后才能继续滚动，体验很差
• 笔记本/PC端（Win10系统的Firefox和Edge）功能正常，但加载新内容时滚动条会快速上下跳动，无法稳定，观感不佳

原代码片段 #

HTML（index.php） #

<!-- Fallback -->
<div id="no" style="display:none">
   No Content found...
</div>

<!-- Infinity -->
<div id="inf-0"></div><div id="inf-3" style="display:none"></div><div id="inf-6" style="display:none"></div><div id="inf-9" style="display:none"></div><div id="inf-12" style="display:none"></div><div id="inf-15" style="display:none"></div><div id="inf-18" style="display:none"></div><div id="inf-21" style="display:none"></div><div id="inf-24" style="display:none"></div><div id="inf-27" style="display:none"></div><div id="inf-30" style="display:none"></div><div id="inf-33" style="display:none"></div><div id="inf-36" style="display:none"></div><div id="inf-39" style="display:none"></div><div id="inf-42" style="display:none"></div><div id="inf-45" style="display:none"></div> ...

<!-- Spinner -->
<center><i class="fas fa-spinner fa-pulse fa-2x" id="spinner"></i></center>

JavaScript #

var end = 0;
var infinity = 0;

window.addEventListener('load', function () {
    feed(infinity);
    infinity = infinity+3;
});

$(window).scroll(function() { 
    if(end == 0) {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 75) {
            document.getElementById("inf-"+infinity).style.display = "block";
            feed(infinity);
            infinity = infinity+3;
        }
    }
});

function feed(infinity) {
    $("#inf-" + infinity).load("load.php?off="+infinity+"&url="+encodeURIComponent(window.location.href), function( response, status, xhr ) {
        if (response == "") {
            document.getElementById("spinner").style.display = "none";
            document.getElementById("inf-"+infinity).style.display = "none";
            end = 1;
        } else {
            if (response == "no") {
                document.getElementById("spinner").style.display = "none";
                document.getElementById("inf-"+infinity).style.display = "none";
                document.getElementById("no").style.display = "block";
                end = 1;
            } else {
                document.getElementById("spinner").style.display = "block";
            }
        }  
    });
}

优化方案 #

1. 防抖处理滚动事件 #

滚动事件会高频触发，直接绑定会导致多次执行加载逻辑，引发卡顿和滚动条跳动。添加防抖函数限制触发频率：

// 防抖函数：延迟执行，避免高频触发
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 替换原滚动事件监听
$(window).scroll(debounce(function() { 
    if(end === 0 && !isLoading) {
        const scrollBottom = $(window).scrollTop() + $(window).height();
        const pageHeight = document.documentElement.scrollHeight;
        if(scrollBottom > pageHeight - 75) {
            isLoading = true;
            // 动态创建容器替代提前写死的div
            const container = $('<div id="inf-' + infinity + '"></div>').appendTo('#infinite-container');
            feed(infinity, container);
            infinity += 3;
        }
    }
}, 150)); // 150ms延迟，可根据需求调整

2. 新增加载锁避免重复请求 #

添加全局变量isLoading，确保同一时间只有一个加载请求在进行：

var end = 0;
var infinity = 0;
var isLoading = false; // 加载锁

function feed(offset, container) {
    container.load("load.php?off="+offset+"&url="+encodeURIComponent(window.location.href), function( response, status, xhr ) {
        isLoading = false; // 请求完成后解锁
        if (response === "") {
            $("#spinner").hide();
            container.remove();
            end = 1;
        } else if (response === "no") {
            $("#spinner").hide();
            container.remove();
            $("#no").show();
            end = 1;
        } else {
            $("#spinner").show();
        }  
    });
}

3. 优化DOM结构，动态创建容器 #

原代码提前创建大量空div，增加DOM节点数量影响性能。改为动态创建容器：

<!-- 简化HTML结构 -->
<div id="infinite-container"></div>
<div id="no" style="display:none">No Content found...</div>
<center><i class="fas fa-spinner fa-pulse fa-2x" id="spinner"></i></center>

4. 修正滚动位置计算逻辑 #

移动端浏览器地址栏动态变化会导致$(document).height()计算不准，改用document.documentElement.scrollHeight获取准确页面高度：

const scrollBottom = $(window).scrollTop() + $(window).height();
const pageHeight = document.documentElement.scrollHeight;
if(scrollBottom > pageHeight - 75) {
    // 加载逻辑
}

5. 移动端滚动性能优化 #

给内容容器添加CSS开启硬件加速，减少滚动卡顿：

#infinite-container {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

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