奇趣百科》性能优化.docxVIP

实例解析：《奇趣百科》性能优化奇趣百科年后进行了一次大改版, 不论是内容还是程序架构上，改版使用Vue.js的MVVM的理念令开发过程加速了不少。但是改版后却出现了明显的性能问题，出现了比较明显的页面卡顿，因此我们又专门做了一次性能优化。本文主要介绍Chrome DevTools中的Timeline Profils等工具的使用方法。1. 组件粒度加粗首先最先想到的就是用Timeline看一下:Frames情况还算正常, 但是注意到内存占用已经快17MB了, 相对于改版前的12MB是明显偏高的(由于篇幅关系就不上图了), 那么我们继续来追查内存相关的,使用Chrome开发者工具的Profiles看一下当前的内存占用情况:打开Chrome开发者工具 - 点击 Profiles 控制板 - 选中 Take Heap Snapshot - 点击 Take Snapshot查看了一下, 发现listItemHead, listItemImg , listItemMeta 和 listTuwen 组件对象分别都各有9个或者10个(9个是因为业务逻辑问题)。Vue.js支持组件系统，因此，为了提高复用性，我把一个卡片定义为一个组件，而这个组件又由若干个组件组成。卡片本身是listTuwen组件, 该组件包括了三个组件: listItemHead, listItemImg 和 listItemMeta。接下来我们来研究一下snapshot表格中相应的列分别代表什么。一个对象有两种形式来持有内存:直接拥有间接引用分别对应 snapshot 中的Shallow Size和Retained SizeShallow SizeShallow Size代表了对象直接持有的内存大小。一个标准的JS对象通常会持有用于描述自身逻辑和存储直接值（属性值）的内存。 通常情况下应该只有字符串和数组类型可能拥有一个较大的Shallow Size。Retained SizeRetained Size代表了当前对象所引用的其他对象占用的内存大小. 当当前对象被销毁时, 这一部分的内存会被释放。奇趣百科的首页触底加载一共可以加载30次一共300张卡片,我们加载30次完毕后与刚进入首页的情况进行对比：内存占用已经飙升到了70MB了, 我们切换到 Comparison 视图(红框), 并选择 Snapshot 1(红框)。#New 一列说明了三个组件的对象都增加了290个(289的是因为业务逻辑), Size Delta 一列说明了三个组件的对象各自增加了快7M的内存, 加起来就是20+MB了。因此我们可以得出这样一个结论: 同一页面中大量被重用的组件尽量不要嵌套其他组件, 不然内存占用会随着组件的增多而快速上升。可以看到一个Vue组件对象内部引用了大量的其他对象, 包括directives, watchers 等, 还有一些系列的 getter 和 setter 方法。解决办法就是卡片内部不使用组件, 一个卡片就只有自身这个组件, 采用其他方法来提高代码的复用性。最后我们来对比优化后的结果:触底加载完毕，300张卡片占用内存40M左右，虽然listTuwen组件的对象占用的内用大了很多，但是总体下降了40%，优化效果很明显。移除视窗外的不必要的DOM页面上DOM的数目越少，占用内存就越少，性能也就越好，这是很容易得出来的结论。参照手机淘宝搜索结果页的做法, 我们可以把视窗外的不可见的卡片移除掉, 当这些卡片滚动回到窗口内(或者滚动位置接近到窗口的某个像素值)后再插入显示.列表的卡片数目保持在一个恒定的值,而不是直线增长下去.奇趣百科线上的代码可以看到，我们的卡片数目保持在30个，也就是 DOM 的数据是恒定的，不会随着页面越滚动到下面越多。接下来我们看一下内存情况验证我们这样做的效果：优化前后的 Timeline 工具的内存曲线：内存曲线都成锯齿形状，有触发垃圾回收，但是优化后的曲线上升的斜率比优化前少了2°，即内存上升速度慢了。另外是优化前后的 Profiles 对比(DOM作为关键字进行筛选):内存优化后少了近10M,并且DOM的数据减少了10倍，内存使用下降25%。图片懒加载进行这一个优化点之前，我们先来科普一下Timeline这个控制板。最好在浏览器隐身模式下使用，禁用一切无关插件，因为插件也会占用内存，影响测试结果。如果需要记录网络请求的话, 最好把浏览器缓存也禁用掉。网上盗的一张图(出处):有三种模式可以切换关注点：Events: 显示所有事件的记录Frames: 显示页面渲染的帧数Memory: 显示页面的内存情况这里我们重点关注 Frames 模式。页 面的每一帧内容都是GPU绘制出来的，它的最高绘制频率受限于显示器的刷新频率，大多数情况下最高的绘制平率只能是