前端性能优化总结：1.减少HTTP请求次数前端开发中80%以上的响应时间浪费在图片、样式、脚本等资源的上传和下载上。但是，大多数资源都是必不可少的。我们减少HTTP请求的数量从以下几个方面进行：①合并文件（JS/CSS文件/图片）合并图片。当图片很多的时候，通过合并成一张大图，不仅可以减少http请求的次数，还可以使用缓存来提高性能。合并CSS和JS文件。比如3个css文件可能发送3个请求，用户会等待很长时间。合并后只需要发送一次请求，节省了请求时间，加快了页面加载速度，提升了用户体验。②内联图片（Base64编码）使用data:URL方式在页面中嵌入图片，会增加HTML文件的体积，通过编码后的字符串将图片嵌入到网页文本中，有效减小页面体积.③友好的缓存策略充分利用缓存。通过在请求头中设置缓存属性，下次再次访问时，可以直接从本地获取资源，减少不必要的数据传输，节省带宽，减轻服务器负担，提高网站性能，加快访问速度用户体验。页面在客户端加载的速度。expires设置了一个时间，只要在这个时间之前，浏览器就不会去请求文件，而是直接使用缓存。cache-control设置过期时间长度（秒）。在这个时间范围内，浏览器会直接读取缓存。当两者都过期且Cache-Control存在时，Cache-Control的优先级更高。对于静态组件：永不过期，通过设置一个遥远的未来时间为Expires冗余动态组件：使用合适的Cache-ControlHTTP头，允许浏览器进行条件请求2.使用CDNCDN，内容分发网络，它是一组分布式的Web服务器在不同的地理位置可以使用户就近获取所需的内容，解决网络拥堵的情况，提高用户访问网站的响应速度。3.优化资源加载位置。将CSS放在文件的头部，将JavaScript文件放在底部。所有放在head标签中的CSS和JS文件都会阻塞渲染。如果这些css和js的加载解析时间比较长，页面显示会空白，应该把js文件放在最下面，先解析html再解析js。CSS文件也应该放在header中，这样可以避免没有数据的页面被用户看到，体验不好。如果想把JS文件放在header中，只需要在script标签中加上defer属性，异步下载，延迟执行即可。4.开启GZIPGzip是数据压缩，用于压缩所有通过互联网传输的文本资源。在服务器端对资源进行压缩，然后在解压前发送给浏览器，这样可以减少文件传输大小，提高网页加载性能。要启用GZIP，请在相应的Web服务配置文件中进行设置。以Apache为例，在配置文件httpd.conf中添加：Accept-Encoding:gzip,deflate例如用Vue开发的项目构建后生成的app.js文件大小为3.5MB，经过编译后只有1.4Mb用Gzip压缩。5、图片优化①尽量使用PNG格式的图片，体积比较小。②对于不同格式的图片，最好优化后再上线。③延迟加载图片（lazyloading）在页面中，先不为图片设置路径，只有当图片出现在浏览器可见区域时才加载真正的图片，即延迟加载。④响应式图片浏览器可以根据屏幕大小自动加载合适的图片。比如显示一张尺寸为5050的图片，使用的是500500，要显示合适的图片。⑤降低画质降低画质。通常，100%图像质量和90%图像质量之间没有区别。适当降低图像质量不会影响页面显示。⑥用CSS3效果代替图片CSS绘制的图片通常只有原图的几分之一甚至十分之一的大小。有很多图像可以使用CSS效果（渐变、阴影等）绘制，在这种情况下CSS3是更好的选择。
