Web前端性能优化

目录

• Web前端性能优化
  • • 1.减少http请求数量
      • 1.1 图片地图
      • 1.2 精灵图(Sprite)
      • 1.3 字体图标
      • 1.4 内联资源
      • 1.5 合并资源
      • 1.6 压缩
      • 1.7GZIP压缩
      • 1.8 优化图像
      • 1.9 减少cookie传输
• CDN（内容分发网络）
• 反向代理

Web前端性能优化

1.减少http请求数量

1.1 图片地图

在图片的指定区域指定超链接，把图片合并在一起，通过热点点击超链接，间接减少了客户端请求服务器图片的数量

1.2 精灵图(Sprite)

把多张小图拼成一张大图片，通过css来控制什么地方具体显示什么图片，裁剪出想要图片，减少服务器图片请求

1.3 字体图标

使用@font-face能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体，可以实现矢量图标，一次加载反复使用多个图标，相当于图标都变成了字体。可以将多个小图标定义在一个字体中，减少图标的请求次数。
如阿里巴巴矢量图

1.4 内联资源

将一些小的资源文件序列化成base64的编码，放在CSS样式或页面中，在客户端再解析，优点是合并了小的文件，减少请求，把二进制变成了字符串方便存储，但是会出一个没有意义的长字符串影响开发时阅读代码，另外在某些情况下将失去图片的缓存

1.5 合并资源

将多个小的，散的css、js文件合并，可利用工具。把多个请求变为一个请求

1.6 压缩

用户请求的资源越小速度将越快，网络带宽占用越小，但是压缩将占用更多的CPU资源，压缩与解压也是需要成本的。

1.7GZIP压缩

GZIP，即网页压缩，是由WEB服务器和浏览器之间共同遵守的协议
Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件

1.8 优化图像

转换图片格式，压缩图片体积

1.9 减少cookie传输

CDN（内容分发网络）

基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定，它是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。

本质是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据，即所谓网络访问第一跳

反向代理

用户发起的请求会先在反向服务器上寻找缓存，可以直接从反向代理服务器中返回。来自互联网的访问请求必须经过代理服务器，相当于在web服务器和可能的网络攻击之间建立了一个屏障

除外，代理服务器也可以通过配置缓存功能加速web请求