如何提高网页的加载速度 ——减少网页渲染阻塞

页面打开的快慢，可以用两个指标描述：
一个是ready时间，一个是load时间
优化策略：
一、减少渲染阻塞：
1、避免head标签JS阻塞
所有放在head标签里面的CSS和JS都会阻塞渲染，如果这些CSS和JS需要加载很久，页面就会空白，两种解决方法：第一种是把script放到body里面，第二种是给script加defer属性（defer属性是HTML5新增的属性，一旦script是defer延迟的，那么script将会异步加载，但是不会马上执行，会在所有元素解析完之后执行）正常script执行——>内联script 执行。并行加载，串行执行

defer和async的区别

在页面中，要么在页面中间的script要么使用原生的API，要么把用的一些函数写成head标签里面内联的script。
浏览器同时加载资源数是有限的，chrome对同一个域名的资源，每次同时只能建立6个TCP连接。
如果页面的交互比图片的展示更重要，把script写在head标签加上defer是可取的，如果页面的展示更重要那么放在body后面。

2、减少head标签里的css资源
在head里面阻塞页面渲染，在body里面加载好会重排，layout好dom会重排。
3、不要放太多的base64放在css里面
放太多的base64放在css里面，会导致css膨胀，解决方案，图标文字，将svg转化为icon，方便也颜色控制。

@media(min-width: 501px){
    .img{
        background-picture: url(large.png);
    }
}

@media(max-width: 500px){
    .img{
        background-picture: url(small.png);
    }
}

大屏加载large图，小屏加载small图

4、把css写成内联的
如果css只有10K和20K，把它写成内联的（写成style标签里面的）
因为把css放在CDN上，为了得到这个css。首先进行域名解析，然后建立http/https连接，其次才是下载，为了加载这个资源，CDN查找，建立tcp，建立http，从请求到接收数据，开销很大，不如把CSS嵌入到HTML里面如果css体积没达到3位数，加上gzip压缩，放到HTML里面是可取的。