滚动脚本致浏览器标签持续加载转圈，请求排查问题

先看你提供的滚动脚本代码：

<script>
    jQuery(document).ready(function ($) {
        $(document).on('scroll', function () {
            $('.logo img').toggleClass('small', $(document).scrollTop() >= 10);
        });
    });
</script>

脚本本身的问题分析 #

这段脚本不会直接引发页面持续加载转圈，它仅监听滚动事件、切换logo图片的small类。但存在可优化的点，且需排查间接关联的异常：

• 每次滚动都重复执行$('.logo img')DOM查询，高频滚动下会增加不必要的开销；
• 若small类涉及元素尺寸/位置变更，反复触发重排重绘可能导致主线程阻塞，但一般不会触发加载状态持续。

页面持续加载的核心排查方向 #

浏览器标签持续转圈，更可能是以下非脚本直接导致的问题：

• 页面存在未完成的网络请求（如图片、接口加载失败后持续重试）；
• 其他脚本存在无限循环、异步请求阻塞逻辑；
• 滚动事件触发了意外的资源加载（如与页面懒加载逻辑冲突）。

优化与排查建议 #

1. 优化滚动脚本性能：缓存DOM元素并添加节流，减少高频触发的开销

<script>
    jQuery(document).ready(function ($) {
        const $logoImg = $('.logo img'); // 提前缓存目标元素
        let ticking = false;
        $(document).on('scroll', function () {
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    $logoImg.toggleClass('small', $(document).scrollTop() >= 10);
                    ticking = false;
                });
                ticking = true;
            }
        });
    });
</script>

2. 排查页面其他异常：
   • 打开浏览器开发者工具（F12），在「网络」标签查看是否有pending状态的请求；
   • 在「控制台」标签检查是否有报错信息；
   • 用「性能」标签记录滚动时的主线程阻塞情况，定位资源消耗点。

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