前端性能优化-服务端与网络优化
本文地址: https://www.cnblogs.com/veinyin/p/14381715.html
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 地址相互映射的一个分布式数据库,能够更方便地访问互联网
客户端处理:
-
Android DNS 模块(okhttp)
-
支持 HTTP/2,HTTP/2 通过多路复用技术,在一个单独的 TCP 连接上支持并发,通过在一个连接上,一次性发送多个请求来发送或接收数据
-
如果 HTTP/2 不可用,连接池复用技术也可以极大减少延时
-
支持 GZIP,可以压缩下载体积
-
响应缓存完全可以避免网络重复请求
-
如果服务器设置了多个 IP 地址,当第一个 IP 地址失效的时候,OKHttp 会自动尝试下一个 IP
-
-
IOS 自研模块
-
APP 启动时,缓存所有可能要用到的域名 IP,同时异步处理,客户端无需得到缓存结果
-
如果 cache 中有此域名的缓存结果,直接返回缓存的 IP
-
如果缓存中没有此域名,则重新向 HTTP DNS SERVER 进行申请,结果会在此回调中返回
-
前端处理:
-
浏览器并发数限制,分布设置成多个域名
-
用户访问:JAVA、PHP 等 API 接口 设为一个域名
-
页面和样式:JS/CSS/HTML 设为一个域名
-
图片:JPG、PNG、GIF 等 设为一个域名
-
3 HTTP 优化
减少 HTTP 请求数
-
CSS sprites
-
图片使用 Data URL,Web Font
-
JS/CSS 文件合并
-
JS/CSS 请求 Combo(xxx/xxx?a.js,b.js)
-
接口合并
-
接口存储 Local Storage
-
静态资源存储 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,也很安全
工作原理:
-
浏览器发起 HTTPS 请求
-
传输证书
-
浏览器解析证书
-
传送加密信息
-
服务器解密信息
-
传输加密后的信息
-
浏览器解密信息
实施:
-
经销商购买证书(GoGetSSL、SSLs.com、SSLMate.com)
-
本地安装测试证书
-
brew install mkcert
-
mkcert -install
-
mkcert yyh.world // 生成 yyh.world 的证书
-
本地 nginx 配置
server{ listen 443 ssl server_name yyh.world 这是要新增的配置 ssl_certificate xxx.pem ssl_certificate_key xxx-key.pem }
3.
HTTP2(超文本传输协议第2版),简称 h2(加密连接)或 h2c(非加密连接),是 HTTP 的第二个主要版本
HTTP/2 优点:
-
采用二进制格式传输数据
-
多路复用,允许通过一个 HTTP/2 连接发起多个请求
-
对 Header 头压缩,传输体积小
-
服务端推送(Server Push),服务端能更快地把资源推送给客户端
HTTP/2 站点的优势
-
可以降低服务器压力(对header头压缩、二进制传输、多路复用)
-
提升网站访问速度(头部压缩、传输方式)
-
保护网站安全(使用 HTTP/2,需要启用 HTTPS)
启动 HTTP/2
nginx:
listen 443 ssl http2
-
升级 OpenSSL
-
重新编译
cd nginx-xxx ./configure --with-http_ssl_module --with-http_v2_module make && make install
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。