腾讯Web前端大会 TFC2017 会议 现场纪实(上午)

1.前言

之前很早的时候就听说腾讯要开Web 前端大会了，但是苦于囊肿羞涩，没办法参加。但是那句话怎么说来着？天（傻）无（人）绝（有）人（傻）之（福）路，掘金送了一张门票给我。于是本喵就想着，直接把整个会议记录一下，回头也能够让更多小伙伴们看到这次大会的内容，于是整理过后，就有了这篇文章。

声明：

本文是由 *（MR_LP）全程手打，请勿转载，违者必究！

本文首发自 微信公众平台（李晓鹏：MR_LIXP），如果可以请关注我一下。

本文中若引用内容发生了侵权，请及时联系作者删除。
鉴于本人某些知识水平有限，如果在文章中出现某些错误，请不要激动，留言给我就好。
本文中有很多内容是自己根据自己的理解去跟大家分享的，所以保留不同观点，可以留言给我。

2.大会基础介绍

• 大会全称：< 腾讯Web前端大会 TFC 2017 />

• 时间：2017年6月24日

• 大会地点：中国·深圳福田区 CBD大中华广场 喜来登酒店 六楼会议厅

• 分享内容：涵盖Web新技术、Node.js、框架、工程化、 图形处理等前端前沿内容 ，还包含极致的性能优化、海量用户运营等具有腾讯前端特色的宝贵经验。

3.大会流程及演讲内容

上午

时间	主体内容	上台人员	介绍
8:00 - 9:00	入场、音乐会、开场舞蹈	BOSSA NOVA、SOS女子组合	BOSSA NOVA音乐会，腾讯专属舞团 SOS女子组合舞蹈表演。
9:10 - 9:30	开场致词	stonehuang（黄希彤）	腾讯云技术总监，2005年加入腾讯，腾讯第一个web前端领域T4专家，W3C顾问委员会代表。负责过QQ空间多年的web前端开发和网络性能优化工作，负责过腾讯产品信息无障碍化和腾讯信息无障碍标准制定。中国信息无障碍产品联盟的联合发起人。近几年在技术圈致力于推广信息无障碍设计理念和技术公益理念。
9:30 - 10:15	the Future of Writing JavaScript（ 编写JavaScript的未来）	Nicolas Bevacqua（ 尼古拉斯·贝万奎）	JavaScript 专家，开源推动者，书籍《JavaScript Web 应用开发》作者。Nicolas Bevacqua将介绍 TC39（ECMA技术委员会） 正在审议的一些提案，如 object spread, async iterators, async generators, import等。在此基础上，深入探讨如何利用当前流行工具如 Babel, ESLint, Prettier, Prepack等来高效流畅地书写 JavaScript 代码。
10:15- 11:00	初创公司前端工程体系建设	张云龙	2010年毕业于广州中山大学计算专业。历任百度资深研发工程师，阿里移动事业群主任工程师，全民直播CTO，国内前端工程领域先驱。本次演讲主题围绕过去一年多在直播领域的创业历程，介绍适合初创型公司的前端工程体系建设方案。
11:00 - 11:45	面向前端开发者的V8性能优化	justjavac（迷渡）	在线回声公司前端技术专家，Flaurm 中文社区创始人。多次在 GDG、SF、稀土掘金等各大开发者社区进行前端技术分享，并组织翻译“JavaScript Quirks”、“React Router v4”。目前正在出版《代码之谜》。
11:45 - 12:00	集赞活动开奖
12:00 - 14:00	午餐、主题分展台

下午：分会场1 - Web前沿技术

时间	主体内容	上台人员	介绍
14:00 - 14:45	WebGL新的篇章	BruceWan ( 万波 )腾讯 前端高级工程师	虚拟现实(VR)和增强现实（AR）是近年来出现的高新技术。它通过电脑技术，将虚拟的信息应用到真实世界。此次分享BruceWan将由浅入深介绍WebGL，并以three.js为主介绍相关类库和原理，以及3D互动、WebVR、WebAR的实际项目应用。
14:50 - 15:35	前端和机器学习结合	邓鋆美登科技 前端架构师	用机器学习来提升线上用户体验，包括：根据用户特点调整界面布局方案和字体尺寸、对用户可能想操作的对象进行智能推荐、感知用户正在寻找某个功能并进行操作提示等。本次会议将基于数据采集、预处理、训练、和植入前端的架构设计等方面的实践进行分享。
16:10 - 16:55	企鹅电竞PWA实战	HongweiQu ( 渠宏伟 )腾讯 前端高级工程师	Progressive Web App(PWA) 是由谷歌提出推广的在网页应用中实现和原生应用相近的用户体验的技术方案。想要实现页面秒开、离线访问、类原生体验，有了PWA的技术的帮助，H5页面也能做到! HongweiQu给大家分享企鹅电竞业务渐进式Web应用PWA实践经验。
17:00 - 17:45	QQ空间AMP实战	loviselu( 卢嘉辉 )腾讯 前端高级工程师	AMP是谷歌最新提出的一个开源项目，这项技术可以限制HTML，CSS和JavaScript等一些影响网页性能的代码。谷歌表示，这项技术可以帮助一些网站提升85%的加载速度。本次分享将结合AMP技术在QQ空间内的应用，介绍其使用场景并深入剖析AMP的核心加速原理，帮助你将web项目打造成接近原生体验的Web应用。

