遨游GMTC大前端大会

主题

信用卡研发体系建设与工程化演进

在众多工程化分享中,我觉得来自51信用卡的前端架构组负责人的分享比较清晰、实用和可操作。他讲了他到51信用卡后,建立了一套从开发到发布的整个工程化体系方案。从开发阶段eslint代码规范审查,到代码提交到gitlab仓库后自动触发Jenkins构建前端项目,到上线前使用自动化脚本对production环境配置进行比对检查,最后通过脚本部署代码到服务器。一套流程下来,很大程度上避免了人为因素导致出现的问题。提高了软件整体的可靠性。

他们比较有亮点的是他们在上线前会对production环境配置进行检查,我觉得这个我们可以借鉴。之前也发生过改了production配置而导致的上线失败,通过这种方式应该能一定程度上避免。会后加了讲师微信了解了他们配置比对的技术,还是基于字符串匹配的,这块可能有改进的空间。

支付宝后工程化时代

支付宝做了一个可视化的工具用来给后台开发人员快速的开发后台管理系统的前端界面。通过界面退拽和代码插入的方式,使得后台开发人员可以自主开发后台管理系统。据说在他们现在后台系统都是有后台开发工程师自主搭建和开发的,解放了前端开发去写重复的后台管理系统。不过我个人感觉这套系统比较形式化,他只是解决了后台开发不需要写界面样式的问题,但是Javascript逻辑还是要写的。现在很多现成的UI库都能很快的解决样式问题,所以个人感觉这个东西的投入产出比不是很高。

另外,他们做了一个可视化界面帮助运营人员生成H5宣传页。这个我们可以借鉴一下,这个能极大的减少开发人员介入开发宣传性质H5的成本。只需要运营人员根据自己的配置生成H5就可以了。

剖析HTML5游戏引擎的渲染原理及动画性能优化

白鹭引擎的架构师讲了图形学及图形优化相关知识。由于缺乏对图形学基础了解,所以全程没有跟上思路。

对我们比较有用的一些知识点是,他列出了浏览器实现动画和游戏的各种技术方案以及它们的优劣。

DOM - 适合做静态内容渲染,适合制作放置类静态游戏(旅行青蛙)
Canvas2d - 性能和浏览器兼容都不错
WebGL - 性能很强劲,但是API复杂,入门门槛很高

在白鹭引擎里面,兼容了这三种渲染方式。

提到“性能糟糕”的含义
- 帧频很低
- 设备发热
- 不定期卡顿

他们给出的建议是,在任何情况下,保持稳定的帧频会给用户带来好的体验。帧频再高但是不稳定,用户也会觉得体验差。

V8、JavaScript的现在与未来

从V8引擎底层的实现来讲解为什么有些代码会是低效的。
例举了几个常见的代码写法,分析其性能。对我们平时写代码有一定的指导意义。
具体的例子可以看PPT。
总体感觉讲的东西还是太少了,浅尝截止。

WebAssembly在音视频领域的应用

前半段在介绍WebAssembly的历史和基础,感觉有点浪费时间。后半段介绍了他们如何用WebAssembly去优化他们的应用。

这家公司主要做在线远程教学的,涉及到老师视频授课的场景。举个例子,在老师远程授课的场景中,程序需要判断老师授课的时候仪态是否端正,会每隔一定时间截获一个视频帧去计算,做面部检测后给出结果。如果这个计算过程放在JavaScript去做的话,可想而知性能不会好到哪里去,所以他们尝试使用WebAssembly去做计算。实际的效果是,使用WebAssembly方案后,视频的流畅度有明显的提高。

PWA专题

目前的浏览器市场对PWA的支持已经越来越好了,可以开始规模化的使用PWA技术去提升网页应用的加载性能。

主要优化点如下:

使用serviceworker去缓存静态资源, 使得应用在弱网、离线环境下可用。
使用骨架屏,在静态资源未加载完之前,显示页面的骨架结构,减少用户的等待预期,提高体验。

总结

  • 广告还是比较少的,毕竟门票很贵
  • 干货蛮多的,但是技术细节可能由于时间限制没有讲太多。不过很多讲师留了微信,可以下来讨论
  • 位置严重不够,很多场是站着听完的

猜你喜欢

转载自blog.csdn.net/ForeverCjl/article/details/80907728