开发回顾

1. 列表与列表勾选（多选）如何解耦【mark 微信端】
2. 微信签名逻辑封装在组件内后，在同一个页面有多个该组件时，如何避免重复签名导致的签名失败：去抖并收集resolve,在签名成功后才集中触发resolve，通知各个组件签名成功
3. vue指令scrollToView
4. 表单组件
5. request的装饰器
6. 三层数据架构
7. 基于npm script自动化三层数据架构
8. 跟随项目的组件库持续化迭代与二次开发
9. 基于vue-cli3插件化的项目模板搭建
10. next方法将请求的数据回填到组件

性能优化：

• http网络层面

  1. 开启gzip
  2. cdn
  3. 减少请求，与请求的大小
  4. 减小图片体积
  5. Preload
  6. Prefetch
  7. 强制使用缓存Expires/cache-control

• 图片层片

  1. 使用雪碧图组合普通图片或svg图
  2. 使用字体图标或svg，减少请求，可更改颜色，加阴影，高清不糊
  3. 针对不同分辨率的屏幕加载不同的质量的图片srcset
  4. 图片使用离散余弦算法压缩图片，以便得到从模糊到清晰的加载行为

• 发布包层面

  1. 发布es6到线上 type=module nomodule
  2. 将更新频率不同的代码，打包到不同的js文件，如工具库，ui等放到vender.js，项目内部工具方法等放到lib.js等

• 样式层面

  1. 按重要程度决定记载时间
  2. 避免将重要的样式使用@import导入，被导入的样式文件会在该文件加载完成后才发起请求加载

• 逻辑层面

  1. 使用去抖，节流函数
  2. 尽量使用面向对象方式，方便复用避免污染全局
  3. 函数惰性化处理

• css样式

  1. BEM原则（块（block）、元素（element）、修饰符（modifier））
  2. css modules

页面渲染流程

web安全

未来：

1. 单元测试
2. 持续化自动集成