下午：分会场2 - 框架&优化

时间	主体内容	上台人员	介绍
14:00 - 14:45	从浏览器内核看性能优化	rockling ( 凌实 )腾讯 前端高级工程师	QQ浏览器内核架构组负责人。 通过QQ浏览器X5内核在加载速度、流畅度方面所做的优化工作，带你了解浏览器内核的工作原理、展示前端优化的指导性原则、以及更佳的优化方向。并且揭露一些影响浏览器性能但不为人知的技术内幕，并对Mobile Web场景下浏览器内核后续的优化方向和新特性进行展望。
14:50 - 15:35	基于WebRTC的P2P-CDN流媒体加速	谢庭梨享计算 前端工程师	WebRTC把实时流媒体和P2P等能力带入了Web前端，开发者只需编写简单的JavaScript程序即可开发出丰富的实时多媒体应用。本次大会想跟大家分享我们对WebRTC的一些实践心得，以及如何利用WebRTC的数据通道来做P2P流媒体。最后介绍我们如何设计一个低延迟、高带宽利用率的P2P流媒体算法。
16:10 - 16:55	QQ钱包h5应用开发实践	lizmlzhou( 周明礼 )腾讯 前端高级工程师	移动互联网时代，提高网页性能是每个前端团队的目标。作为QQ钱包团队的前端工程师，我们是如何通过自研nodejs服务和利用service worker实现H5页面秒开？让我们来探讨一下QQ钱包H5应用的开发实践。
17:00 - 17:45	WePY-小程序框架设计	ChanGong ( 龚澄 )腾讯 前端高级工程师	去年11月初，微信小程序开始公测，小程序是一种新的开放能力，开发者可以一用Web相关技术快速开发小程序。这次分享内容包括：小程序开发基础内容；WePY框架说明，为什么要做这个框架以及框架介绍；WePY框架在我们业务开发中的实际应用和经验分享。

下午：分会场3 - NodeJS&工程化&其他

时间	主体内容	上台人员	介绍
14:00 - 14:45	Start R & B	贺师俊（Hax）百姓网 前端专家	相信大家对以 CoffeeScript、TypeScript 为代表的编译到 JavaScript 的语言已经不陌生。本次分享将介绍 JS 平台语言家族的重要新成员 R & B —— Reason（Facebook 推出的 OCamel 语言的新语法和工具链） 和 BuckleScript（Bloomburg 开源的 OCamel 到 JS 的高性能编译器） 组合 —— 并以代码实例来说明 R & B 的特点和优势。
14:50 - 15:35	微信支付大规模前端外包实战	rizenguo ( 郭润增 )腾讯 前端高级工程师	业务高速发展离不开各种配套运营系统的高效建设，微信支付也不例外。在前端人力极其匮乏的条件下我们另辟蹊径，大规模引入外包团队协同作业，并且在如何保证效率和质量，控制版本变更风险，保证可持续性等方面做了不少研究实践，借此机会跟大家分享交流。
16:10 - 16:55	富途的工程化实践之路	王运国富途 前端技术专家	团队与项目的快速扩张，代码质量不统一，相同逻辑的代码到处散落，难复用，难维护，发布构建时间长且不可控等问题日益困扰着我们。为解决这些问题，我们一步一步摸索，采用组件化（npm + git）的方案解决代码相关的问题，引入 Webpack 与 Jenkins 以解决构建与发布相关的问题。
17:00 - 17:45	揭秘实时协作文档	许海浩石墨 前端团队负责人	随着提高办公效率的需求与日俱增，传统的 office 文档与表格的办公模式，已经无法跟上人们的脚步。于是，多人实时协同办公的场景应运而生，并且越来越多。借此机会，我想给大家分享一下，石墨文档是如何做到支持多人同时编辑一篇文档，以及如何保证文档的正确和稳定的。

4.现场纪实-上午

8:00 - 9:00 BOSSA NOVA 音乐会

期间主要是用来跟大家放松心情，以及和身旁的朋友们“面基“的，这里不作为主要内容说明。

门口还有小姐姐陪你拍照，还有掘金帅帅的小伙伴们在发“撕逼勋章”。

9:00 - 9:10 SOS女子组合 开场舞蹈

期间很多小伙伴纷纷表示，不行的，营养跟不上了，毕竟一帮小姐姐们一起热舞，噗（喷鼻血 ing）。

表示去的时候，已经没有前排位置了，尴尬。

