本固枝荣--前端体验大会12月23日深圳场

12月23日深圳前端体验大会（本固枝荣）

作为一个后台开发，完整地参加一整天的分享会议，收获还是挺多的。就我个人而言，前端开发者的心态要比后台开发更Open、更乐于拥抱新技术。整个大会的开始和结束也回顾了webrebuild大会（前端体验大会前身）十年来走过来的历程，见证了新技术的发展、前端从业者技能点的变化、薪资收入的增加、职业关注点的变化等信息。更多信息，请关注官网后期的报告吧，本文只只依据个人的印象进行简单的回顾。

大会信息

• 大会官网： https://feexp.org/
• 时间： 2017/12/23 09:00 - 17:00
• 地点：深圳南山 腾讯大厦二楼多功能厅
• slide：目前ppt还没有放出，后期会在公众号上放出PPT（可以关注官网信息）

分享嘉宾

赵潇滨 / 前端开发工程师 / 腾讯TGideas

14年加入腾讯TGideas，现负责《王者荣耀》的相关业务需求，在项目上有很深的沉淀积累。擅长性能优化、模块化、Nodejs等，同时正努力成为一名全栈开发。

主要分享内容：
主要分享了资源感知和数据感知在线上问题的快速定位的实践应用。举出了王者荣耀的微官网的几个例子，如何利用性能分析和网络分析（chrome浏览器）来快速发现问题的所在。这也是我第一次知道performance界面以及performance提供了大量的API。

印象深刻的例子1：利用performance来查看梦琦微官网加载时出现白屏的情况，经过查看performance页面（chrome）确认了梦琦的图片太大，在3G网络时，加载比较慢。通过手动压缩的处理方式先对线上的问题进行了解决，解决的结果是首次渲染的时间在1s内，总体的加载时间是3s多（原来的加载时间是9s左右）。

黎博 / 高级前端开发工程师 / 腾讯CDC

腾讯问卷前端开发负责人，公司级《网站性能优化》课程讲师，曾参与开发腾讯开放平台、腾讯罗盘、腾讯指数等多款产品。

分享了腾讯问卷项目组在开发问卷调查小程序中遇到的问题。主要可以学习的地方是：产品、设计师和开发人员在产品开发阶段需要进行不断的PK，这也是腾讯各个项目中成员合作的方式。真实的案例是前期的问卷小程序采用了微信的websocket的功能或者叫API来实现用户投票完之后立即显示用户的投票项目和用户的头像（具体的体验可以试用投票小程序）。但是，有一家比较大的学校采用问卷小程序来进行信息抽取，学生用户有40个班级，每个班级有60个人，而且允许家长进行投票，这样的大量用户导致后台压力过大，websocket严重拖慢后台响应。其团队采用的优化方案是在感知后台服务器压力过大时，将当前投票的websocket功能进行关闭，只允许用户通过http的方式来完成基本的投票、查看等操作，不再实时的展示用户的操作。这也是优雅降级的一种方式吧，保重服务可用。另外还分享了一个不合理的产品需求，就是在一个页面显示大量的用户头像（早期需求），这样导致setData接口的json数据量过大，他们采取的方式是对数据进行指数分割，分段对数据进行传输。

肖建 / 设计研发经理 / 腾讯音乐

腾讯音乐娱乐集团QQ音乐设计研发经理，Demoo 移动端演示系统项目设计研发负责人，从事前端研发及设计相关工作8年，曾参与及主导多个现象级项目的设计研发。

主要分享QQ音乐APP中的发现区块中的音乐周刊（或者叫海报）功能，早期的一个海报的设计需要到两三天的时间来完成从设计、页面编写、动画添加、测试等工作。后期由于产品需要一周发布多个版本，导致一周五天的时间赶不上每天发布一个版本的需求，因此，团队考虑到流程化。依据QQ音乐周刊实际的工作流，将各个步骤规范化、如图片设计部分直接交由供应商来进行制作（解放团队设计师），将页面编写，采用模板机制，定好各种大小，然后将不同图层的图片上传至系统，再添加动画效果，最终就可以快速的完成制作、动作制作、发布和测试（基本上不需要测试）。补充说，这种方式在处理动画时，会存在动画添加不协调的问题，多个动画的叠加效果会存在不和谐的情况，因此，又对动画步骤进行了整改。将单个动画的添加整合为动画组，这样直接对图片层应用动画组，避免了动画不协调的问题。
这给我们的一个启示（其实我们在工作中也经常这么做了）：对重复的工作进行整改、一般来说，重复的工作就是不合理的工作，能够自动化或者节省人力的工作流程我们都应该尽最大的努力去优化。

