AlloyTeam 前端大会的技术一览

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

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

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

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

实现原理

ssr

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技术的优势在于不需要大范围改代码,而且轻松兼容旧浏览器。

pwa

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

pwa

总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容