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

1、静态资源的优化

主要是减少静态资源的加载时间,主要包括html、js、css和图片。

a、减少http请求数:合并js、css、制作雪碧图以及使用http缓存;

b、减小资源的大小:压缩文件、压缩图片,小图使用base64编码等;

c、异步组件和图片懒加载;

d、CDN加速和缓存(bootCND):客户端可通过最佳的网络链路加载静态资源,提高访问的速度和成功率。

(CDN:通过在网络各处放置节点服务器构成的一层智能虚拟网络,可将用户的请求重新导向离用户最近的服务节点上)

 

2、接口访问的优化

1、http持久链接(Conection:keep-alive)

2、后端优化合并请求(比如在进入一个商品详情页的时候后端会提供一个接口获取商品的基本信息,然后当用户点击假如购物车时)

3、冷数据接口缓存到localstorage,减少请求

 

3、页面渲染速度的优化

1、由于浏览器的js引擎线程和GUI渲染线程是互斥的,所以在执行js的时候会阻塞它的渲染,所以一般

会将css放在顶部,优先渲染,js放在底部;

2、减少dom的操作:

a、vue中使用了虚拟DOM渲染方案,做到最小化操作真实的dom;

b、事件代理:利用事件冒泡原理,把函数注册到父级元素上。

3、减少页面的重绘和回流。

 

vue里:

1、souceMap关闭,只打包压缩后的文件;

2、compression-webpack-plugin,并设置productGzip:true,开启压缩;

3、路由懒加载(加快首屏加载速度,缺点:把多个js分开打包,导致http请求数增多)

4、v-if和v-show:

v-if是懒加载,只有为true时才加载,false时不会占据布局空间

v-show:不管是true还是false都会渲染,并会占据布局空间,优点:减少页面的重绘和回流。

5、为item设置key值:在列表数据进行遍历渲染的时候,方便vue将新值和旧值做对比,只渲染变化了的部分。

6、组件细分(比如轮播组件、列表组件、分页组件等):当数据变更时,渲染会加快;其次易于组件复用和维护。

7、使用loading和骨架屏加载,防止白屏和闪屏的情况。

8、服务端渲染:vue的页面渲染,通过模板编译,渲染出页面,而不是直出html,对于首屏有较大的损耗。

服务端渲染:现在服务端进行整个html的渲染,再将整个html输出到浏览器端。

9、DNS缓存,减少dns查询时间。

原文地址:https://www.cnblogs.com/annie211/p/12716435.html