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