web网站前端性能优化（三）

使用响应式图片

如果你关心你的网站的表现，响应图像很重要。图片通常是网站有效负载中最大的一部分。尽管互联网连接速度在不断提高，但许多设备都配备了高分辨率显示器。为了使图像在这些设备上最佳地显示，需要更高分辨率的图像。但是，因为您仍然需要支持屏幕分辨率较差的设备，所以您仍然需要较低分辨率的图像，并且必须注意将图像传递到各种设备的方式。
当您考虑图像传输时，其目的不仅是为了提供最好的视觉体验，而且还要提供适合设备功能的图像。知道如何正确地使用图片，可以确保性能较差的设备不会承受超出其需求的负担，同时确保性能最好的设备能够获得最好的体验。保持这种平衡可以兼顾性能和视觉体验。

了解图片类型

网上使用的图片类型可以分为两类：位图和SVG

位图

web上使用的最常见的图像类型是位图。典型的例子是JPEG、PNG和GIF图像。它们由在二维网格上排列的像素组成。位图根据压缩方式又可以分类为无损和有损两种类型。

有损图片

有损图像使用压缩算法从未压缩的图像源中丢弃数据。这种图像类型背后的想法是，为了换取较小的文件大小，某种程度的质量损失是可以接受的。
jpeg图片就属于有损压缩图片的一种，这种格式的一个缺点是可以重复压缩，即将对已压缩文件进行编辑后再进行压缩造成的质量丢失。如果这些文件类型没有从未压缩的源(如PSD文件)中保存，那么它们也容易受到重复压缩的影响。重复压缩发生时，已压缩的文件重新压缩，导致进一步的视觉退化。JPEG算法以1到100的范围表示，其中1是最低的，100是最高的。

无损的图片

这种图像类型使用不丢弃原始图像源数据的压缩算法，代表类型是PNG。与有损图像格式不同，当图像质量很重要时，无损格式是完美的。这使得无损格式成为图标等对质量要求较高图片的最佳候选格式。无损图像类型通常分为两类：

• 8位(256色)图像
  256色图像指一张图中最多包含256种颜色，代表格式为GIF和8位PNG格式，只支持256色和1位透明度。尽管它们的颜色数量有限，但对于不需要太多颜色或复杂透明度的图标和像素艺术图像来说，它们是很好的选择。8位PNG格式往往比GIF图像更有效。然而，与gif不同的是，png不支持动画。
• 全彩图像
  唯一支持超过256色的格式是全彩PNG格式和无损版本的WebP格式。两者都支持完全的alpha透明度和高达1670万种颜色。全彩PNG格式比WebP享有更广泛的支持。这些图像类型非常适合图标和照片，但它们的无损特性意味着，除非必须支持透明度，否则照片内容通常最好保留为JPEG格式。

优化图片

使用imagemin优化位图图像

npm install imagemin

const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');
 
(async () => {
    const files = await imagemin(['images/*.{jpg,png}'], {
        destination: 'build/images',
        plugins: [
            imageminJpegtran(),
            imageminPngquant({
                quality: [0.6, 0.8]
            })
        ]
    });
 
    console.log(files);
    //=> [{data: <Buffer 89 50 4e …>, destinationPath: 'build/images/foo.jpg'}, …]
})();

通过上面的代码可以对png和jpg图片进行压缩优化，且基本不影响图片清晰度。

js优化
异步加载js文件，要使用异步只需要在加上async属性即可。

<script src="js/jquery.min.js" async></script>
<script src="js/behaviors.js" async></script>

看起来很简单，但是存在一个问题，那就是如果js文件直接存在依赖关系，那么异步加载就无法保证依赖的顺序。，解决方法可以使用AMD模块标准。
AMD代表异步模块定义。该规范将脚本定义为模块，并提供了一种机制，根据脚本之间的依赖关系异步加载脚本。
这里推荐使用RequireJS，RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

<script src="js/requirejs.min.js" data-main="js/behaviors" async></script>

require.config({
    paths:{
        "jquery":'../lib/jquery.min'
    }
});
require(['jquery'],function($){
    ... 
    //通过此方式引入jquery才能使用$，接下来正常写jquery代码就好
})

后端压缩

后端服务器可以使用浏览器支持的压缩格式对数据进行压缩，一般为gzip格式。
压缩等级
并不是压缩等级越大就越好，压缩等级越大，更加消耗cpu的性能，且并不会线性的减少传输时间，如何确定压缩等级可以根据实际试验来确定最佳的压缩等级。
选择对的文件类型
选择正确的文件类型进行压缩，才能达到压缩效果，只需要遵循两条：

1. 总是压缩文本文件类型的文件
2. 避免对图片进行压缩（除了svg图片，因为他是xml文件）和字体文件进行压缩

如果遇到不确定是否可压缩的文件类型，请进行一些基本测试。如果你得到的收益很少或没有，可以肯定的是压缩这种类型的文件不太可能为你的网站的访问者提高性能。

如果CDN失败怎么办

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    function fallback(obj,src) {
        console.log(obj)
        if (typeof obj==="undefined"){
            var script=document.createElement('script');
            script.src=src;
            document.body.appendChild(script);
        }
    }

    fallback(window.jQuery, '/js/jquery.min.js');
</script>