Vue项目在chrome页面崩溃:喔唷崩溃了（总结）

情况一、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 => {// xxxthis.detail = res.data.data})}}
}

本来是想在detailId改变的时候，重新获取detail，但是在获取的过程中不想显示遗留数据，所以先将detail清空了。猜测正是这里导致了浏览器移除DOM节点又插入DOM节点，然后就有了上述警告和崩溃页面。
我这里修改detailId是通过用户点击不同的元素触发的，为了验证猜测，直接在父组件用一个setInterval函数模拟用户操作：

// ...
mounted () {let time = 0let 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>

.hideopacity 0

再用之前的代码测试，再也没有出现警告与页面崩溃，到此解决了以上问题。

四、反思
本文虽然解决了当前浏览器崩溃的问题，但是因为时间有限，并没有深究：
为什么这种情况下v-if会导致回流耗时异常(为什么一般情况下的v-if并不会有警告)?
为什么JS操作导致回流超时多次后会导致浏览器崩溃?
一点思考:当一个问题重复出现的时候，就应该去尝试重现它，并且可以适当采用代码模拟人为操作，会大大提升效率。

情况二、谷歌浏览器更新了，发现网页全部打不开了。都显示：“喔唷崩溃啦”。

点击任何按钮，例如，设置，选项，历史记录等，也“喔唷崩溃啦”
卸载重装也无效
解决方案
找到路径C:\Windows\System32\drivers\bd0001.sys
删除(没有强制删除工具重命名也行，随便改个名字)
重启电脑
chrome就正常了
原因

可能是注册列表被一些卫士类优化工具或杀毒软件优化了

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140