9. AlloyTeam 前端大会的技术一览

[brandonxiang]

AlloyTeam Conf是一个干货非常集中的前端大会。就前端的技术，我分享一下前端大会的内容，谈谈自己的想法。

面向亿万级用户的Web同构直出

直出技术也就是传说中的服务端渲染“SSR”技术，Web首屏页面的加载速度能得到极大提升。AlloyTeam采用的是React技术栈同构直出，我们采用Vue技术栈的同构直出。

主讲人李强用实战经历说明了手Q在高访问量的直出表现，他说道，直出其实减轻了浏览器的负担，但是增加了服务器的负担，大概是以前的5倍。这个在生产环境实现起来事有难度的。

实现原理

SSR技术说白了就是在服务端和浏览器端各有一个入口，共用一份代码。服务端会把内容拼接好，缓存起来，提高首屏效率。代码的差异性需要处理，例如生命周期不同。

由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。

所以有些浏览器相关的内容要在 mounted 底下写。简而言之，SSR的vue项目需要注意的点和普通项目不同，迁移会带来成本。

因为涉及到更多的服务端，SSR会带来更大的服务器宕机的风险。腾讯的做法事监测服务器的负载，负载过高的情况有柔错处理，也就是服务器会指向“Plan B”非SSR的页面。这样，也就是你一套代码要打包出两套页面（SSR和非SSR）。

大型Web项目可用性提升 - 零脚本错误的实战

脚本错误对于前端开发者一点都不陌生。测试工程师手上机型有限，一旦发生脚本错误，轻则影响页面的一些功能，重则直接导致页面白屏。大众用户处在不同的网络情况、不同的浏览器。也有可能是后台改了数据类型等，更新数据出错都有可能反应在前端。

高效的错误收集分类是非常重要，有这么一个平台可以收集到很多数据，从而进一步优化整个页面，这是一个良性的反馈。Sentry是有名的错误上报平台，服务端是python写的，提供很多款语言的SDK，进行定制化的错误分类分析。

同时，他提到在测试环境做了错误定位组件，也非常有实用价值。

高效H5动画设计与性能优化

h5的动画是随着flash正式退出历史舞台，它需要一个重要的蜕变。它包含了动图，css3动画，canvas，webgl等。要让页面变得生动活泼起来，绝对不是一件简单的事情。在那些场景用动图，那些场景用css3，那些场景用canvas，其中的选型变得非常重要。

css3动画可以采用GPU加速，“willchange”等能够挽回一些安卓低端机型的劣势，但是过分的滥用会同样会造成资源浪费。

后函数式编程

函数式变成离我们产品的需求应该是最远。函数式编程，带来的是代码高维护性和观察者模式。rx.js，cycle.js应该在项目中可以有可以没有。在数据同步和响应方面更多可以从需求的复杂程度下手。我另外一个受益点，即是纯函数的编写，纯函数的结果不受外部的变量影响，可以缓存，可以测试，有助于代码的编写。

Service Worker与PWA展望

相比与其他技术，Service Worker是离我们投入生产环境最近。随着很多厂家逐渐兼容PWA技术，例如安卓微信浏览器。PWA技术的优势在于不需要大范围改代码，而且轻松兼容旧浏览器。

Service Worker更像一个“媒介”“代理”。检查着静态资源的更新情况，优先价值离线资源，旧的资源将会被更新，其中包括了html，js，css还有fetch请求等。整个执行会有“安装”“激活”的过程，其实非常简单，完成即可从浏览器读取数据。结合多页面的Vue框架，将会是成为我下一年的一个重点工作目标。

总结

我在AlloyTeam Conf的收获还是特别多，我认为能够和自己工作能联系在一起的技术，才是真正的“好技术”，继续加油。