网络 - 在 chrome 上滚动时网站滞后 [关闭]答案

【问题标题】：web - website is laggy when scrolling on chrome [closed]网络 - 在 chrome 上滚动时网站滞后 [关闭]
【发布时间】：2023-03-23 03:56:02
【问题描述】：

我的网站 (https://whatifhq.com) 加载良好，而且速度非常快。但是，当我尝试向下滚动时，它开始变得迟钝并且不再流畅。我只在 Chrome 中遇到过这个问题。（在铬，边缘，即测试）。我正在为我的网站使用 Chrome V 70、WordPress 和 PHP 7.1

我阅读了其他一些 SO 帖子，最推荐删除一些脚本、图像、动画。因此，我删除了 animate.css、Adsense 和其他一些图像。但是，它仍然无法正常工作。

此问题仅发生在桌面上。我网站的移动版本在同一台计算机上运行良好。（移动端和桌面端的内容基本一致。）

可能导致问题的一件事是我的 AJAX 无限滚动脚本。它检查窗口的位置，然后决定是否加载新内容。但是，此功能也在我的移动网站上，效果很好。此外，滚动问题也出现在没有 AJAX 的页面上，例如 https://whatifhq.com/question/where-can-one-find-some-good-resume-cv-templates/

我还进行了一些速度测试，并获得了非常好的分数。 85%+ 页面速度，所有“A”WebPageTest。

有人可以帮忙吗？

编辑：不是 Ajax。我删除了脚本，页面仍然滞后。

这是我的 AJAX 脚本

$(document).ready(function(){
    InfinitiScroll = Backbone.View.extend({
        el: 'body',
        initialize : function(){
            var view = this;

            $(window).scroll(function(){
                if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 1000  && $("#post_loading").attr('data-fetch') == 1 ){
                    view.ajaxData(query_default);   
                }

            });

            var loading         = $('body').find('#post_loading'),
                fetch           = $(loading).data('fetch'),
                type            = $(loading).data('type'),
                term            = $(loading).data('term'),
                taxonomy        = $(loading).data('taxonomy'),
                posts_per_page  = $(loading).data('current-page'),
                sort            = $(loading).data('sort'),
                keyword         = $(loading).data('keyword'),
                query_default = {
                            action : 'et_post_sync',
                            method : 'scroll',
                            data : {
                                posts_per_page : posts_per_page,
                                type : type,
                                term : term,
                                taxonomy : taxonomy,
                                sort : sort,
                                page : 1,
                                keyword : keyword
                            }
                        };
            setInterval(function(){
                if($('ul#main_questions_list li.question-item').length < 6 && $("#post_loading").attr('data-fetch') == 1 ){
                    view.ajaxData(query_default);
                }                           
            }, 3000);                           

        },
        ajaxData : function(query_default){
            var loading = $('body').find('#post_loading');
            query_default['data']['page'] += 1;

            $.ajax({
                url : ae_globals.ajaxURL,
                type : 'post',
                data : query_default,
                beforeSend : function(){
                    $(loading).removeClass('hide');
                    $(loading).attr('data-fetch',0);
                },
                error : function(){
                    $(loading).addClass('hide');
                    $(loading).attr('data-fetch',1);
                },
                success : function (response){
                    setTimeout(function(){
                        if(response.success){
                            var container = $('body').find('#main_questions_list'),
                                questions = response.data.questions;
                            for (key in questions){
                                $(container).append(questions[key]);
                            }
                            $(loading).addClass('hide');
                            $(loading).attr('data-fetch',1);
                        }else{
                            $(loading).addClass('hide');
                        }

                    },1500);
                }
            }); 
        }
    });

【问题讨论】：

w3schools.com/howto/howto_css_smooth_scroll.asp。希望这能解决。除非你展示你的 ajax 脚本，否则我们真的帮不了你
@magpie 我添加了代码
我在滚动您的非 ajax 页面时进行了一些性能分析：prnt.sc/lh0s2d。请注意 fps 如何在滚动时下降到 ~10，并且 95% 的时间被 requestAnimationFrame() 调用消耗。看起来这一切都归结为在每一帧上调用的这个函数：prnt.sc/lh0s5f。我怀疑document.querySelectorAll() 和setAttribute() 非常昂贵，并且在每一帧上都这样称呼它们是造成延迟的原因
@shkaper 非常感谢！你是对的。事实证明，这是 Swift Performance 的一个问题。由于我启用了延迟加载，因此 Swift 会检查每一帧图像是否已加载。我现在禁用延迟加载并且它超级流畅。问题解决了！
@PicturePerfect366 这太棒了！我会将其添加为答案，以便您关闭问题。

标签： javascript html scroll infinite-scroll

【解决方案1】：

我在滚动您的非 ajax 页面时进行了一些性能分析：https://prnt.sc/lh0s2d。请注意 fps 在滚动时如何下降到 ~10，并且 95% 的时间被 requestAnimationFrame() 调用消耗。看起来这一切都归结为在每一帧上调用的这个函数：https://prnt.sc/lh0s5f。我怀疑document.querySelectorAll() 和setAttribute() 非常昂贵，并且在每一帧上都这样称呼它们会导致延迟。

【讨论】：