前端性能优化-服务端与网络优化

本文地址： https://www.cnblogs.com/veinyin/p/14381715.html

1 CDN 的 缓存和优化

CDN（Content Delivery Network 内容分发网络），利用最靠近每一位用户的服务器，更快、更可靠地将文件发送给用户分发网络

优点：

• 提速：会给用户指派较近、较顺畅的服务器节点，将数据传输给用户

• 低成本：服务器被放到不同地点 ，减少了互连的流量，也降低了带宽成本

• 高可用度：当某个服务器故障时，自动调用临近地区的服务器

CDN 回源：浏览器访问 CDN 集群上静态文件时，文件缓存过期，直接穿透 CDN 集群而访问源站机器的行为

CDN 缓存

• 三级缓存：浏览器本地缓存、CDN 边缘节点缓存、CDN 源站缓存

• 缓存设置：缓存时间设置的过短，CDN 边缘节点缓存经常失效，导致频繁回源，增大了源站负担，访问也慢；缓存时间设置的过长，文件更新慢，用户本地缓存不能及时更新；要结合业务情况而定

• 不同静态资源类型缓存时间：HTML - 3分钟，JS/CSS - 10分钟、1天、30天（如果使用 hash 命名，可以设置久一点，能及时更新）

CDN 灰度发布

原理：在部分地区、部分地区的部分运营商优先发布静态资源，验证通过后，再进行全量发布

实施：域名方面，设置特殊 VIP 解析至要灰度发布的城市、运营商；源站机器方面，给灰度的城市、运营商配置单独源站机器；灰度发布的城市、运营商解析至这些特有机器上

CDN 大促备战

• 增加机房带宽

• 增加运营商流量

• 灾备：CDN 应用缓存从 10 分钟设置成 1 个 小时，大促后恢复

2 DNS 优化

DNS（Domain Name System 域名系统），是将网站域名和 IP 地址相互映射的一个分布式数据库，能够更方便地访问互联网

客户端处理：

1. Android DNS 模块（okhttp）

   • 支持 HTTP/2，HTTP/2 通过多路复用技术，在一个单独的 TCP 连接上支持并发，通过在一个连接上，一次性发送多个请求来发送或接收数据

   • 如果 HTTP/2 不可用，连接池复用技术也可以极大减少延时

   • 支持 GZIP，可以压缩下载体积

   • 响应缓存完全可以避免网络重复请求

   • 如果服务器设置了多个 IP 地址，当第一个 IP 地址失效的时候，OKHttp 会自动尝试下一个 IP

2. IOS 自研模块

   • APP 启动时，缓存所有可能要用到的域名 IP，同时异步处理，客户端无需得到缓存结果

   • 如果 cache 中有此域名的缓存结果，直接返回缓存的 IP

   • 如果缓存中没有此域名，则重新向 HTTP DNS SERVER 进行申请，结果会在此回调中返回

前端处理：

1. 浏览器并发数限制，分布设置成多个域名

   • 用户访问：JAVA、PHP 等 API 接口 设为一个域名

   • 页面和样式：JS/CSS/HTML 设为一个域名

   • 图片：JPG、PNG、GIF 等 设为一个域名

3 HTTP 优化

减少 HTTP 请求数

1. CSS sprites

2. 图片使用 Data URL，Web Font

3. JS/CSS 文件合并

4. JS/CSS 请求 Combo（xxx/xxx?a.js,b.js）

5. 接口合并

6. 接口存储 Local Storage

7. 静态资源存储 Local Storage

4 cookie 优化

减少 Cookie，可以采用主站首页设置白名单、定期删除非白名单 Cookie 的方式

好处：减少页面间传输大小，能够对 cookie 有效管理

5 服务器缓存配置与优化方案

Expires 和 Cache-Control 控制的是浏览器缓存 - from cache

ETag 和 Last-Modified 是协商缓存 - 304

5.1 Expires

已经废弃不用了

定义：

• 响应头包含日期/时间，在此时刻之后，响应过期

• 无效的日期，比如0，代表过去的日期，该资源已过期

