QQ 空间萌宠之舞——HTML5 骨骼动画实践

骨骼动画比传统的帧动画具有更多的优势，但是对硬件的性能要求也更高，怎样在移动端 web 应用，并在性能上更加流畅呢？

QQ 空间在 2016 年上线了一款萌宠，养成功能就使用了骨骼动画；在换肤、动作 DIY 上都有了比传统动画更出色的表现。

本次分享将结合萌宠的实践，阐述在骨骼动画上的探索：

1. 实现原理及主流引擎对比；
2. 在海量用户实践中遇到的问题及解决方案；
3. 在实际应用上，优化骨骼动画性能的方式；
4. 对游戏性能和质量监控方式。

听众受益

1. 了解骨骼动画的实现原理，如何快速上手；
2. 获得在实践中可以借鉴的经验（包括难点问题的解决）；
3. 在性能优化和监控上的借鉴。

Basement——蚂蚁 Web 研发流程和基础服务实践

在企业级环境下，Web 研发常常会遇到流程冗长繁琐，依赖升级困难等问题；而研发过程中依赖的各种服务，也总有着迥异的申请流程和使用方式，文档匮乏。

我们希望开发者能专注于研发本身，无需太多关心其他琐事，Basement 因此诞生。作为一个主要面向蚂蚁前端的 Web 应用研发流程和基础服务平台，因其简单易用，在大阿里也有不少用户。

主要内容

1. 如何将多达 ?? 步的研发流程收敛规整为 4 步？
2. 如何 1 键发布服务和使用服务？
3. 支撑整个平台的技术架构。
4. 踩过的坑，纠结与争论。

听众受益

1. 如何设计简单有效的研发流程；
2. 如何设计高效的服务发布流程。

微信 H5 视频播放器在海量业务下的实践

在微信目前的体系下，海量用户给我们前端带来很多挑战。例如微信公众号文章里的 H5 视频播放器，我们的实现既需要考虑扩展需求（例如广告、弹幕），还要考虑成本问题（视频带来的流量问题）。

与此同时，我们日常一些小变更也很容易引发事故，也会有许多来自用户侧反馈的难以排查的棘手问题。为了让复杂系统变得可控，我们团队在微信前端实践中总结了一些基本方法和尝试。

主要内容

1. 设计：以公众号文章 H5 视频播放器的经历，介绍如何思考合适的技术方案，让复杂问题变得可控；
2. 运营：监控机制和如何利用工具迅速有效地定位用户侧的问题。

WebGL 在前端可视化中的实践

现在传统的前端数据可视化解决方案大都选择 Canvas 或者 SVG 作为绘图接口，我们在前端可视化库 ECharts 中选择了 Canvas 作为底层的绘图接口，ECharts 目前在 GitHub 上拥有 16k 的star ，其拥有丰富绚丽的可视化效果，深度全面的交互操作，以及对大数据量稳定高效的展现等特性，是 GitHub 上以及国内最热门的开源前端可视化库之一，能够实现这些特性主要得益于 Canvas 的强大能力以及我们基于 Canvas 封装的二维图形库 ZRender 对图形操作的便捷性。

但是随着可视化形式的拓展，Canvas 在某些展现方式上也显得力不从心，例如：

1. 用Canvas 绘制几十万的图形依然有压力；
2. 各种三维数据的展现需求，以及大屏需要的一些酷炫的三维效果；
3. 用 JS 计算布局存在的性能瓶颈，需要通过一些新的思路去有进一步的提升。

本次分享主要介绍我们是如何在现在的 ECharts 中集成 WebGL 去解决这些问题的，内容包括：

1. ECharts 目前架构的介绍；
2. 用 WebGL 绘制地球，三维的散点图，Surface 等三维图表；
3. 用 WebGL 加速散点图等常见二维图表的绘制；
4. 以及利用 GPGPU 进行一些布局运算的性能优化。

听众受益

1. 了解 ECharts 的架构，如何在应用里集成 Canvas，WebGL 等多种图形接口；
2. 了解 WebGL 的能力和场景，以及为如何在数据可视化等前端场景中应用 WebGL 提供一些思路；
3. 了解使用 WebGL 中会碰到的一些坑及解决方案。

如何打造自己的 PWA 应用

虽然近年来 Web App 大放异彩，但是其本身仍然有很多弊端。低速网络带来的影响，与原生应用的差距等等，而 PWA（渐进式 Web 应用程序）、React Native、weex 等解决方案也应运而生。相对于 RN 和 weex，PWA 更为容易上手，更利于前端开发者理解。

本次分享我将结合在声享项目中的实践给大家介绍如何打造打造一个可靠、快速、互动性更好的 PWA 应用。如何利用 Service Worker 增强我们的应用。

主要内容

• 如何使 Web App 离线化；
• 如何利用本地缓存提高 Web App 响应速度；
• 如何缩小 Web App 与原生应用的差距。

探究 Node.js 的服务端之路

在 Node.js 日趋流行的情况下，有不少不同的声音，诚然在将 JavaScript 通过 v8 引入服务端是一个创造性的想法，但是随着人们的使用也渐渐暴露了越来越多的问题。

本次分享我将结合饿了么在 Node.js 方面的项目实践，与大家谈论从前端转向服务端程序的各项要素，并讲述 v8 引擎的内存结构，内存释放以及内存泄漏的各项情况。并讨论将 Node.js 引入服务端带来的优势与常见的问题及其解决方案，以及目前 Node.js 的意义。

主要内容

• 从前端服务端开发的差异；
• Node.js 如何易学难精；
• 关于 v8 内存方面的理解与实践；
• 如何理智的看待 Node.js 服务端开发；
• Node.js 对 v8，对大厂，以及对我们的意义。