使用CDN
CDN全称是Content Delivery Network，就是把资源放在不同的地方，用户请求那个资源时，那么就把离用户最近的那个资源给用户。具体优化如下
- 请求速度加快，如果用户距离资源很远时，比如中国用户请求美国的网站，那么中国用户就会访问存放在中国的美国网站
- 使用多个CDN可以拓展同时请求文件数量。CSS和JS文件是可以同时下载的，Chrome支持同时下载8个，IE则支持4个。如果想IE支持8个文件同时下载，那么可以将资源放在不同CDN中，浏览器就会查2次DNS去同时下载8个文件
- 由于CDN中不会存储Cookie，所以消息体中的数据量会更少
Cache-Control
这个主要是服务器返回响应时添加的请求头字段，如果浏览器发现要请求的文件还是原来的那个文件，那么就不会发送HTTP请求，而是用本地已经下好的文件
// 10秒内会用本地文件
response.setHeader('Cache-Control', 'max-age=10')
Etag
每次服务器返回一个资源时，会用MD5生成一个ID，将这个ID作为Etag的值。如果再次请求返回后的文件，那么就会自动带上这个Etag的值，也就是原来文件的ID。服务器会判断和当前文件ID是否和上一次一样，如果一样则不会返回，否则返回文件资源
下面是请求过程的伪代码
// 浏览器发请求
request.send('a.txt')
// 第服务器
fileId = md5(getFile('a.txt'))
if (fileId ==? request.Etag) {
return null
}
else {
return getFile('a.txt')
}
Gzip
想象一下我们是怎么在QQ发文件夹给别人的。先将文件夹/文件用rar, zip7等工具压缩之后再发，别人接收到了再用相应的工具解压缩。这就是Gzip的原理
首先服务器将文件都用Gzip压缩
gzip a.txt
然后返回文件时带上响应头
request.setHeader('Content-Encoding', 'gzip')
浏览器收到文件后，会发现Content-Encoding的值是gzip就会用gzip去解压缩，这样就可以减少资源的大小
合并文件
如果多个CSS，JS资源文件，浏览器就会发送多次HTTP请求，我们可以将它们都放在一个文件里，就请求这一个文件，那么请求数就会大大下降。注意，这里有个trade off，因为文件是可以同时下载的，所以如果多文件最好是放在不同CDN上，而不是都写在一个文件中
图片的合并可以用雪碧图，将全部的图片都放在一张图上，通过调整这张图的坐标来显示对应的图片，但是这种图已经过时了，现在一般图标都会用<svg>来生成
调整CSS和JS的位置
CSS
CSS文件的特性是无论放在哪个位置都会阻塞页面的渲染，所以一般放在<head>里，因为这样可以先下载CSS文件，先让页面一开始就有了样式
JS
JS文件可以放在<body>的最后，因为没有JS用户还可以通过HTML和CSS来看页面的，不会影响页面的样式
就算放在前面，JS下载好了页面可能还没渲染出来，也用拿不了DOM元素
keep-alive
连接复用：在HTTP协议的请求头中加入keep-alive，服务器就会尽量复用这个TCP连接。使用HTTP2.0版本，会有多路复用，复用率更高
减少DNS查询
baidu.com/index.html
cdn/index.css
可以减少域名，将所有资源都放到一个地方就可以只查询一次DNS，从而减少开销
网友评论