网站图标多，首次打开慢，怎么破？

Posted 2020-08-28 Cboy的Dream

背景

项目开发过程中可能会遇到首次打开一个工具栏有特别多图标的网站，图标加载特别慢

原因分析

如果服务器上存的图片都是单独分开的话，那打开网站后，面板上的所有图标是不是都要请求服务器呢？次数是不是就多了？

那我们就减少请求服务器次数。优化一是本次文章的主题：切图，其它优化是网页优化

优化一：切图

让美工把所有图标整在一张图片里，然后通过CSS去切图

 1 background: url(图片地址) -10px 0 no-repeat; 

优化二：压缩页面

后台使用Gzip技术压缩页面，体积小了，页面打开就快了

优化三：图片、js、css文件预加载

举个栗子，在打开首页的时候，已经把其他页面上的图标加载到本地，再打开其他页面的时候，是不是就不需要再请求了，因为有缓存了

优化四：缓存技术

常用的图标缓存到客户端，后面打开速度就快多了

优化五：静态资源和项目网站分开部署两台服务器

如果有图片、附件上传功能的话，并且有米情况，那可以考虑分开部署。

优化六：选择合适的图片格式JPG、PNG和GIF