第二届前端体验大会

今天我参加了『本固枝荣』第二届前端体验大会(北京站)，收获了很多。

首先感谢一下新浪和腾讯组织这次大会，质量很高，干货满满，举办方准备了丰富的小礼物、茶歇和美味的午餐，主持人风趣幽默，声音很有磁性。

其次，这次大会有个小插曲，原定的地点在新浪总部大厦，后来由于报名的小伙伴太多，原会场规模不足，大会前一天临时将地点改为了北京天信亮酒店。可见：

1. 前端开发的技术分享氛围非常火热。
2. 前端对于用户体验的重视程度越来越高。

前端程序直接和用户进行沟通，我们的目标就是给与用户更加卓越的视觉体验，前端开发者对于用户体验的探究将会越来越深入。

本次大会有六位大牛进行演讲，围绕着『用户体验』，从视觉设计、交互设计、性能优化、开发体验、团队协作等角度阐述了自己的理解，大有百家争鸣、争芳斗艳的局面，非常精彩！

一、代码解锁设计之美

腾讯 MXD 的刘远涛老师带来了这场演讲，演讲嘉宾中唯一一位设计师开场，演讲可以说非常有激情，看得我热血澎湃：原来这些酷炫的动效的设计与开发是由同一个人完成，原来这些富有视觉冲击力的动画可以纯编码实现。

代码解锁设计之美，最开始看到这个题目还以为将的是某种屏幕解锁的交互设计😂，原来是给设计师说的，用编码来进行设计，解锁设计的新姿势，这个思路非常新颖，讲师也为我们介绍了他们团队的 FE 与 UI 配合的新开发模式，振聋发聩，原来团队协作还可以这么玩儿😂，可是这种协作方式实现难度好大。

Q&A 环节，我有幸请教了讲师关于设计规范执行的问题，非常感谢刘远涛老师的解答🤓👇。

二、CSS: 从呈现到控制

魅族科技的龚伟老师带来了这场演讲，令我印象最深刻的一点是：用css实现一部分功能，省去了js的执行过程，这样在性能上提升很大，加快了加载速度。

此外介绍了很多 CSS 的新特性以及这些特性的应用，Houdini 草案的新规范等等，这些用法的巧妙令我非常震撼。

三、如何优雅的设计和实现一个 JSBridge

这场分享的演讲者是前端名人小爝，一上来就开了个玩笑，说看了前面讲得css，要说一句 JavaScript 才是最好的语言 😂 (没毛病啊)

可能是临近午饭时间，小爝讲得有些匆忙，简单介绍 Hybrid & JSBridge 的概念，然后讲了 JSBridge 在新浪的应用，以新浪新闻客户端为例，展示了 JSBridge 应用的效果，展示的过程中我发现该客户端的交互体验做得非常好，得益于首屏速度优化，和一些良好的交互设计。后面还从 Android、iOS、前端方面详细介绍了 JSBridge 的实现原理、JSBridge 的设计原则(适配性、易上手，学习成本低，扩展方便)、路由设计的进化，满满的干货啊。

四、性能优化三部曲

来自百度外卖的徐辛承老师带来的这场演讲，随着产品的使用量的增加，每天可能产生上百万的 PV，从性能角度进行优化，可以提升用户体验。

徐辛承老师总结了性能优化的方法论：首先搞清楚为什么做性能优化。然后就是性能优化的三部曲：收集性能数据，找到性能瓶颈。制定最终优化目标&方案，并执行。持续优化迭代，可以不必一次性做很多性能优化。

开发一套工具来监控性能，如跑分平台属于非侵入式，不植入代码即可进行测试，但这种非侵入式的方式得到的结果不准确，不是线上用户真实的结果。通过在代码中埋点的形式，进行侵入式的性能监控要更加准确。工具对白屏时间、下载时间、用户可操作时间、首屏时间等指标进行收集，进而制定模板。

对于短期的页面，如活动页，不需要持续优化，可以使用一些通用的优化方案，例如：图片懒加载2.0(先下载小尺寸图片展示出来模糊的图片，再下载原图，给用户一个页面加载中的感觉)与智能打包等。

五、WebGL 地图渲染

腾讯地图的庞凤老师为我们带来了腾讯地图在地图这一领域的使用体验的探究，涉及大量的交互细节，如修正文字在透视效果和方位旋转中的影响、隐藏掉不可见的部分等。

介绍了WebGL的由来，现状，和未来，未来可以制作更酷炫的效果，因此 WebGL 带来了卓越的用户体验。介绍了地图渲染过程的进化过程，从请求img到请求json 绘制canvas。

地图已经存在了近千年，时代在发展，地图也会变得越来越酷炫，演讲者将地图分解成一个瓦片拼接的世界观。当然酷炫不是重要的，地图的终极目标是重现真实世界，这就需要跨越维度鸿沟，因为 2D 地图重现真实世界是 3D 的。好的地图应该清晰流畅，在性能和效果直接做平衡，优化过程：聚焦中心、聚焦道路，聚焦可视部分的理念。

此外庞凤老师也提出了方法论：压缩提升数据传输效率、重用(缓存)、合并数据和操作、分离(多线程拆分繁重的计算任务)

六、前端可持续化集成

这位分享者是一位 80 后的大叔，邱博老师，来自联想，曾在北京站三站担任火车司机，真·老司机👇

大叔声音低沉，像一节缓缓前进的车厢，车厢里有位老人讲故事，讲了很多持续优化过程中的思考和感悟，感觉有点上升到哲学的高度了，听完后感觉充满正能量得。

谈到了理解需求的本质：理解不是扼杀自主意识，而是要带动大家主动思考。了解需求方的意图、大家的想法、团队的想法。还有效果重于效率：在快速并行开发的时候注重质量。

总结

『本固枝荣』，主干强固，枝叶才能茂盛，大会的官网背景就是这样一棵独木成林的榕树，恰似前端的发展：能力不断深入，泛上下游专业的知识日趋完善。

再次感谢活动的组织者们！希望明年能带来更精彩的内容！