我的网站 (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).removeCl('hide');
$(loading).attr('data-fetch',0);
},
error : function(){
$(loading).addCl('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).addCl('hide');
$(loading).attr('data-fetch',1);
}else{
$(loading).addCl('hide');
}
},1500);
}
});
}
});
我在滚动非 ajax 页面时进行了一些性能分析:https://prnt.sc/lh0s2d。请注意,滚动时 fps 如何下降到〜 10,并且requestAnimationFrame()
调用消耗了 95 % 的时间。看起来这一切都归结为在每个帧上调用的这个函数:https://prnt.sc/lh0s5f。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(75条)