- 列表与列表勾选(多选)如何解耦【mark 微信端】
- 微信签名逻辑封装在组件内后,在同一个页面有多个该组件时,如何避免重复签名导致的签名失败:去抖并收集resolve,在签名成功后才集中触发resolve,通知各个组件签名成功
- vue指令scrollToView
- 表单组件
- request的装饰器
- 三层数据架构
- 基于npm script自动化三层数据架构
- 跟随项目的组件库持续化迭代与二次开发
- 基于vue-cli3插件化的项目模板搭建
- next方法将请求的数据回填到组件
性能优化:
-
http网络层面
- 开启gzip
- cdn
- 减少请求,与请求的大小
- 减小图片体积
- Preload
- Prefetch
- 强制使用缓存Expires/cache-control
-
图片层片
- 使用雪碧图组合普通图片或svg图
- 使用字体图标或svg,减少请求,可更改颜色,加阴影,高清不糊
- 针对不同分辨率的屏幕加载不同的质量的图片srcset
- 图片使用离散余弦算法压缩图片,以便得到从模糊到清晰的加载行为
-
发布包层面
- 发布es6到线上 type=module nomodule
- 将更新频率不同的代码,打包到不同的js文件,如工具库,ui等放到vender.js,项目内部工具方法等放到lib.js等
-
样式层面
- 按重要程度决定记载时间
- 避免将重要的样式使用@import导入,被导入的样式文件会在该文件加载完成后才发起请求加载
-
逻辑层面
- 使用去抖,节流函数
- 尽量使用面向对象方式,方便复用避免污染全局
- 函数惰性化处理
-
css样式
- BEM原则(块(block)、元素(element)、修饰符(modifier))
- css modules
未来:
- 单元测试
- 持续化自动集成