update layer tree导致页面卡顿

前因

今天检查一个vue页面问题,就是在切换Tab时候(某些win10电脑),页面会卡顿一段很长的时间,短则3秒,长则十几秒,这个体验非常糟糕,于是我着手寻找其中原因。

概况

这个vue页面的元素非常多,主要分为六个Tab内容,切换Tab也只是控制Tab内容的显隐。按道理这是非常简单的行为,不应该出现卡顿的情况。

检查

代码上,我将切换Tab做的一些业务逻辑去掉,只留下控制显隐部分,并打印执行时间。

测试过后发现,即便是这么简单的操作,页面还是会卡顿,从打印的日志上看,我发现了切换的代码很快就执行完了,是后续的渲染卡顿了。

Timeline

我打开了控制台工具,点到Timeline那一栏,检查js的执行情况。

效果如下:

果然有一长串一直在执行的东西,上图紫色部分,卡顿的时间就是在执行这玩意。

放大紫色部分,发现这一长条紫色是由一块块小块紫色任务组成的,每个小块执行的都是同一个东西,都是在执行update layer tree这个动作。

思考

这update layer tree是浏览器渲染页面的其中一个行为,但我很奇怪,为什么会有这么多这种操作。

PS:了解update layer tree需要知道什么是页面重绘(repaint)和回流(reflow),可以看我另一篇文章:https://www.cnblogs.com/lovesong/p/8046730.html

我的代码:

我Tab切换是用‘visibility:hidden’,由vue一个计算属性控制,当初为了某些功能,才没使用‘display:none’的。

引用:

https://stackoverflow.com/questions/25724126/chrome-devtools-timeline-update-layer-tree-event

这个问题里面出现了跟我相似的情况,我看了其中的解答,大体意思,’当前树的某个显示层失效,导致该层次结构要更新一层,引发该层次结构上每个层都被更新。’

PS:这里说的树应该是render tree。

原因:

难道因为‘visibility:hidden’的切换,导致render tree的更新异常?

PS:其实按道理,即便是所有的块都更新了,也不应该更新那么多次,卡那么久。

所以,我猜想,可能页面里面某些元素的显隐导致了render tree循环更新了。

我将‘visibility:hidden’换成‘display:none’控制,测试一下,果然就没不卡顿了。

后续

我没有找到哪个位置导致的render tree更新异常,目前只能更换Tab切换方式,从源头截止。

另外,如果发现页面卡顿了,可以用Timeline这个工具查看,非常不错。 

posted @ 2018-10-17 23:59  海角在眼前  阅读(2837)  评论(1编辑  收藏  举报