web-网站在Chrome上滚动时滞后

我的网站 (https://whatifhq.com) 加载正常,并且相当快。但是,当我尝试向下滚动时,它开始变得 laggy 并且不再平滑。我只在 Chrome 中遇到过这个问题。(在 chrome,edge,ie 上测试)。我正在使用 Chrome V 70,WordPress for my website 和 PHP 7.1

我的网站 (https://whatifhq.com) 加载正常,并且相当快。但是,当我尝试向下滚动时,它开始变得 laggy 并且不再平滑。我只在 Chrome 中遇到过这个问题。(在 chrome,edge,ie 上测试)。我正在使用 Chrome V 70,WordPress for my website 和 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。我删除了脚本,页面仍然滞后。

这是我的 My 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

我在滚动非 ajax 页面时进行了一些性能分析:https://prnt.sc/lh0s2d。请注意,滚动时 fps 如何下降到〜 10,并且requestAnimationFrame()调用消耗了 95 % 的时间。看起来这一切都归结为在每个帧上调用的这个函数:https://prnt.sc/lh0s5f

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(758)
我们如何使用来自Excel宏(vba)的restfulAPI
上一篇
如何使用Python3.x获取网站的IP地址
下一篇

相关推荐

  • java和javascript:如何使用Java和JavaScript实现Web开发

    示例示例Java和都是编程语言,但它们之间有很大的不同。Java是一种面向对象的、编译型的、跨平台的编程语言,它的代码在运行前需要编译成字节码,然后才能在计算机上运行。Java程序可以在任何支持Java虚拟机的计算机上运行,而不必重新编译。下面是一个简单的Java程序:…

    2023-01-13 09:45:13
    0 97 48
  • restful和webservice区别比较两种不同的Web服务架构

    示例示例Restful和都是用于实现远程调用的技术,但它们之间有一些重要的区别。Restful是一种设计风格,它使用HTTP协议来传输数据,而是一种技术,它使用XML来传输数据。…

    2023-03-14 00:59:51
    0 75 42
  • jquery的css:Unlock the Power of jQuery CSS to Enhance Your Web De

    jQuery的css()函数用于设置或返回元素的CSS属性值。该函数可以接受两个参数,第一个参数是CSS属性名,第二个参数是CSS属性值。…

    2023-02-23 14:15:41
    0 23 22
  • curl什么意思:使用Curl提高Web开发效率

    cURL是一个开源的网络传输库,它支持多种协议,如HTTP、HTTPS、FTP、FTPS、SCP、SFTP、TFTP、LDAP、DICT、TELNET、FILE、IMAP、POP3、SMTP等。它可以用来发送GET和POST请求,也可以用来上传文件,接收和发送cookies,以及模拟用户行为。…

    2023-04-29 12:50:39
    0 97 34
  • Cb站网址:没有文件扩展名的网站网址 (how to submit a website url)

    关于Cb站网址的问题,在how to submit a website url中经常遇到,当我查看 Amazon.com 时,我看到他们的页面 URL,它在 URL 的末尾没有.htm,.html或.php。…

    2022-12-17 06:19:01
    0 91 61
  • 博客网站源代码:查看网站的实际源代码(how to see the code of a website)

    关于博客网站源代码的问题,在how to see the code of a website中经常遇到,我会用一个例子来解释我的问题。建议我去的 URL:http://www.google.co.il/#q=university…

    2022-11-29 12:20:34
    0 65 66
  • 如何将AzureAD身份验证添加到现有的.NETMVCWeb应用程序

    我有一个使用 Windows 身份验证的现有.NET MVC Web 应用程序。当我们将项目从本地迁移到 Azure 时,有必要更新应用程序以使用 Azure AD 身份验证。我试图使用 VS 2019 使用 Connected Services,但无法找到 Azure AD 身份验证相关服务。任何人都可以分享将 Azure AD 添加到现有应用程序的过程吗?…

    2022-12-06 08:55:15
    0 92 88
  • crestron是什么牌子领先的家庭自动化技术提供商

    Crestron是一家全球领先的自动化和控制技术公司,专注于提供先进的系统解决方案,用于智能家居,企业,教育,医疗和公共空间。 Crestron的产品结合了最新的技术,如触摸屏,遥控器,智能手机应用程序,智能家居技术,网络解决方案,多媒体控制和投影仪控制等,可提供完整的控制和自动化解决方案。 Crestron的核心代码是“CTRL”,它是Crestron的控制系统的基础。…

    2023-08-02 00:45:01
    0 86 22

发表评论

登录 后才能评论

评论列表(83条)