html5优化指南

上面添加了很多link标签 rel的值是dns-prefetch 这个能够提前解析要用到DNS
此外还有preconnect ,preload,prefetch,preconnect 这样的一切一切都是为了提高页面加载速度

网络带宽

我们网络的带宽的能承受的信息不是无限的，带宽是一定的，加载的资源越少，加载速度越快，网络延迟降低。

压缩资源体积

在网络传输上，对图片，js ,css等资源信息进行GZIP，这个能够减少传输体积，浏览器接受之后再进行解压。

图片适配

我们现在面临的设配有PC端，Ipad端，手机等其他显示设备，每台设备PPI并不一样，如果简单粗暴的在各种设配上使用同样的高分辨率的图，那对于分辨率低的设备来说，高分辨率图是一种浪费，我们希望针对不同分辨率的设备加载不同分辨率的图片
对于<img>标签，我们可以使用srcset 和sizes属性来适配不同设备

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

针对相同尺寸，不同分辨率，可以这样设置

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" 
     alt="Elva dressed as a fairy">

这样能够节省带宽。不同浏览器支持的情况如下

此外我还可以使用<picture>标签

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

那对于相同尺寸，不同分辨率的设备 显示不同分辨率的的背景图片，该怎么操作呢？我们可以使用image-set样式属性，但是目前的支持度不够

div {
    background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}

目前的支持度如下图,chrome浏览器 还需要添加-webkit-前缀

图片类型

我们的web服务充斥着大量的图片资源，我们现在主要用到的图片类型主要是png,gif,jpeg每种图片都有自己的优势，如jpeg格式的图片，可以设置0-10等级，等级越低，图片体积约少，图片质量越低，我们可以根据需求选择不同质量的图片，此外我们能不能寻找更优的压缩算法，能够在相同字节的体积上，显示的图片质量更好，Google是无孔不入，提出了webp格式的图片，比jpegg更优的压缩算法，这样我们也能够节省带宽。但是并不是所有浏览器都支持该格式的图片

自定义字体

有时我们需要实现特殊的显示，如特殊的文字，特殊的logo,在以前我们是用图片去显示，但是我们可以自定义字体，用在我们网站上。利用@font-face 来加载我们需要的字体库，有时候比图片显示相同效果，更加节省带宽。
为了提高页面加载速度，我们想尽各种办法，从协议层去考虑，从网络带宽上去考虑，尽量去优化各个节点，优化的脚步永不停止，那么除了以上的优化手段，还有其他手段吗

加载目前需要的资源

现在我们很多web app 都是单页应用，在3年前，大部分是一次加载所有脚本和css，现在有了webpack等构建工具, 我们可以实现懒加载可以针对路由加载不同的组件，随着dynamic import()支持的浏览器越来越多，我们可以更加精细化加载不同的js脚本，节省带宽。dymaic import支持度如下