• 如果在 Cache-Control 里设置了 max-age 或 s-max-age 指令，那么 Expires 会被忽略

5.2 Cache-Control

定义：通用消息头字段，通过指定指令实现缓存机制。缓存指令是单向的，在请求中设置的指令，不一定被包含在响应里

语法：Cache-Control: max-age=seconds。设置缓存存储的最大周期，超过这个时间缓存被认为过期，相对于请求的时间

5.3 ETag

定义：

• 资源的特定版本的标识符。可以让缓存更高效，并节省带宽，如果内容没有改变，Web 服务器不需要发送完整的响应。如果内容发生了变化，使用 ETag 有助于防止资源同时更新相互覆盖

• 如果给定 URL 中的资源更改，一定要生成新的 ETag 值，类似于指纹，可能被某些服务器用于跟踪。比较 ETag 能快速确定此资源是否改变，但也可能被跟踪服务器永久存留

5.4 Last-Modified

定义：响应头，包含源头服务器认定的资源作出修改的日期和时间。通常被用做一个验证器，来判断接收到的或者存储的资源是否彼此一致。精度比 ETag 低，是一个备用机制。包含 If-Modified-Since 或 If-Unmodified-Since 的条件请求会使用这个字段

Last-Modified: Thu, 28 Jan 2021 07:46:52 GMT

5.5 Date

定义：通用首部，包含了报文创建的日期和时间

Date: Thu, 28 Jan 2021 10:58:58 GMT

5.6 Status

HTTP 响应状态代码，1. 信息响应（1xx），2. 成功响应（2xx），3. 重定向（3xx），4. 客户端错误（4xx），5. 服务端错误（5xx）

6 GZIP 压缩

对文本 ( HTML/JS/CSS ) 压缩，对非文本 ( jpg/png/gif )不压缩

开启 Gzip 压缩后，压缩比约 50% -70%

配置方法：

nginx： nginx.conf 文件增加 gzip on

Apache：AddOutputFilterByType 和 AddOutputFilter

开启后，响应头 Content-Encoding: gzip

7 开启全站 HTTPS

HTTPS：超本文传输安全协议，通过计算机网络进行安全通信的传输协议

经过 HTTP 进行通信，但利用 SSL/TLS 进行数据加密

主要目的是提供对服务器身份认证，保护数据隐私和完整性

利于 SEO，也很安全

工作原理：

1. 浏览器发起 HTTPS 请求

2. 传输证书

3. 浏览器解析证书

4. 传送加密信息

5. 服务器解密信息

6. 传输加密后的信息

7. 浏览器解密信息

实施：

1. 经销商购买证书（GoGetSSL、SSLs.com、SSLMate.com）

2. 本地安装测试证书

1. brew install mkcert

2. mkcert -install

3. mkcert yyh.world // 生成 yyh.world 的证书

4. 本地 nginx 配置

server{  
    listen                443 ssl  server_name           
    yyh.world    这是要新增的配置  
    ssl_certificate       xxx.pem  
    ssl_certificate_key   xxx-key.pem
}

　　3.  抓取和配置，对每个业务整改升级

8 升级 HTTP/2

HTTP2（超文本传输协议第2版），简称 h2（加密连接）或 h2c（非加密连接），是 HTTP 的第二个主要版本

HTTP/2 优点：

1. 采用二进制格式传输数据

2. 多路复用，允许通过一个 HTTP/2 连接发起多个请求

3. 对 Header 头压缩，传输体积小

4. 服务端推送（Server Push），服务端能更快地把资源推送给客户端

HTTP/2 站点的优势

1. 可以降低服务器压力（对header头压缩、二进制传输、多路复用）

2. 提升网站访问速度（头部压缩、传输方式）

3. 保护网站安全（使用 HTTP/2，需要启用 HTTPS）

启动 HTTP/2

nginx:

listen 443 ssl http2

1. 升级 OpenSSL

2. 重新编译

cd nginx-xxx
./configure --with-http_ssl_module --with-http_v2_module
make && make install

3. 验证：地址栏有小锁、请求 protocol 是 h2