请问做网站怎么赚钱,店铺设计素材,太原网站运营优化,wordpress中文别名分类目录一#xff0c;初探#xff0c;根据现象发现问题 chrome的performance知道很久了#xff0c;但总是没有特别权威且跟上时代的学习资料#xff0c;这次痛定思痛#xff0c;直接看英文文档#xff0c;一点点把这块啃掉#xff0c;本笔记基于Chrome 59 step 1: 隐身模式打开… 一初探根据现象发现问题 chrome的performance知道很久了但总是没有特别权威且跟上时代的学习资料这次痛定思痛直接看英文文档一点点把这块啃掉本笔记基于Chrome 59 step 1: 隐身模式打开chrome 目的是避免缓存以及不必要的问题 step 2: 打开测试地址 谷歌性能测试地址googlechrome.github.io/devtools-sa…可以看到如下的页面页面中有一些蓝色小方块在运动 step 3: 限制cpu速度 由于有些用户的设备cpu性能很高无法很好的分析移动端或者发现低级设备的性能问题所以我们要降速找到控制台中的performance项找到CPU选项选择降低4倍性能或6倍性能 step 4添加运动小块找到性能瓶颈 前面限制了cpu的性能接下来就要找到性能瓶颈了连续点击Add 10按钮向页面中添加小块直到自己都感觉页面上小块运动出现明显卡顿类似下面这种情况就已经明显卡顿了 step 5先看看优化后的效果会怎样 点击一下Optimize优化观察一下效果可以看到页面瞬间变的贼流畅 step 6体验过优化再体验一次不优化 再点击一次Un-Optimize不优化按钮可以看到又卡的要死 ok到这里大家已经能够通过现象发现性能的差异了接下来就是要分析现象了 二了解performance各模块 如何分析现象肯定要依赖数据这里就要用到chrome的performance功能了先将页面切到非优化的状态点击“录制”按钮 录制4s-5s即可 然后就可以看到录制的效果了上面这些数据看不懂没关系现在来一步步了解各个部分都有哪些内容 step 1了解Fps fps是指页面每秒帧数fps 60 性能极佳fps 24 会让用户感觉到卡顿因为人眼的识别主要是24帧图中蓝色标注出来的区域就是FPS记录的信息放大点看FPS由两部分组成1红色的条2绿色的半透明条 action :1  切换至“已优化”状态 此时切换优化状态到已优化的状态再次进行性能录制得到Fps数据如下 可以看到此时1没有了红色条2绿色半透明条的高度明显要比未优化的场景高度要高不少 总结 红色意味着帧数已经下降到影响用户体验的程度chrome已经帮你标注了这块有问题 绿色其实就是Fps指数所有绿色柱体高度越高性能越好 step 2了解Cpu 上图中Fps下面的位置即是Cpu信息我们再采集一个真实业务的cpu数据如下图 对比可以发现cpu数据的一些特性 1cpu包括两种状态 1充满颜色 2不充满颜色 2cpu是否充满颜色和fps存在联系 step 3了解Net Net部分可以将屏幕逐帧录制下来可以帮助观察页面的状态主要用处可以帮助分析首屏渲染速度 step 4了解Frames 1查看特定帧的fps Frames部分主要用于查看特定帧的fps可以查看特定的帧情况。 2悬停其上可以查看数据 可以看到 这一帧的时间间隔是129.1ms 当前的fps是1000ms/129.1ms 7.75fps约等于8fps 这里主要体现的是页面两次刷新之间间隔了129.1ms 3点击Frames块得到更详细的数据 点击Frames可以显示当前关键帧的详细信息 1duration是当前帧从796.31ms开始等待796.31ms127.73ms后进行了一次渲染 2fps还是老算法1000ms/127.73ms约等于7fps 3最下面是关键帧的视图画像 step 5了解FPS快捷工具 1在chrome中还有格more tools选项选中rendering选项 2开启fps meter开关 3直接在页面上出现了一个fps统计器 这个东西暂时先关闭不利于系统性的学习 三找到瓶颈 前面已经知道我们的测试页面有性能问题那么接下来就要想为什么了 step 1了解Summary 对性能进行录制完成的时候会默认在底部展示一个Summary摘要显示全局的信息 上面展示了05.52s录制时间的具体耗时 1script执行耗时1952.8ms 2render渲染耗时2986.8ms 3Painting重绘耗时472.1ms 主要就是这3个耗时知道了这三部分耗时只是知道了哪有问题但具体问题在哪呢 step 2了解Main 上图红色边框圈出来的就是Main部分其中每一块是每一帧中所做的事情 目前这样看不出来什么脑壳疼为了方便我们观看我们可以在fps、cpu、net模块点击一下缩小时间区间如上图可以通过缩小时间区间从而放大Main中的内容现在已经能够看到Main中展示的是火焰图也就是函数调用的堆栈 火焰图可以简单理解x轴表示时间y轴表示调用的函数函数中还包含依次调用的函数y轴只占用x轴的一个时间维度 step 3识别问题红色三角号 上图中可以看到Animation Frame Fired右上角有个红色三角号这就是chrome自动帮助识别出有问题的部分就像FPS中的红条一样用来识别问题上图可以看到提示了Warning : 重复处理程序耗时287.77毫秒 step 4追溯问题定位代码位置 如上图可以看到函数调用在代码中的位置可以点击进行查看虽然定位到了是方法update造成的问题但不够明确所以需要进一步探索 step 5进一步分析问题位置 继续查看Main可以看到app.update下面有很多紫色的条紫色条本身表示渲染但请注意 紫色条上还有更小的运用前面学过放大功能调整时间区间可以看到每个小紫条上都有一个红色三角前面提到红色三角就是chrome帮助自动识别有问题的地方查看提示信息强制回流可能是性能瓶颈点击查看摘要可以看到问题定位在了app.js的71行点击查看能够看到是对每一个元素进行样式修改此代码的问题在于在每个动画帧中它会更改每个方块的样式然后查询页面上每个方块的位置。由于样式发生了变化浏览器不知道每个方块的位置是否发生了变化因此必须重新布局方块以计算其位置。 避免这种情况的出现可以参考developers.google.com/web/fundame… step 6对比优化的效果 demo中存在两种状态优化和非优化可以看到优化的状态script和render的时间都大大减少了所以fps明显提高 step 7性能优化的知识储备 使用rail模型测量性能developers.google.com/web/fundame…基础储备 渲染性能概述developers.google.com/web/fundame… A Frame 的剖析aerotwist.com/blog/the-an… 转载于:https://juejin.im/post/5cd15712e51d453a393af4c5