# 2.网络篇(http) ## 2.1 前端能做的网络优化 输入 URL 到显示页面这个过程中，涉及到网络层面的，有三个主要过程： 1. DNS 解析 2. TCP 连接 3. HTTP 请求/响应 对于 DNS 解析和 TCP 连接两个步骤，我们前端可以做的努力非常有限。相比之下，HTTP 连接这一层面的优化才是我们网络优化的核心 HTTP 优化有两个大的方向 1. 减少请求次数 2. 减少单次请求所花费的时间 ## 2.1 减少请求次数 ### 2.1.1 图片:雪碧图，图标字体文件 **雪碧图** 多张小图片合并为一张图，利用CSS -background-position调整图片显示位置 **图标字体文件** [阿里图标](https://www.iconfont.cn/) ### 2.1.2 合并JS和CSS文件 webpack,需要斟酌而定 ### 2.1.3 浏览器缓存 如果图片或者脚本，样式文件内容比较固定，不经常被修改，那么，尽可能利用缓存技术，减少HTTP请求次数或文件下载次数 ## 2.2 减少单次请求所花费的时间 主要是减少请求中数据的大小，从而达到减少单次请求所花费的时间 ## 2.2.1 图片 [图片在线批量压缩](https://tinypng.com/) ## gzip 如果是vue项目，还有nginx,哪么vue,nginx,服务器都要开启gzip