网站-在Chrome浏览器上滚动浏览网站时,会感到时滞

时间:2018-11-11 16:22:13

标签: javascript html scroll infinite-scroll

我的网站(https://whatifhq.com)加载良好,并且运行很快。但是,当我尝试向下滚动时,它开始变得缓慢并且不再平滑。我仅在Chrome中遇到此问题。 (在chrome,edge上进行了测试)。我的网站使用的是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%以上的Pagespeed,全部为“ 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);
                }
            }); 
        }
    });

1 个答案:

答案 0 :(得分:1)

在滚动非ajax页面时,我做了一些性能分析:https://prnt.sc/lh0s2d。请注意,滚动时fps如何降至约10,requestAnimationFrame()调用占用了95%的时间。看起来一切都归结为在每个帧上调用的函数:https://prnt.sc/lh0s5f。我怀疑document.querySelectorAll()setAttribute()的价格非常昂贵,并且在每个帧上这样称呼它们是造成延迟的原因。