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/

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

英语听说计算机考试演练专用,新中考首次英语听说机考12月23日举行，9月28日全体中学生模拟演练！...
原标题:新中考首次英语听说机考12月23日举行,9月28日全体中学生模拟演练! 2018年本市将实施新的中考改革方案,中考首次将英语口语考试纳入考试内容,英语听力和口语考试与笔试分离,每名考生有两次考 ...
伊洛纳服务器维护,《伊洛纳》【公告】伊洛纳12月23日正式服版本更新
---------更新公告--------- Hello,亲爱的各位冒险家: 我们预计将在2020年12月23日 5:00-2020年12月23日9:00进行停服维护,维护期间将无法登录游戏,请提前做 ...
12月25日服务器例行维护公告,12月23日服务器例行维护公告
亲爱的玩家: 青龙乱舞区.大地飞鹰区.血海飘香区.名剑风流区.陌上花开区全部服务器将在12月23日6:00~8:00停机维护更新,维护完成后上述各服务器客户端版本号升级至1.1.27.5.本次维护主要 ...
魅族android11,Flyme安卓11来了！12月23日开启，魅族17系列独享
原标题:Flyme安卓11来了!12月23日开启,魅族17系列独享点击右上角关注我们,每天给您带来最新最潮的科技资讯,让您足不出户也知道科技圈大事! 12月22日,魅族Flyme官方宣布,魅族17系 ...
2017广东全国计算机12月,2018年广东考研时间：2017年12月23日至24日
2018年考研时间已经公布,出国留学考研网为大家提供2018年广东考研时间:2017年12月23日至24日,更多考研资讯请关注我们网站的更新! 2018年广东考研时间:2017年12月23日至24日 ...
湖北省计算机二级报名时间2020年12,2020年3月湖北省计算机等级考试报名_时间：12月10日－12月23日...
湖北省计算机等级导语:2020年3月全国计算机等级考试将于3月28日-30日举行,小编整理了湖北省报名时间,供大家参考,欢迎大家点击查看!更多计算机考试动态|模拟试题|历年真题请关注计算机学习网! ...
冰原服务器维护,12月23日（周四）服务器更新维护公告
首款纯修真2D回合制游戏<问道>以其精良的画质,丰富的玩法,完善的系统受到了无数玩家的喜爱和支持,为了给玩家提供一个更优良的游戏坏境,<问道>运营团队将于12月23日(周四)对 ...
2019年12月23日--2019年12月29日（合计38小时，剩9962小时）
2019年12月23日 1,HLSL精讲,19.3剪裁 2,3d图形数学:2.4及相应代码 3,windows核心编程:6.5.2 4,鬼火引擎,ISceneNode 5,整合gis代码 6,cesi ...
nova 8什么时候可以用鸿蒙,12月23日发布！华为Nova 8会用上有鸿蒙OS系统吗？
尽管受到芯片禁令限制,但是华为的手机发布计划,似乎并未受到太大影响,前段时间刚刚发布了华为Mate 40系列,近日又宣布将在12月23日发布华为Nova 8.虽然目前华为官微上并没有曝光太多有关这款手 ...

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