整个前端性能提升大致分几类
网站性能提升
1、静态资源的优化
主要是减少静态资源的加载时间,主要包括 html、js、css 和 图片。
- a. 减少 http 请求数:合并 js、css、制作雪碧图以及使用 http 缓存;
- b. 减少资源的大小:压缩文件、压缩图片,小图使用 base64 编码等;
- c. 异步组件和图片懒加载;
- d. CDN 加速 和 缓存(bootCDN):客户端可通过最佳的网络链路加载静态资源,提高访问的速度和成功率。(CDN:通过在网络各处放置节点服务器构成的一层智能虚拟网络,可将用户的请求重新导向离用户最近的服务节点上)
2、接口访问的优化
- 1,http 持久链接(Conection:keep-alive)
- 2,后端优化合并请求(比如在进入一个商品详情页的时候,后端会提供一个接口获取商品的基本信息,然后当用户点击加入购物车时)
- 3,冷数据接口缓存到
localStorage
,减少请求
3、页面渲染速度的优化
- 1,由于浏览器的 js 引擎线程和 GUI 渲染线程是互斥的,所以在执行 js 的时候会阻塞它的渲染,所以一般会将 css 放在顶部,优先渲染,js 放在底部;
- 2,减少 dom 的操作;
- 3,使用虚拟 DOM 渲染方案,做到最小化操作真实的 dom;
- 4,事件代理:利用事件冒泡原理,把函数注册到父级元素上;
- 5,减少页面的重绘和回流。