CSS资源、font资源
- css资源全局样式、页面级公共样式、组件级公共样式(通过合理添加类名复用样式声明、尽量减少css代码数量)
- 尽量在组件增加了样式作用域,利用文件hash唯一性避免命名冲突,避免使用层级过深的结构化css(会影响选择器性能)。
- 抽离html中的行内样式、减小js代码体积、提高js代码执行速度(css加载时不阻塞dom树解析)。
- 利用预编译工具定义颜色变量复用(变量部分需要写兼容代码)。
- 减少使用伪类选择器(依赖dom结构、不方便维护)
- 公共样式库、ui库的css代码有条件可以考虑使用cdn服务(利用网络以及缓存来实现加速)
图片资源
- 雪碧图、base64编码(作用是减少http请求)
- 当存在大量图片资源加载时、先加载一倍图、用户点击放大加载二倍图
- 长页面中纵向存在大量图片时、通过指令的形式,判断元素距离视口距离、动态创建img插入dome树中
- 图片的oss文件存储服务、(利用多节点服务器实现网络层的加速)
js资源
- webpake之类的构建工具,压缩、混淆、构建层面的分块、es模块的shaking-tree, 按需
加载、库文件使用cdn公共服务(实现网络层) - 路由层面的异步路由、动态组件、异步加载技术(动态注入script标签加载js)
- 利用link标签的preload、prefetch技术预加载技术,(浏览器线程空闲时预加载资源)
- 对于与界面dom无关的js代码,可以直接使用异步脚本(async),延迟脚本(defer)
缓存的利用
- 在构建时、合理拆分css、js、chunk(静态的、经常维护修改的)以内容hash命名
配合服务部署过程中配置合理的强缓存、协商缓存 - 一般静态资源中,index.html必须使用协商缓存,以保证每次都获取到最新的文档,其
他资源则全部使用强缓存、完全依赖html中资源文件名称或者路径修改来实现资源更新
用户体验层面
- 使用骨架屏、配置加载loading效果、过渡动画、加载超时的提示与回退交互