前端优化的一些思考（南麓）

1.图像优化

2.加载优化

3.书写高性能的代码

4.构建优化

5.渲染优化

6.服务器端优化

7.数据存储

8.缓存技术

1.图像优化

图像往往最直观，图像越来越多，请求大尺寸图片需要过久的等待事件。

图像的选取和使用

图像的加载和显示

本质是用更少的资源开销完成图像的传输和显示。

同一个图像在不同的地方展示不同的效果，可以尝试使用css处理，而不是多张图片；

带文字的图片，尽量自己加文字，而不是让UI加上文字（1.比较大，用户体验差，放大缩小，分辨率）

首先要思考图像是否必须。

图像分为矢量图和位图

矢量图：适合文本/品牌logo,控件图标，二维码；特点是：能够在任何缩放比例下都呈现出细节同样清晰的展示效果。  svg标签里卖弄的就是矢量图的所有信息，但是这些不必要，可以去除这些数据。

位图：是通过矩阵中栅格编码来实现的，受制于像素点。展示复杂照片。

分辨率：屏幕分辨率和图像分辨率；

为了能够在不同的分辨率下使项目种所包含的图像得到恰当的展示效果，可以采用picture标签和srcset属性

除了IE及其他低版本的浏览器不支持，大部分的浏览器都已经支持img标签的srcset属性，src种放一个默认的，防止浏览器不支持。

<picture>

<source></source>

</picture>

有损压缩，减少不必要的像素位数

2.图像格式

jpeg:有损压缩算法，去除冗余的图像和色彩数据，获取较高的压缩率。  背景图/轮播图/banner图

渐进式JPEFG 轮廓慢慢出现

创建渐进式JPEFG imagemin

web-p  安装web-loader 在webpack种配置 loader 把png 转为web-p

尽量使用矢量图  矢量图：svg  位图  webp  

雪碧图：降低请求次数；

base64编码过后的图片会膨胀3/4;

雪碧图L:小的静态图标  background-image background-position height width

display:none;