# 前端优化
# 请求数据
当浏览器请求一个URL的时候，大概有以下几个过程
- 阻挡
- 域名解析
- 建立连接
- 发送请求
- 等待响应
- 接收数据
# 阻挡
阻挡：不同的浏览器对单个域名的最大并发连接数有一定的限制，HTTP/1.0和HTTP/1.1也不相同。比如HTTP/1.1协议下，IE6的并发连接数限制是2个；而在HTTP/1.0下，IE6的并发连接数可以达到4个。在其它浏览器也有类似的限制，一般是4~8个。这个时候，如果浏览器同时对某一域名发起多个请求，超过了限制就会出现等待，也就是阻挡。
使用多个域名或者使用HTTP2
# 域名解析
- DNS Prefetch
DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。针对DNS解析耗时问题，一些浏览器通过DNS Prefetch 来提高访问的流畅性。 DNS Prefetch 是一种DNS 预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。
- HTTP DNS
使用HTTP DNS，你获取数据的时候，可以不通过域名，直接通过IP访问接口。
# 发送请求
- cookie隔离 静态资源和主站的域名要用不同的域名，例如主站域名是www.xxx.com，那么我们静态资源为了不携带cookie可以使用www.xxxcdn.cn的域名。
# 接收数据
- gzip压缩 为了减小包传输大小，我们通常将大于10KB的传输包做压缩
gzip on; #开启gzip压缩功能
gzip_min_length 10k; #设置允许压缩的页面最小字节数; 这里表示如果文件小于10KB，就不用压缩，因为没有意义，本来就很小.
gzip_buffers 4 16k; #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_http_version 1.1; #压缩版本
gzip_comp_level 2; #设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6
gzip types text/css text/xml application/javascript; #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip vary on; #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- CDN Cache 我们可以将许多静态资源存放到CDN，做CDN Cache，设置一些缓存时间，这样可以直接从CDN服务下载资源，不用回源到服务器 CDN类似缓存代码原理
location ~* ^.+\.(css|js|ico|gif|jpg|jpeg|png)$ {
# 源服务器
proxy_pass http://localhost:8888;
# 指定上面设置的缓存区域
proxy_cache imgcache;
# 缓存过期管理
proxy_cache_valid 200 302 1d;
proxy_cache_valid 404 10m;
proxy_cache_valid any 1h;
proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 304 Cache 通常对于静态资源，即较少经常更新的资源，如图片，css 或 js 等进行缓存，从而在每次刷新浏览器的时候，不用重新请求，而是从缓存里面读取，这样就可以减轻服务器的压力。
server {
location ~* \.(html)$ {
access_log off;
add_header Cache-Control max-age=no-cache;
}
location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
# 同上，通配所有以.css/.js/...结尾的请求
access_log off;
add_header Cache-Control max-age=360000;
if (-f $request_filename) {
expires 7d;
break;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16