Vue项目 chrome页面崩溃:喔唷 崩溃了, 并出现警告Forced reflow while executing JavaScript took ms
一、问题描述
这个问题几个月前就曾困扰我,但是因为这个问题的出现看似“很偶然”,所以当时不了了之了。
项目开发的时候,测试同事反馈页面会出现“喔唷 崩溃了”,打开控制台进行相同操作后发现控制台会频繁出现一个警告:
Forced reflow while executing JavaScript took <N>ms
二、问题排查
以前也看到过类似警告,不过没有重视。警告内容很明显,就是执行JS代码的时候强制浏览器回流消耗了几十ms。
排查相关代码后发现在某个组件中,使用了一个v-if频繁增删DOM节点。
相关代码如下:
template部分
<template>
<div v-if="detail.id">
xxxx
</div>
</template>
JS部分:
export default {
props: {
detailId,
},
data() {
return {
detail: {
id: xxx,
}
}
},
watch: {
detailId: {
immediate: true,
handler () {
this.getDetail()
}
}
},
methods: {
getDetail: {
this.detail = {}
axios.get('xxx', this.detailId).then(res => {
// xxx
this.detail = res.data.data
})
}
}
}
本来是想在detailId改变的时候,重新获取detail,但是在获取的过程中不想显示遗留数据,所以先将detail清空了。猜测正是这里导致了浏览器移除DOM节点又插入DOM节点,然后就有了上述警告和崩溃页面。
我这里修改detailId是通过用户点击不同的元素触发的,为了验证猜测,直接在父组件用一个setInterval函数模拟用户操作:
// ...
mounted () {
let time = 0
let detailList = [xxx, xxx]
setInteval(() => {
console.log(time, 'setInteval')
this.detailId = this.detailId === detailList[0] ? detailList[1] : detailList[0]
}, 200)
}
刷新页面后发现,当打印的time到100次(也就是模拟了用户切换100次, v-if也生效100次)左右,页面就会崩溃。
果然就是这里v-if导致的问题,试了多次均是如此,看来问题也不是那么“偶然”。
问题定位到了, 那就很好解决了!
三、解决方案:
因为我这里只是想不显示遗留数据,所以其实只用把旧数据隐藏起来就行了,所以解决办法还是很多的。这里在请求过程中我给要隐藏的dom加了一个class,然后为这个class设置opacity(不透明度)为0:
<div :class="{ hide: !detail.id }">
xxx
<div>
.hide
opacity 0
再用之前的代码测试,再也没有出现警告与页面崩溃,到此解决了以上问题。
四、反思
- 本文虽然解决了当前浏览器崩溃的问题,但是因为时间有限,并没有深究:
为什么这种情况下v-if会导致回流耗时异常(为什么一般情况下的v-if并不会有警告)?
为什么JS操作导致回流超时多次后会导致浏览器崩溃? - 一点思考:当一个问题重复出现的时候,就应该去尝试重现它,并且可以适当采用代码模拟人为操作,会大大提升效率。