- 静态资源放cdn, 提高不同地域用户访问资源的速度
- 页面或路由懒加载, 降低首次加载单一页面的代码体积
- 静态资源(如图片, 视频等)懒加载
- 资源压缩(比如开启gzip模式)
2. 白屏体验优化对于白屏优化, 也有很多成熟的例子, 比如采用骨架屏:
文章插图
图片
如果我们的项目是基于 vue-cli 构建的，那么可以使用比较成熟的的 page-skeleton-webpack-plugin 方案，否则我们仍然可以选择 vue-router 提供的 vue-server-renderer.
当然你的项目是使用react的, 也可以轻松使用如 react-content-loader 这样的svg方案来定制自己的骨架屏.
除了骨架屏之外, 我们还可以提供一个模版页面或者加载动画, 以便在页面加载完成之前给用户一个优雅的过渡提示. 比如:
文章插图
图片
3. 大数据列表渲染优化对于一些中后台复杂的系统模块, 可能会涉及到一次渲染大量列表项或者多级组织树的情况:
文章插图
图片
尤其是在大公司或者大集团中出现的频率非常高, 这种情况我们就需要用到虚拟列表或者节点懒加载的方式了. 虚拟列表应用非常广泛, 目前也有几个成熟的方案大家可以直接使用:
- vue virtual scroll list
- react-virtualized
- rc-virtual-list
4. api请求优化api 请求优化主要正对这种场景: 页面的渲染依赖于某个或者某些请求的完成, 或者由于某个页面请求量过大导致每次重新进入页面都需要造成一定的性能开销.
对于这两种情况, 其实不仅仅是对浏览器渲染有影响, 还会极大的增加服务器的压力, 所以我们需要对请求或者页面进行一定范围的缓存.
比如说我们可以把不长变动的请求数据存在 indexedDB 中, 当第二次访问直接可以从 indexedDB 中拿到请求数据, 这样既降低了服务器压力, 也提高了二次渲染的效率.
其次我们可以对部分页面做路由缓存, 避免每次切换都重新渲染, 当然这只针对于不需要实时更新数据的页面而言. 我之前也分享了一篇浏览器缓存接口实战的文章, 大家感兴趣的可以学习参考, 对于 indexedDB, 我封装了一个开箱即用的库, 大家可以直接使用:
Github地址: https://github.com/MrXujiang/xdb
5. 动画性能优化这也是个老生常谈的问题, 这里直接分享几个方案:
- 优化精简 DOM 结构 ， 合理布局
- 使用 transform 代替 left,top 减少使用引起页面重排的属性
- 开启硬件加速(比如设置transform: translateZ(0) 或者transform: translate3d(0, 0, 0))
- 尽量避免浏览器创建不必要的图形层
- 尽量减少 js 动画 ， 如需要，使用性能更友好的requestAnimationFrame
- 使用 chrome performance 工具调试动画性能
6. dom过载导致的页面卡顿优化一个页面如果dom数量过多, 会产生很多问题, 一方面会使得浏览器内存占用过高, 导致其他不相关的js逻辑操作进行阻塞或者失效, 表现就是页面卡顿或者无响应.
为了解决这个问题我们仍然可以使用虚拟滚动的方案或者懒加载的方案, 保证用户当前屏幕下的dom在一个合理的范围内, 如果是无法避免必须要展示大段dom元素, 我们可以用一个单独的页面来承载或者嵌入, 避免页面其他部分宕机. 也可以对复杂dom 进行局部“冷冻”(在非激活状态将其转化为图片, 激活时在逐渐渲染)