9:10 - 9:15 主持人开场

本次大会主持人员基本都是程序猿，所以今天的主持人也不例外。

只不过我想说，小哥哥好紧张啊（#微笑脸）。

9:15 - 9:25 Stone 致辞

黄希彤做开场演讲，主要表达的问题有这么几个内容：

• 知识半衰期
  
  • Stone 表示很多时候，我们掌握知识的速度实际上完全比不上知识的增长速度。也就是说，我们每学习一段时间的内容，其中就有一部分的内容实际上已经过时了，所以我们要保持自己的学习进度。
• 我们的幸福感
  
  • 放在以前，他们更多的时候是在不停的重启系统以及调试中度过的，但是我们现在有非常多工具能够帮助我们进行内容的控制，所以我们是一个有“幸福感的程序猿”。
• 我们的危机感
  
  • 当前很多的程序员很多时候都有非常强烈的危机感，导致自己很多时候都惴惴不安。那我们该如何去解决我们的这种危机感呢？Stone 给我们提出了一个建议。“不断成长，才能收获安全感”，所以，小伙子们，加油干吧。
• 我们如何衡量一个程序员的好坏？
  
  • Stone 的答案是，一个好的程序员，要做到“问题到此为止”。我们不管遇到任何的问题，都需要能够做到，遇到问题，解决问题，让这个问题到了我这里，就直接结束。

9:30 - 10:15 Nicolas Bevacqua 演讲关于 “编写JavaScript的未来”

这一段我表示全程英文，刚开始的时候还能听懂一点，到后来就直接全部黑人问号了。#绝望脸 ing…

这里直接附上一下关于Nicolas 的讲义吧。

10:15- 11:00 张云龙 初创公司前端工程体系建设

总结来说，张大大主要讲的内容可以划分为以下几点：

• 组件开发

  • 分而治之
    
    • 解决基本开发效率运行效率问题后，前端团队开始思考维护效率
    • 根据对应的界面来进行划分
      

• 持续集成、交付、部署

  • 团队协作的重要基础，尽力打造完善的可自动部署的测试，预发布，灰度发布环境，实现持续集成。
  • 基于持续集成，进一步做到持续交付，杜绝临上线才交付的现象。
    

• 前端自动化测试

  • Dolphin 自动化测试系统
  • 最后每次上线前点一下，标出所有 diff 最后由人工 check
    
    

• 看板，可视化你的进度

  • 通过创建代表工作项的即时贴，并在一个可视化的工作流白板上跟踪每个工作项的当前状态
  • 最终选择物理看板
    

• 创业不是要减少犯错的次数，而是要减少犯错的成本

最后附上现场自己记录的笔记。

11:00 - 11:45 justjavac（迷渡）面向前端开发者的V8性能优化

我表示，听到这里的时候，很多东西都没听懂，因为自己太菜了。

但是还是给大家贴几张图看看吧。

大写的尴尬，但是还是给大家记录了一点内容，大家凑合看吧。

这里不要吐槽我。

另外为了防止自己的记录有误，这里给出 Xat_* 记录的关于优化的笔记。

1. 动态语言如何进行快速计算
   V8 中数字的表示
   32位系统使用int30
   64位系统使用int31
   V8 中的数据类型
   Object：
   Array
   Function
   Date
   RegExp
   BooleanObject
   StringObject
   NumberObject
   Primitive：
   Boolean
   String
   Number：
   Integer
   Int32
   Unit32
2. 编译器优化
   使用 typefeedback 做动态检查
   一般而言，在编译阶段提前检查
   检查之后，使用该类型作为动态类型
   如果检查失败，去优化
   去优化之后，可能会使用解释器运行中间码
3. 未来方向
   
   • TypedArray
   • WebAssembly
   • SIMD
     ​

11：45 - 12：00 Winter 致辞

Winter 在分享中主要分享了这么几个方向。

• 全栈：
  ​* 能够将自己的能力分享给其他人
  ​* 举个例子：写出一个简单易用的东西来帮助其他配合你的同事去使用
• 未来应该会是前端和客户端相互整合的一个阶段
  ​* Winter 举了一个例子，Weex 中动画效率很低下，之后他们尝试分工（3个客户端和2个前端）将动画的包由前端交给客户端来实现，以此他们将动画效率提升到一个不敢置信的程度。

末尾抽奖

当大家看到抽奖界面的时候，整个人都笑崩了。

​

5.未完待续

突然发现不知不觉已经写了这么多内容了。

为了防止本文太长，在此做一个分节。

后续文章会在后续放出。

最后做一个预告：
* 《WebGL 的新篇章》腾讯：万波
* 《前端和机器学习结合》美登科技：邓鋆
* 《企鹅电竞PWA实战》腾讯：HongweiQu ( 渠宏伟 )
* 《揭秘实时协作文档》石墨文档：许海浩

喜欢的朋友请搜索一下我的公众号：MR_LIXP，非常感谢。