记录:forced reflow while executing JavaScript took xxms

记录一个强制回流导致问题:

这是工作中遇到的一个很常见的提示,却成了昨晚至今早难以处理的问题。

跟以往的提示不同,除了本地测试正常外,在dev、st都同时出现了上70次以上,每次点击特定界面都会如此。界面在无数次的forecd reflow下无法展示,甚至出现一半的数据再不停的闪动,崩溃

问题排查:

0.清除缓存 => 结果:无效

1.问题界面代码检查 =>结果:代码无误

2.问题界面和其他界面现象及代码对比  => 结果:其他界面展示正常,引入框架代码相同

3.删除及修改可能有影响的代码 => 结果:无效

4.采用网上多种方法修改 => 结果:无效

猜想:

0.打包环境有问题 =>结果: 检查发现dev用了npm run build:prod,本地执行后,将包引入ngnix运行,测试发现正常。证明与是否用错prod无关

1.浏览器及其版本排查 => 结果:多台电脑上测试,发现都能正常运行。界面正常运行的谷歌浏览器版本为80.xxx以上,而我自己浏览器为78.xxx(且处理无法自动更新状态)

最终处理:

安装最新版的谷歌浏览器,界面可以正常展示。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[Violation] Forced reflow while executing JavaScript took 35ms是浏览器性能方面的一个警告信息。它表示在执行JavaScript代码时,由于某些原因导致了强制回流(reflow),并且这个回流操作花费了35毫秒的时间。 回流是浏览器对DOM进行重新布局的过程,当页面中的元素发生改变时(例如改变元素的尺寸、位置等),浏览器需要重新计算元素的几何属性,并重新布局页面。强制回流是指在执行JavaScript代码时,由于需要获取元素的几何属性或者修改元素的样式等操作,导致浏览器不得不立即执行回流操作。 强制回流是一种性能消耗较大的操作,会导致页面的渲染速度变慢,因此应该尽量避免出现强制回流的情况。可以通过以下几种方式来减少强制回流的次数: 1. 避免频繁修改元素的样式:如果需要对多个样式进行修改,可以将这些修改集中到一起,通过修改元素的class属性一次性应用这些样式。 2. 使用文档片段(DocumentFragment)进行批量操作:如果需要对DOM进行大量的插入或删除操作,可以先将这些操作放在文档片段中进行,然后再将文档片段一次性插入到DOM中。 3. 使用CSS动画代替JavaScript动画:CSS动画使用浏览器的硬件加速,性能更好,可以减少强制回流的次数。 4. 使用transform属性进行位移操作:如果需要对元素进行位移操作,可以使用transform属性,而不是修改元素的left和top属性,因为transform属性不会引起回流。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值