参加 FreeCodeCamp 2018上海秋季交流会

本周六参加了 FreeCodeCamp 的前端交流会,而这也是我第一次参加的线下 Conf,在这里分享一下整个 Conf 大概的内容和自己的收获。

本次 Conf 的地点是在上海淞虹路,我坐了一个半小时的地铁匆匆地赶到了会场,楼下的工作人员说地点从6楼改到了4楼,之后我乘着电梯终于到了目的地。会场的布置比较简单,大约有一百多个座位,前面有个大屏幕展示讲师的ppt。

首先,大会的主持人于航介绍了下 FreeCodeCamp(FCC),这是一个适合零基础的编程社区,起源于国外,近几年在国内开设了中文社区,并开始活跃起来。接下来就是各个讲师的技术分享了。

Layers: a case study of CSS optimization

第一个是来自 Aminoapps 的吴名扬,他主要讲了 CSS 中关于 layer 层的优化。背景是 Aminoapps 的网站首页有大量的 gif 图,导致网站滚动比较卡。浏览器的加载渲染过程:

Javascript -> Style -> Layout -> Paint -> Composite

本次宣讲的主题就是减少中间的 Layout 时间,由于 layout 本身可能存在发散,不同的层之间的合成导致性能降低,所以是尽可能减少层的数量,讲师提出了一些方法

  • 由于事先 position: relative 时常会触发不必要的 layer, 视情况可以改布局为 flexbox / float / table, 或改用 native margin
  • 注意 profiling, 不要因减少 layer 而增加 layout 的时间
  • 不要在出现次数多,像素少的元素上使用 transform
  • translate 类的属性可以使用 margin / padding 代替
  • scale 类的属性可以使用 rem / em / vw 代替
  • scale 类的属性还可以使用 responsive background 代替
  • 使用 contain: content 可以隔离 paint / layout, 让 layout 不会扩散
  • css filter 不宜用于背景图片(如 blur)

顺便我还学会了如何查看页面的 layer

webRTC 的场景创新和体验优化

来自爱奇艺的韦躐晟老师主要基于他们的业务阐述了 webRTC。由于没怎么接触过视频这块,听得有点云里雾里,感觉不明觉厉。不过,韦躐晟老师放的一个蒙版弹幕视频着实惊艳,弹幕会从人像的背后穿过,不会遮挡在人前,但是可以在背景上出现。据他描述,他们是获取了每一帧的图像,然后通过之前深度学习跑出的模型进行计算,生成一个人像蒙版,而字母就是在对应的蒙版周围,所以,其实不是字从人下面穿过,是在人像的范围内压根没有弹幕。
贴一下韦躐晟老师提到的 WebRTC 的应用与创新:

  • 单聊转群聊
  • 群聊画中画模式
  • 共享桌面 + 白板
  • 远程桌面控制
  • 主播推流
  • 推流 + 游戏互动
  • 推流 + 蒙版弹幕

点融CIS基础设施

来自点融的林选伟。首先,他先大概阐述了下什么是 Node,它的模块加载以及事件循环,然后引出了 CIS,它的使用背景和为什么使用它。CIS 是点融内部的一套 Node.js 的基础设施,它的设计范式是约定优于配置,我前段时间学 Egg.js 时,发现也是 egg 团队所奉行的。整体架构粗略得看,跟 Egg 蛮像的,自身规范了不少约定,加上路由设计,日志系统,配置表系统,定时任务系统,可定制的插件,单元测试,又辅以了多进程的并发模型,还是相当完善的。

讲解期间,讲师晒出了目前大型互联网公司常见的 web 架构:

函数式语言:ClosureScript 在前端开发的体验

重量级讲师,题叶大佬。原是 React 中文社区的发起人,现活跃与 ClosureScript 社区,之前在饿了吗就职,现投身于一家创业公司。题叶大佬感觉很有极客精神,讲话语速也比较快,主要是介绍了 ClosureScript 和它的应用,以及自己在平常使用的实际操作和相关的个人项目。这是一门现代化的 Lisp 方言,可以编译到 JVM/JavaScript 运行,契合 React 的理念,适合界面开发。毕竟没怎么接触过 Lisp 语言,听课过程有点不明觉厉,只想喊666。

在错误中寻找正确的方向:应用升级和重构之路

来自掌门的杨韦韦,主要讲述了公司从过去的一些前端架构转变为当前架构的思路和解决方案,一些经验分享。

最后

FCC 每年会举办4次,每个季节举办一次,期待下次的冬季交流会,最后放上大会的合照。

资料链接

layer相关