# 前端优化

# 请求数据

当浏览器请求一个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
  • 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
  • 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
上次更新: 5/20/2021, 11:12:30 PM