资源优化

为了是我们的网页丰富多彩，避免不了加载许多资源，除了常见的HTML，CSS，JavaScript资源，还有图片，字体等其他类型资源。

对于这些资源通用的优化手段那就是压缩和合并，对这些资源进行压缩和合并后有如下好处：

减少http请求数量
减少请求资源的大小

HTML，CSS和JavaScript优化

对于这三类资源的压缩和合并，在这里不做过多介绍，因为我相信现在开发都是工程化的，在构建阶段可以使用各种构建工具（例如webpack）得到很好的解决。即使存在少数项目没有使用构建工具，网上也有一大堆在线优化这些资源的网站（意思是：不用构建工具？行，自行百度吧）。

图片优化

要想高效的使用图片，则必须知道主流图片格式有哪些，不同格式的图片适用场景和优缺点。

1.JPG/JPEG

特点：有损压缩，图片色彩丰富，体积小
缺点：不够细致，比如纹理和边角显示
适用场景：轮播图等显示区域较大，但是不过度关心细节的地方。不适合用来展示网站Logo、线框类的图。

2.PNG

特点：色彩丰富，支持透明
缺点：体积较大
适用场景：网站Logo，图标

3.WEBP

特点：拥有JPG，PNG的特点，体积较小
缺点：兼容性
适用场景：1和2结合

4.GIF

特点：具有支持动画以及透明，体积小
缺点：能存储的颜色较少，色彩不够丰富
适用场景：动画Logo，可以看看京东那只会动的电子狗。

5.SVG

特点：矢量图，不会失真，开发者可以控制显示的内容
缺点：需要自定义的话，需要开发者掌握一定的SVG编写技巧，如果使用SVG绘制复杂的图片，体积有时候会比其他格式的图片要大。
适用场景：网站Logo，各种Icon图标。

什么时候使用什么格式图片，那就看具体业务需求了。

图片的懒加载（lazy loading）

诸如电商之类的网站，每一个页面都会涉及到大量的图片使用，如果不对图片进行懒加载（用到的时候去加载），那么用户体验是及其糟糕的，可能好长一段时间页面图片区域都是白屏。

1.使用loading属性实现懒加载

loading属性允许浏览器延迟加载屏幕外图像img，直到用户滚动到它们附近。加载支持三个值：

lazy:懒惰装载。
eager:立即装载。
auto: 浏览器将决定是否延迟加载。

<img src="lazy.jpg" loading="lazy" alt="...">

2.使用第三方解决方案

由于原生的loading属性实现懒加载存在一定的限制，所以最好的实现方式就是寻找社区已有的解决方案（当然，你也可以自己实现懒加载，相信这个实现代码对你来说是小菜一碟）

目前第三方图片懒加载方案包括但不限于以下介绍：

verlok/lazyload
Yall.js
Blazy

如果你是React开发者，react-lazy-load-image-component就挺不错。

使用渐进式图片

当用户请求一个图片的时候，或者在访问页面的时候如果图片较大或者网速慢的情况我们会看到图片加载起来是有一个明显过程的，就是从上到下逐行呈现出来（或者是长时间的白屏），这给用户的信号就是再等等图片还在加载中，并且图片没有加载出来的部分呈现一片空白，不利于体验。

为了优化用户体验，我们可以先让用户加载一个缩略图，然后加载渐进式图片，渐进式图片渲染过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。

前提是你要用渐进式图片，如果你们的美工MM不给你们弄的话，那就去百度吧（咳咳咳）

使用响应式图片

在不同屏幕尺寸下，加载不同的图片，保证用户体验。

1.使用srcset和sizes属性

    <img srcset="http://placehold.it/2000 2000w, 
http://placehold.it/1500 1500w, 
http://placehold.it/1000 1000w,
http://placehold.it/500 500w " sizes="
(max-width: 500px) 100vw,
(max-width: 1000px) 80vw,
(max-width: 1500px) 50vw,
2000px" src="http://placehold.it/500/abc" />

至于srcset和sizes属性的具体含义，请自行百度（百度比我说的好，奈何自己没文化，一句卧槽走天下）

2.使用picture标签

 <picture>
        <source media="(max-width: 500px)" srcset="http://placehold.it/500" />
        <source media="(max-width: 1000px)" srcset="http://placehold.it/1000" />
        <source media=" (max-width: 1500px)" srcset="http://placehold.it/1500" />
        <img src=" http://placehold.it/500/abc" />
    </picture>

使用精灵图

开发中，会遇到这样子的需求，鼠标移动到一个图标上，图标变成另一个图标。一般来说作为图标体积是很小的，如果每一个图标单独发送一次请求，那么就浪费了请求，这个时候可以把网站所要用到的图标合并在一张图上面，只要请求这张图就可以获取所有图标了。这种图称之为精灵图或者雪碧图。

下面是京东首页用到的一个精灵图：
在这里插入图片描述

字体优化

一般来说，当我们打开一个网页，基本上很快就看见来相关文字的显示。是的，如果是用的系统默认支持的字体就会很快，如果说项目需要用到其他字体或者一些自定义字体，那么这个字体未下载完成时：浏览器就会自动隐藏或者降级处理，导致字体闪烁（就是烁的一下，文字但时间内经历了两种字体显示，要么但时间内不显示文字）。

这个时候你需要使用font-display属性来控制一下了,这里推荐去这个地址看一下。

6.前端资源优化