Vue项目 chrome页面崩溃:喔唷崩溃了, 并出现警告Forced reflow while executing JavaScript took <N>ms

深藏阁楼爱情的钟 2022-02-25 11:42 1074阅读 0赞

### 一、问题描述 ###

这个问题几个月前就曾困扰我，但是因为这个问题的出现看似“很偶然”,所以当时不了了之了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0MTkzMzc_size_16_color_FFFFFF_t_70]  
项目开发的时候，测试同事反馈页面会出现“喔唷 崩溃了”，打开控制台进行相同操作后发现控制台会频繁出现一个警告：

Forced reflow while executing JavaScript took <N>ms

![在这里插入图片描述][20190401192348473.png]

### 二、问题排查 ###

以前也看到过类似警告，不过没有重视。警告内容很明显，就是执行JS代码的时候强制浏览器回流消耗了几十ms。  
排查相关代码后发现在某个组件中，使用了一个**v-if频繁增删DOM节点**。  
相关代码如下:  
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：

.hide
    	opacity 0

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

### 四、反思 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0MTkzMzc_size_16_color_FFFFFF_t_70]: /images/20220225/4ed371e9c00c42bea2c94c0aa91eedba.png
[20190401192348473.png]: /images/20220225/892516f04a604f26926d1038b14c1299.png