当天参加场次

  1. 聊聊技术管理成长中的对与错 - By winter(程邵非)
  2. 打造前端监控体系 - By 何方舟
  3. Vue 高效开发之路 - By 蒋豪群
  4. Flutter on Desktop - By 郭力恒
  5. Serverless 中的 Node.js 实践 - By 龙佳文

场次一：技术管理成长有感

A: 公司、团队、个人三者之间关系

公司、团队、个人三者之间关系

三者关系
  1. 员工： 可以从团体那边获取成长、薪酬；为团体付出了技术和劳动
  2. 团队： 可以从公司那边获取资源；为公司产出业务；为员工提供成长
  3. 公司： 可以从团体那边得到业务增长；提供团队各种资源

B: 前端创造价值路径

公司、团队、个人三者之间关系

  1. 质量和效率 ==> 业务价值 ==> 创新

C: 数据驱动的思考方式

数据驱动的思考方式

步骤
  1. 目标
    1. 分析业务目标，拆分目标模块、定数据
  2. 现状
    1. 根据当前的现状采集数据
  3. 方案
    1. 设计技术方案，预估最终数据
  4. 实施
    1. 小规模实施，
    2. 推广整个部门，甚至整个公司
    3. 最终形成制度或者规范
  5. 结果
    1. 对比之前现状的数据看成效

D: 对前端全栈的另一种理解

  1. 全栈 => 赋能。 让服务器也能写前端
  2. 让后端也能写前端参考飞冰

场次二：打造前端监控体系

端监控维度

A: 监控的维度

1.异常监控

  1. 全局函数兜底：

    1. window.onerror = function(message, source, lineno, colno, error) { … }

    2. Promise -> unhandledrejection （当Promise被reject并且没有得到处理的时候，会触发unhandledrejection事件。目前只有chrome49实现）

      1
      window.addEventListener("unhandledrejection", function(e){});

    3. VUE errorHandler

    4. React componentDidCatch

  2. 跨域引起的Script Error

    1. js脚本添加crossorigin=”anonymous” 这一步告诉浏览器，目标脚本通过匿名方式获取。这意味着请求脚本时没有潜在的用户身份信息(如cookies、HTTP 证书等)发送到服务端
    2. 添加跨域HTTP响应头 
      Access-Control-Allow-Origin: *

  3. sourceMap

    1. sourceMap只能内部开发人员看到，其他人不允许看到。
    2. 线上调试可以把sourceMap文件放内网，我们可以通过vpn看到。
    3. 服务器解析错误信息问题
      1. 接下来就是考虑监控系统了，监控系统是用来收集前端的异常信息，并在达到一定阈值后向自动告诉开发人员（虽然这得让开发人员出于 on call 状态），上面我们说到了用户上报过来的信息是压缩后的行、列号信息，这样的信息本质上对于开发人员来说意义是不大的，因此需要在服务端将行列号解析一遍，这个工作看起来貌似没法完成呀，不过感谢 mozilla 开源的 source-map，这可以让这个工作变得异常简单，只要读取生成的 sourcemap，将行列号信息作为参数传递即可
    4. 参考我的例子

  4. 崩溃和卡顿

    1. 情况：
      1. 卡顿js无法及时执行
      2. 崩溃js就运行不了
    2. 解决方法
      1. window 中 load 与 beforeunload 事件
      2. 基于 Service Worker (1：有自己独立的线程；2：生命周期比网页长)
      3. 解决方案参考

  5. 客户端代码报错

    1. 是因为WebviewJSBridge插入时机不对。
  6. Patch 原⽣异步⽅法
    1. setTimeout
    2. setInterval
    3. requestAnimationFrame
    4. EventTarget
2.资源监控
1. 全局函数兜底：
 1. window.addEventListener('error',function(){}, false); *图片资源加载错误。此时只有window.addEventListener('error')可以捕获到*
 2. 为了避免和window.onerror重复，只有event.srcElement inatanceof HTMLScriptElement或HTMLLinkElement或HTMLImageElement时才上报
3.性能监控
  1. 异步接口数据上报
    1. xmlHttpRequest
    2. fetch
  2. 图片测速
  3. 首屏时间
    1. 分类：
      1. ssr页面 -> DOMContentload作为⾸屏时间点
      2. 非ssr页面 —> 异步数据请求完成后，第⼀次渲染，作为⾸屏时间点
    2. 面对的问题：
      1. 侵入式业务开发
      2. 手动打点
      3. 首屏打点标准不一致
    3. 尝试解决方案
      1. 记录DOM节点变化
      2. 当DOM节点不再突增，认为首页渲染成功
4.安全监控
5.日志上报

维度

日志收集
  1. 白名单
  2. 抽样
  3. 日志等级
    离线日志
    离线日志
  4. 用户端存储：IndexDB、localStorage
    日志上报发送
  5. 合并上报
  6. 压缩上报内容
  7. navigator.sendBeacon

    navigator.sendBeacon这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。不受浏览器行为限制：即使浏览器关闭请求也能照样发出。
    IE浏览器不支持，兼容性不好。

  8. new Image().src
    1. 优点： 可以跨域、不怕被屏蔽JS、执行过程无阻塞
    2. 缺点： 有丢失情况、GET请求大小有限制

场次三：Vue ⾼效开发之路

Vue设计理念

模板DSL
为什么要专门的模板语法
  1. 模板语法优点
    1. 专为渲染服务
    2. 可静态分析
    3. 可自定义语法扩展
  2. 优先使用.vue文件
    1. 预编译模板可以带来更多性能优化

      当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法
      预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串

    2. 预编译可以提供更好的报错提示
响应式数据
优势
  1. 减少操作，提高性能
  2. 减少不必要的概念
劣势（vue3.0有做优化）
  1. 超大数据集的性能问题
  2. js语言限制
响应式数据注意
  1. 响应式数据最终都是为渲染服务
  2. 不必要的数据不要放到 data 中
  3. 使⽤ Object.freeze 阻⽌不必要数据响应
优化代码技巧
  1. 错误处理（errorHandler & warnHandler & errorCaptured & renderError）
  2. 减少重复
  3. 尽量使用computed
  4. 使⽤ immediate watcher(立即执行可以去掉在created中定义的方法)
调试代码技巧
  1. 时间旅行调试方法
    1. 实现思路
      1. 记下所有数据操作
      2. 回退 = 当然的状态一直回放到上一步操作
    2. 核心要点
      1. 操作的原子性

        要么完整的被执行,要么完全不执行。这种特性就叫原子性

      2. 操作可以记录
渐进式框架

渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分