【Tweb】2019年腾讯前端技术大会 不完全总结

符合预期的CoyPan（id: Coy_Pan）
作者：CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师

上周末，我有幸去深圳参加了2019年腾讯前端大会。本文是对本次技术分享的不完全总结。

是时候了解一下WebIDL

吴小倩 - W3C中国总经理

吴小倩老师，为我们介绍了WebID —— 制定web规范的标准语言。Web IDL的关键在于定义了如何把DOM和相关的Web API映射到语言里，尤其是ECMAScript。之前的标准都使用OMG IDL，没有正式的对这些映射关系作出定义，实现者需要从字里行间猜测。一个统一的、规范的、标准的语言，可以避免各个浏览器厂商在实现同一个web api时出现差异，带来兼容性问题。吴老师介绍了最新的关于网页端支付的web api标准：

[SecureContext, Exposed=Window]
interface PaymentRequest : EventTarget {
  constructor(
    sequence<PaymentMethodData> methodData,
    PaymentDetailsInit details,
    optional PaymentOptions options = {}
  );
  [NewObject]
  Promise<PaymentResponse> show(optional Promise<PaymentDetailsUpdate> detailsPromise);
  readonly attribute DOMString? shippingOption;
}

作为一名开发者，了解WebIDL，可以帮助我们更好的读懂DOM API的定义，更好地认识浏览器和web，同时，有助于我们更好地书写对web的想法提案，为web的发展贡献自己的思考。

Headless CMS - 小微项目的业务中台解决方案

张云龙 - 巧子科技创始人

张云龙老师给介绍了strapi：一个数据到API的自动生成系统，为产品运营人员提供数据管理后台。对于企业中的小微项目来说，strapi是一个很不错的解决方案，对于个人开发者来说，strapi就是一个外包神器。

Flutter在腾讯企鹅辅导上的实践之路

涂金林 - 腾讯教育flutter负责人

涂金林老师首先介绍了flutter，并且从实践框架及页面栈管理、性能优化这两个方面，介绍了flutter在腾讯企鹅辅导上的实践之路。最后，介绍了对项目中某个模块进行flutter for web改造的过程。整个演讲还是有不少干货的，对其他flutter的使用者有一定的借鉴意义。

大型Web项目可用性提升优化

郭林烁 - 腾讯AlloyTeam高级前端工程师

郭林烁老师介绍了腾讯文档在可用性提升上的实践。

1、脚本错误监控、优化和持续跟进。从最基本的脚本错误监控开始，使用CORS避免Script Error，结合sourcemap定位错误代码。发现问题后，通过代码历史提交记录，找到开发者，作为问题的处理人。接着生成bug单，推送报警给问题处理人，并跟踪问题的解决过程。同时，将监控前移，上线前使用自动化测试等流程减少Bug数量。

2、前端日志系统的搭建、优化和打通。在关键点上报日志，且上报是可以采用worker等方式避免日志上报对主线程的影响。使用特定的id，打通全链路日志，并且时刻关注用户的反馈，通过反馈不断更新、优化测试用例，避免问题再次出现。

3、腾讯文档白屏监控体系和优化。优化资源的加载，加载失败时，进行重试，并且及时给用户反馈。可以使用SRI来保证资源加载的完整性，使用CSP保证加载正确的资源。在页面卡死时，可以结合上面两点的日志定位问题，然后进行修复。

腾讯文档搭建了一整套完善的可用性监控体系，其流程和经验是值得学习的。所有的这些工作，都是为了给用户提供更好的体验。

微信小程序同构方案新思路

June - 腾讯web前端高级工程师

June老师为我们介绍了微信小程序同构方案的新思路 —— kbone.

目前市面上有许多的小程序同构方案，如mpvue等。这些同构方案让我们可以直接使用vue、react等进行小程序开发，一套代码，多端运行。这些同构方案都是同一个思路：将Vue模板静态转换为WXML模板，再交由小程序渲染。但是这个方案有一定的问题：对于一些复杂的模板语法无法转化，比如富文本渲染、过滤器、图片预览等等。这是因为vue的模板语法毕竟和wxml语法不对等。

换一种思路，直接仿造DOM的接口，在小程序内创建一个仿造的DOM树，交由小程序渲染。这样的话，完全不用对上层的vue代码进行改造，就能完成同构。

接下的问题是：1、如何创建仿造DOM树；2、如何将仿造的DOM树渲染到页面上；3、如何监听页面事件

尽可能按照标准来仿造Dom接口，如createElement、appendChild等。借助小程序自定义组件的可嵌套性实现仿造的DOM树，交给小程序渲染。由于小程序的事件系统与web端不一样，仿造了浏览器的事件系统，接管小程序的事件。

在实现过程中，有许多的细节问题，比如性能优化、如何DOM树更新策略等，June老师都一一做了介绍。不过，这种同构方案也有问题：由于整个适配器逻辑都是运行时逻辑，当页面复杂性增加，节点变多时，kbone的性能问题就显现出来了。

目前，kbone已经成为了小程序官方推荐的多端同构方案。

极致SSR：高效率构建高性能Web同构页面

段隆贤 - 腾讯web前端高级工程师

段老师首先给出了极致SSR的目标：1、更短的首次有效绘制时间；2、更短的可交互时间；3、有更好的交互体验，给用户更好的过度动画和预期。

为了达到极致SSR的目标，首先采用了分块传输的策略，不需要等待页面所有的接口返回， 页面头部接口响应即可响应页面。在实现分块的时候，采用的是自动化分块，由模板的语法树， 分析代码的上下文， 分析数据和模板间的依赖， 用异步数据分割模板， 分块逐步输出。

然后是Vue编译优化方案，由Vue语法树，在编译时生成线性字符串的拼接， 无需构造和遍历VDOM树形性能更高。

降低不必要的同构DOM量，采用局部同构的方案，加快可相应时间。

段老师给我们分享了他在SSR方面的思考和实践，干货满满。

Serverless SSR实践

水澜 - 阿里巴巴前端技术专家

来自阿里的水澜老师，给我们带来了Rax的分享。Rax是一套遵循React标准的跨端解决方案。同时，Rax拥有将工程快速转变为Faas的能力，使得ssr和serverless的结合更加快捷，方便。

Web编辑器的实现，从简单编辑到专业排版

张祥 - 腾讯文档Word / TIM Andorid负责人

张祥老师首先介绍了如何实现一个简单的编辑器，核心就是contenteditable这个属性。

<div id="contentedite" contenteditable="true"></div>

实现一个编辑器需要解决许多的问题，最主要的就是排版上的各种坑。

腾讯文档的整体架构如下：

由于腾讯文档是一个多人协作的产品，在多人协作时也需要考虑很多的问题，最主要的就是需要实现操作的原子化。腾讯文档采用了模块化、插件化的设计，并且有计划开放编辑器SDK，打造一个社区。

end。

符合预期的CoyPan（id: Coy_Pan）
作者：CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师