金融壹账通前端H5技术周报(第十六期)

本期导读：本期我为大家带来原创文章：AI生成H5页面pix2code论文启发与思考，跟上时代科技的潮流，与张艳的JS寄生组合式继承。语言基础专题为大家带来css逐帧动画抖动解决方案、WebSocket应用安全问题分析、移动H5首屏秒开优化方案探讨。工具框架推荐大家阅读scoped npm package、Nodejs原生支持的ES6特性。文末是WebVR 版《我的世界》，欢迎赏鉴。

原创专题

1) AI生成H5页面pix2code论文启发与思考 @吴掌雄

最近看了一下pix2codeAI生成前端页面的官方论文与github上面的pix2codeReimplement源码，虽然官方只提供了论文还没有公开源码与用户调用的入口，但也受到了一些启发，思考了下一利用机器学习生成h5静态页面的可行性。

2) JS寄生组合式继承 @张艳

JS的继承方式有很多种，最理想的继承方式是寄生组合式继承。
组合继承（构造函数和原型的组合）会调用两次父类构造函数的代码..

语言基础

1) CSS 技巧：逐帧动画抖动解决方案 @leeenx

文章背景是移动端适配方案带来的雪碧图抖动问题。

2) WebSocket应用安全问题分析 @ethan

WebSocket 并不会解决 Web 应用中存在的安全问题，开发者需要了解 WebSocket 应用潜在的安全风险，以及如何做到安全开发规避这些安全问题。

3) 移动 H5 首屏秒开优化方案探讨 @bang

从前端优化，到客户端缓存，到离线包，到更多的细节优化，做到上述这些点，H5 页面在启动上差不多可以媲美原生的体验了。

工具框架

1) 使用 scoped npm package @蛋糕仙人

所谓的 scoped package 就是在原来的包管理上新增了命名空间的概念。

2) Nodejs原生支持的ES6特性 @TAT李强

随着React的风靡，配合Webpack以及Babel等技术，越来越多的前端同学将ECMAScript 2015(ES6)的特性运用在项目中，import、export、class、箭头函数、块级作用域等特性屡试不爽。而对于Node.js实现的后台代码来说，我们也同样希望使用这些ES6特性，下面将以v4.4.4(LTS version)长期支持版本为例展开话题，从兼容性以及性能两方面着手分析Node.js对ES6的支持情况。

前端视界

1) 使用 A-Frame 打造 WebVR 版《我的世界》 @Kevin Ngo

Mozilla VR 团队创造了 A-Frame 框架来为 WebVR 生态系统抛砖引玉，该框架给予开发者构建 3D 和 VR 世界的能力。