前几天更新了一下博客核心main.js,改了一下PJAX自动更新页面的部分,自以为万事大吉,以为修复了我诟病已久的博客开屏加载闪屏导致PJAX和head移动全失效的问题,结果昨天下午待我再次刷新博客后发现事情没这么简单——bug又出现了!

在此点击/悬停可进行调节

拖拽蓝/紫块以调节进度/音量

Future Funk
Varien

这波啊,是虚晃一枪,多刷新几次页面我发现这鬼问题又藏起来了。好小子,我今天就把你给揪出来!

我上去就先给他插满旗子(指console.log),每走一步都要在控制台输出,这样对比一下bug前和bug后的输出情况就知道个大概了.

在此之前我曾多次和这个bug进行过斗争,无奈bug复现真的没啥规律,只能看运气,这点一直令我很奇怪。插完console.log后我只能不停刷新来尝试复现...

突然,我发现更新友链页面后在友链页面复现了这个问题,便暂时推测和更新页面有关。我保存了控制台的信息,一对比...

'Request Loading Page'这一步后移了,一想,这也没啥造成错误的因素啊!直到我看到了这一行debug输出对应的代码块——

B.hr()是什么?”念头油然而生,顺着行找——好家伙,原来这个会替换整个页面以更新loading页面。简单看一下请求到渲染的步骤:

1.先看本地有没有缓存loading页面,如果有直接拿出来渲染到页面 -> 2.请求服务器端的loading页面,并且渲染到当前页面中,存到本地缓存中 -> 3.显示loading页面

最致命的地方就在于在第1步已经把本地缓存渲染到了页面,但是第2步又重复渲染一次,但鉴于请求有快有慢,当请求慢的时候,整个页面已经渲染完了才得到返回,导致整个页面闪屏重新渲染且pjax和head头移动失效,真的是很蛋疼了。

最后我更改了一下逻辑,如果执行了第1步,第2步中就不用再渲染了,这样总算解决了纠缠了我几个月的问题!泪目...( Ĭ ^ Ĭ )