本机chrome加载jekyll博客页面DOM非常慢、但是其他浏览器和虚拟机中的chrome正常
jekyll的博客在chrome中突然出现DOM加载非常慢的情况,导致CSS的所有animation和transition缓慢,但是该问题只出现在了中文博客,所有的英文博客内容加载正常。
本机MAC chrome加载不正常,但是firefox和safari上都显示正常,CSStransition和animation也正常。并且,在虚拟机ubuntu和win8中尝试,chrome也加载正常。
已经尝试过卸载重装本机chrome,依然没有解决问题,查看develop tool似乎因为中文字体的原因font-awesome加载延后。
所有jquery的事件
var scroll = $('.toggle-span');
var wrapper1 = $('#mainpage');
var wrapper2 = $('.wrapper2');
var maincontent = $('#main-content');
var side = $('.col-md-4');
var collpas = $('.toggle-span2');
scroll.click(function(){
// wrapper1.removeClass('wrapper').addClass('wrapper2');
side.css('display','block');
$(this).css('display','none');
collpas.css('display','block');
maincontent.removeClass('inner').addClass('col-md-8');
})
collpas.click(function(){
maincontent.removeClass('col-md-8').addClass('inner');
side.css('display','none');
scroll.css('display','block');
$(this).css('display','none');
})
$(window).scroll(function(){
scroll.css('top',Math.max(60,150-$(this).scrollTop()));
})
CSS的transition
#main-content{
@media (min-width:991px){
-webkit-transition: padding 0.5s ease-out;
-moz-transition: padding 0.5s ease-out;
-o-transition: padding 0.5s ease-out;
-ms-transition: padding 0.5s ease-out;
transition: padding 0.5s ease-out;
-webkit-transform: translateZ(0);
transform:translateZ(0);
transform: translate3d(20px, 20px, 0px)
}
}
同样的网页,本机chrome加载network截图
如上页面加载,下面这个事本机firefox中的network截图
跪求解决方案 页面链接、请点我
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
用排除法吧,把可疑代码都注释了,然后再看看会不会。
先注释掉上面这块。
之前公司同事遇到过 chrome 的加载问题,建议她先尝试禁掉所有插件后就解决了(后来逐一排除发现是广告插件捣鬼),题主不妨一试。