OSC 源创会分享记录

[imfenghuang]

今天下午跑去参加了 OSC 源创会的活动，分享主题如下：

主题	演讲嘉宾
飞翔在后CMS时代 —— 从前端组件库及CMS思维到GPMS主题	姜季廷，个推web前端首席架构师演讲嘉宾
如何在Web/H5轻松集成音视频通话	李强，容联云通讯客户端媒体库专家
“未来已来”--GraphQL 在 SkyWalking 5.0 中的实践	高洪涛，华为技术专家
探索H5性能天花板——腾讯NOW直播极限优化实践	谢清贵，现腾讯now直播前端核心开发
eWTP前端国际化技术架构	谭衍熙（米科），阿里巴巴高级前端工程师
2018年的前端工程化，我们该做什么？	王伟嘉（Starkwang），腾讯前端工程师

先吐槽，前两个主题有点像产品推荐会了，囧。第二个主题涉及到的 WebRTC 内容，之前预研 WebAR 的时候用到过一些（mediaStream），这次算是复习+拓展（RTCPeerConnection RTCDataChannel）吧。

GraphQL 是新一代接口语言？这个听的有点儿懵逼，对 GraphQL 还不清楚，之后在补充更新。

茶歇的披萨🍕很好吃啊😍。茶歇完进来，有童鞋尽然突发情况晕倒了，被紧急送医，之后主持人小姐姐通告，这位童鞋被送医后清醒过来了🙏🙏🙏广告程序员小哥哥小姐姐要注意自己的身体啊。

NOW 直播优化，嘉宾介绍到 Hybrid APP 中首屏耗时的大头，主要包括 webview loadUrl，js加载和执行，CGI 请求。分享的主要内容自然而然也就成了如果减少耗时大头的时间。

• webview loadUrl

  1. 页面预加载。需要考虑预加载多少个页面？预加载哪几个页面？什么时候开始预加载页面？嘉宾给出的答案是：预加载当前页面左右 N 个，N 由 CPU，内存，机型等决定，是一个实践和测试之后得出的阶段函数。当前页面完全加载成功之后开始预加载，固定时间之后预加载，两者谁先到点，就执行谁。
  2. 预加载框架。用户点击链接之后，先加载 webview 框架页面，之后获取真实 URL，读取离线包的配置信息，再进行前端渲染，渲染时使用 pushState，改变当前页面的 URL 但不刷新页面，同时加载解析 CSS，加载执行 JS。

• js加载和执行

  1. 使用 PWA ，利用离线缓存的特性；
  2. 使用离线包，静态资源内置在 APP 内，webview 请求资源时，APP 先拦截请求，再根据请求资源的相应地参数，加载本地离线资源，本地离线资源没有，再进一一步向服务器请求资源；
  3. 使用前端本地缓存。前端缓存首屏 HTML 片段和数据，页面打开时，先用本地缓存数据进行渲染，渲染完毕后，拉取最新的页面结构和数据，适时更新，同时更新本地缓存。当然，我们都知道像 localstroage 这种缓存容量大小是有限的，约 5M，因此，需要借助客户端的力量，把数据存到内存或离线文件中。这种本地缓存的方式，虽然在渲染和呈现页面的时间上很有优势，但是也需要考虑业务场景，对于业务内容更新较平凡的页面来说，渲染缓存页面之后再渲染新的页面数据之间存在「闪烁」（新的页面数据与缓存数据差别较大，切换时，肉眼能清晰地看到页面重绘的变化）。

• CGI 请求
  对于 CGI 请求耗时，嘉宾给出的优化方案是客户端预加载接口数据。在点击链接之后，一方面启动 webview 加载页面，另一方面，并行一个任务，请求代理服务器，拉取当前链接涉及的 CGI 接口数据，返回，如果此时 webview 还没有启动完毕，则写入内存，并等 webview 启动再执行下一步操作，如果 webview 已经启动了，则把返回的数据通知 webview。（PS：现场拍的照片看不清了，具体内容等我拿到 ppt 再修改）

米科分享了阿里在国际化业务上的一些实践，包括多语言方案，本地化方案等。

Stark则从代码构建，静态类型检查，代码CR，利用PWA，Service Worker，预渲染/ APP Shell，ES2015+，动态 polyfill，页面监控与错误上报等方面给出了2018年前端工程化的建议和思考。

• 代码构建
  wepack 配置太难？试试 Parcel 吧，号称零配置的应用打包器。内置常用依赖包，减少用户自己写配置。
• 静态类型检查
  flow
• 代码CR
  团队约定规范
• ES2015+
  大部分移动端浏览器已经支持 ES2015，编译到 ES2015+ 在压缩体积上有优势。

// 支持 ES Module 的浏览器能识别 type=“module” 和 nomodule，因此只会加载 index.js，反之，老旧浏览器不能识别 type=“module” 和 nomodule，因此，只会加载 index.es5.js 
<script type="module" src="index.js"></script>
<script nomodule src="index.es5.js"></script>

// *注意
webpack 3.0 以下的 UglifyJS 不支持压缩 ES 代码，可以考虑升级 webpack 或是使用 魔改版的 UglifyJS
少数浏览器不支持 nomodule 属性，可以通过 shim 解决

• 动态 polyfill
  polyfill.io