情况一、vue项目在谷歌浏览器上出现崩溃
一、问题描述:
最近vue项目开发时,在chrome浏览器页面过一段时间一直提示:页面崩溃:喔唷 崩溃了
项目开发的时候,测试同事反馈页面会出现“喔唷 崩溃了”,打开控制台进行相同操作后发现控制台会频繁出现一个警告:
Forced reflow while executing JavaScript took <N>ms
二、问题排查
以前也看到过类似警告,不过没有重视。警告内容很明显,就是执行JS代码的时候强制页面元素重排,页面重排很消耗性能,reflow软熔焊接; 文档重整,页面重排;消耗了几十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操作导致回流超时多次后会导致浏览器崩溃?
一点思考:当一个问题重复出现的时候,就应该去尝试重现它,并且可以适当采用代码模拟人为操作,会大大提升效率。
情况二、谷歌浏览器更新了,发现网页全部打不开了。都显示:“喔唷 崩溃啦”。
- 点击任何按钮,例如,设置,选项,历史记录等,也“喔唷 崩溃啦”
- 卸载重装也无效
-
解决方案
- 找到 路径C:\Windows\System32\drivers\bd0001.sys
- 删除(没有强制删除工具重命名也行,随便改个名字)
- 重启电脑
- chrome就正常了
-
原因
可能是注册列表被一些卫士类优化工具或杀毒软件优化了