【Day12】整个前端性能提升大致分几类

网站性能提升

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，减少页面的重绘和回流。