余澈 / 前端开发工程师 / 京东

2017 年 8 月加入京东，主要负责京东前端框架的开发与升级。国内早期的前端框架研究者之一，Vue.js 最早的 UI 框架 vue-strap 的作者，同时参与并维护多个优秀 JavaScript 开源项目。

分享了京东根据实际的业务需求，需要有一种高性能、快速修复问题、不受开源协议影响的前端框架（开源协议的介绍可以参考廖雪峰老师的文章）。在对比了VUE、React、Angularjs的性能、体积、类型支持、迁移难度、学习成本等因素，发现这三大框架其实差不不是很明显。但对于他们来说，快速定位问题、解决问题才是最关系的问题。考虑到开源项目的bug得不到及时解决的问题，他们决定自己造轮子。新造的轮子需要实现：数据绑定、virtual dom等现代前端框架必备的功能。

具体举例分享了对底层代码的优化，主要是对影响性能的代码从编译器的角度，用最快的方式来对js语句进行解析和执行。并在QA环节回答了Nerv和React的不同点。解释了React作为一种通用的框架，更关注可解释行和快速开发的原则，而京东的Nerv则是需要在京东首页和频道页中进行使用，需要更高的性能，这也是Nerv和React最根本的不同之处。同时，也对Nerv进行了大量的完善，使其更方便从React进行迁移。

其开源地址：https://github.com/NervJS/nerv

易郑超 / 富途前端负责人 / 富途证券

资深web前端工程师，现负责富途前端架构、技术演进、体验优化和新技术落地等事宜。擅长技术选型、工具开发使用和富交互前端应用开发。曾翻译《SVG精髓》等书。

TooBug大神分享了富途的前端监控框架、利用浏览器的performance api来实现前端性能和错误日志的数据上报。并且展示了利用上报的数据进行问题定位：如快读定位问题是不是由于新版本发布导致的问题，可以在10分钟内快速解决有新版本发布带来的问题（原来的方案需要1个小时来进行版本回滚、日志查看、定位问题、重新发布）。着重介绍了前端数据数据上报js文件不采用npm引入组件的方式，而是使用<script>标签的方式来引入该js文件，这样做的方式是基于标签的引入方式可以捕获到初始化错误、并且npm引入组件后，js文件中的功能函数记录的不是页面刚开始的时间，会导致一些误差的存在。同时也说明了script标签引入js文件需要在后台做鉴权等工作。具体的前端性能监控的，可以在网上搜索一下，很多公司都应用了前端项目监控，也有一些商业项目提供了前端性能监控的服务。

附上TooBug最新的个人博客地址：https://toobug.net/

刘志龙 / 前端开发工程师 / 腾讯IMWeb

2014年7月毕业，就职于百度ecomfe团队。2015年9月加入腾讯IMWeb前端团队，开发腾讯课堂相关业务。热衷于 web 安全。

主要分享了XSS脚本网络攻击中黑与白的较量的实例。主要涉及到了利用js编码、html编码、jsFuck、GBK等等宽编码进行来绕过后台的特殊字符的过滤机器，告诉我们在所有用户可输入的地方，都要实时响应的防御策略。在XSS脚本攻击中，很多预防的手段也会用做攻击的手段，警醒我们不要相信用户的输出。

由于整个分享多是以实际的例子进行分享，因此不做过多的介绍。在前端体验大会分享这样的知识，也是要前端开发的同学能够充分意识到安全问题无处不在。

罗磊 / 阅文TEDx讲师 / 上海阅文集团

非典型程序员，目前任职上海阅文集团用户体验部，负责设计开发阅文前端架构，构建工具，参与起点中文网等业务。也是一个独立博客、晒妻狂魔和视频制作人。

一个非典型的前端程序员、从上面的个人介绍就可以知道是一个网红程序员。出乎意外的是，其代码能力并不差，先后供职金山网络（现猎豹移动）和阅文集团。在阅文集团重构了起点网等网站。并且对本地开发的过程进行了整改，将这个过程利用工作流脚本（自研）来实现敏捷开发。同时，利用腾讯云的ARS等服务，实现了前端程序的持续构建和持续发布等功能。最重要的是让一个老旧的网站利用现代前端技术进行工程化的重构，并且引入了很多比较modern的做法。由于其是非科班出身，也从非技术的方向来告诉大家如何争取更多的话语权，争取早日财富自由。关于其个人的更多信息可以参考个人博客。

luolei个人博客地址：https://luolei.org/