“逐帧动画的像素差优化”的目标主要是尽可能地压缩图片资源的体积，当我们走css3逐帧动画时难免会用上一张体积很大的雪碧图，那么可以通过对比雪碧图里不同帧的图像的像素差，再组成仅由像素差合成的雪碧图来作为动画背景，可以大大减少雪碧图大小。

个人觉得这个想法比较新颖，但执行起来会比较困难，不太清楚有没有啥生成像素差雪碧图的自动化工具。该分享后续本来提供了个微信二维码让与会者扫一扫加入了解更多该方案，但鉴于五分钟的时间太短，我才打开微信他就被“请”下去（PPT也关了）换另一位分享者了，这个还蛮遗憾的。

“React单页面性能调优”的分享主要提及路由切换时，若页面虚拟DOM较多的时候，它们的切换会存在性能问题，然后分享了一些建议，比如以计数路由的形式来决定虚拟DOM是否做卸载处理（怎么有点像以往的JS垃圾回收机制呢）：

不过五分钟时间太短没法了解的详细，看下他的总结吧（坐的很后面所以都是放大拍的照片，糊是一定的）：

“心路历程”的分享者米爱个人风格蛮幽（浮）默（夸），一开始还以为他来踢场捣乱的，不过后面发现他讲的还是挺有意思，PPT也做的很用心。

手Q Hybird App 优化之路

由前端高级工程师赖晓思主持，主要分为“首屏数据展示耗时优化”和“长列表滚动优化”俩部分。

首屏数据展示耗时优化部分主要是建议首屏的数据尽量不要依赖cgi请求，例如利用 localStorage 缓存数据来做优先展示.

这里取了兴趣部落缩略图缓存的例子，即帖子打开的时候，优先显示首页所用过的小图，然后再通过cgi去取大图，减少白屏时间：

鉴于图片均配置了较大的 max-age 缓存设置，所以短时间内重新拉取图片时是不会再发送http请求的。

接着也是介绍了手Q这个自主研发的客户端的一些优势，比如使用了 mqq 这种集成在手Q内的 native 组件，在页面使用时会先通过js判断用户当前环境，如果是手Q访问则直接调用 native mqq，否则才发请求去下载远程资源。

另外鉴于客户端上打开一个新的 webview 是比较耗时的事情（安卓平台可能会有1.5-2.3s的空白等待时间），如何利用这块时间是值得思考的事情。

就此 mqq 组件提供了 dispathEvent 和 addEventListener 接口，可以在绑定webview创建/销毁时的事件，从而得以在webview创建的时候预先去拉取cgi数据。

接着是长列表滚动的一些优化。先是分享了一些业务视频，对比各个滚动方案效果，并逐步做了这些建议：

⑴ iscroll 的滚动性能较差（会不断监听滚动事件并触发回调），当数据较多时很容易造成卡顿（特别在安卓上）

故建议避免使用iscroll，而是以 div 局部滚动的形式来替代它，但该方案在滚动很快的时候可能会出现闪白的问题。

⑵ 依旧推荐使用局部滚动，不过把滚动层与内容层做分离——利用添加了 pointer-event:none 的元素可以实时触发scroll事件的特性：

不过该方案在部分设备（小米）中也存在内容跳动（而不是滚动）的问题，会让用户体验变得很糟糕，原因是 div 的 scroll 虽能被实时触发，但 scroll 过程中产生的样式变更要等到 scroll 结束后才被渲染。

⑶ 模拟滚动，且滚动的过程动态删除/新增列表中的DOM，防止节点太多导致的性能问题。但频繁的DOM操作会导致不断触发layout，配置低的机器容易卡顿。