前端性能优化七大手段

知识点：

减少请求数量
减少资源大小
优化网络连接
优化资源加载
减少回流重绘
使用性能更好的API
构建优化

1、减少http请求数量

通过减少重定向，使用缓存，
不使用css@import，
避免使用空的src和href等手段，
使用图片地图，在一个图片上关联多个URL。避免多次图片请求信息。
使用雪碧图来展示图片
合并样式表和js脚本，减少http请求

2、减少资源大小

拖在线工具压缩html css js 图片 使用字体图标，雪碧图来代替大图。安卓下可以使用webp格式的图片

3、优化网络连接

使用CDN，

使用DNS预解析：

DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。
对几个网站提前解析DNS，由于它是并行的，不会阻塞页面渲染，这样可以缩短资源加载的时间
方法是在head标签里面写上几个link标签

<link rel="dns-prefecth" href="">

并行连接：

由于HTTP1.1协议下，chrome每个域名的最大并发数是6个。使用多个域名，可以增加并发数。

持久连接：

使用keep-alive或者presistent来建立持久连接，持久连接降低了时延和连接建立的开销，将连接保持在已协调状态，而且减少了打开连接的潜在数量。

管道化连接：

在HTTP2协议中，可以开启管道化连接，即单条连接的多路复用，每条连接中并发传输多个资源，这里就不需要添加域名来增加并发数了。

4、优化资源加载

通过优化资源加载位置，比如外部样式表放在head里，外部js脚本放在html末尾。合理使用图片懒加载技术。

5、减少回流和重绘

1、避免使用css层级较深的选择器
2、不使用table布局，
3、能使用css实现的样式尽量不用js实现
4、样式集中不多次修改
5、缓存布局信息，读写分离，使用外部js和css。

6、使用性能更好的API

7、构建优化

web前端构建优化