首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Chrome 运行时性能瓶颈分析

一,初探,根据现象发现问题 step 1: 隐身模式打开chrome 目的是避免缓存以及不必要的问题 ---- step 2: 打开测试地址 谷歌性能测试地址 https://googlechrome.github.io...ok,到这里,大家已经能够通过现象发现性能的差异了,接下来就是要分析现象了 ---- 二,了解 performance 各模块 如何分析现象,肯定要依赖数据,这里就要用到 chrome 的 performance...可以看到此时: 1,没有了红色条 2,绿色半透明条的高度,明显要比未优化的场景高度要高不少 总结: 红色:意味着帧数已经下降到影响用户体验的程度,chrome已经帮你标注了,这块有问题 绿色:其实就是...可以看到,每个小紫条上,都有一个红色三角 前面提到:红色三角就是 chrome 帮助自动识别有问题的地方 查看提示信息:强制回流可能是性能瓶颈 点击查看摘要: ?...可以看到问题定位在了,app.js 的 71 行,点击查看,能够看到是对每一个元素进行样式修改 ? 此代码的问题在于,在每个动画帧中,它会更改每个方块的样式,然后查询页面上每个方块的位置。

1.5K20
领券