https 请求白屏_记一次HTTPS性能优化

为了解决部分 ios 打开 h5 网页很慢的情况（参考地址：https://developers.weixin.qq.com/community/develop/doc/000a6671efc968a3ce2acb27d59400）

场景描述

微信版本 7.0.15，IOS 版本 13.5.1，网站 ssl 证书颁发者 Let's Encrypt 免费证书

症状：微信扫码或直接打开请求地址后，页面白屏顶部进度条加载非常慢，大概要4-5秒

同事的某些手机（Phone6s 和 iPhone11）用户前几次打开页面请求接口的时候会出现，之后再打开会快一些。同样网络环境下，安卓手机打开很快，iPhone6SPlus 的打开也很快

前提，已经开启HTTPS服务，比如有下列配置，有 crt, key 格式的证书文件

    listen                     80;listen                     443 ssl http2;server_name                xxx.xxx.com;# 域名ssl_certificate            /data/proxy/sites/webset/ssl/site.crt;ssl_certificate_key        /data/proxy/sites/webset/ssl/site.key;ssl_prefer_server_ciphers  on;ssl_ciphers                ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;ssl_protocols              TLSv1 TLSv1.1 TLSv1.2;ssl_session_cache          shared:SSL:5m;ssl_session_timeout        5m;keepalive_timeout          75s;keepalive_requests         100;access_log                 /data/proxy/sites/webset/log/nginx/access.log;error_log                  /data/proxy/sites/webset/log/nginx/error.log;set_real_ip_from           127.0.0.1;real_ip_header             X-Forwarded-For;real_ip_recursive          on;gzip                       on;gzip_comp_level            6;gzip_min_length            1k;gzip_types                 text/plain text/css text/xml text/javascript text/x-component application/json application/javascript application/x-javascript application/xml application/xhtml+xml application/rss+xml application/atom+xml application/x-font-ttf application/vnd.ms-fontobject image/svg+xml image/x-icon font/opentype;

将 .crt 的 ssl 证书文件转换成 .pem 格式

参考：证书之间的转换（crt pem key）

使用下面的 openssl 命令：

openssl x509 -in www.x.com.crt -out www.x.com.pem

优化方案

开启 OCSP Stapling

参考地址：Nginx之OCSP stapling配置

参考地址：Nginx 启用 OCSP Stapling的配置

参考地址：从无法开启 OCSP Stapling 说起，OCSP是什么

在上面的 nginx 配置中增加如下内容

    ssl_stapling               on;ssl_stapling_verify        on; # 启用OCSP响应验证，OCSP信息响应适用的证书ssl_trusted_certificate    /data/proxy/sites/xxx.xxx.com/ssl/site.pem; #若 ssl_certificate 指令指定了完整的证书链，则 ssl_trusted_certificate 可省略。resolver                   8.8.8.8 8.8.4.4 114.114.114.114 216.146.35.35 216.146.36.36 208.67.220.220 208.67.220.220 valid=300s; #添加resolver解析OSCP响应服务器的主机名，valid表示缓存。resolver_timeout           5s; #resolver_timeout表示网络超时时间

修改后的配置为：

 listen                     80;listen                     443 ssl http2;server_name                xxx.xxx.com;# 域名ssl_certificate            /data/proxy/sites/xxx.xxx.com/ssl/site.crt;ssl_certificate_key        /data/proxy/sites/xxx.xxx.com/ssl/site.key;ssl_prefer_server_ciphers  on;ssl_ciphers                ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;ssl_protocols              TLSv1 TLSv1.1 TLSv1.2;ssl_session_cache          shared:SSL:5m;ssl_session_timeout        5m;ssl_stapling               on;ssl_stapling_verify        on; # 启用OCSP响应验证，OCSP信息响应适用的证书ssl_trusted_certificate    /data/proxy/sites/xxx.xxx.com/ssl/site.pem; #若 ssl_certificate 指令指定了完整的证书链，则 ssl_trusted_certificate 可省略。resolver                  8.8.8.8 8.8.4.4 114.114.114.114 216.146.35.35 216.146.36.36 208.67.220.220 208.67.220.220 valid=300s; #添加resolver解析OSCP响应服务器的主机名，valid表示缓存。resolver_timeout           5s; #resolver_timeout表示网络超时时间keepalive_timeout          75s;keepalive_requests         100;access_log                 /data/proxy/sites/xxx.xxx.com/log/nginx/access.log;error_log                  /data/proxy/sites/xxx.xxx.com/log/nginx/error.log;set_real_ip_from           127.0.0.1;real_ip_header             X-Forwarded-For;real_ip_recursive          on;gzip                       on;gzip_comp_level            6;gzip_min_length            1k;gzip_types                 text/plain text/css text/xml text/javascript text/x-component application/json application/javascript application/x-javascript application/xml application/xhtml+xml application/rss+xml application/atom+xml application/x-font-ttf application/vnd.ms-fontobject image/svg+xml image/x-icon font/opentype;

检测命令（设置完成后，重启 nginx，然后可能需要稍等几分钟检测才会是开启成功）

openssl s_client -connect 域名:443 -status -tlsextdebug < /dev/null 2>&1 | grep -i "OCSP response"

如果你的服务器上部署了多个 HTTPS 站点，可能还需要加上 -servername 参数启用 SNI：

openssl s_client -connect 域名:443 -servername 域名或服务名  -status -tlsextdebug < /dev/null 2>&1 | grep -i "OCSP response"

如果结果是下面这样，说明 OCSP Stapling 已开启：

OCSP response:
OCSP Response Data:OCSP Response Status: successful (0x0)Response Type: Basic OCSP Response

而这样显然是未开启：

OCSP response: no response sent

开启 OCSP Stapling 后，同事的设备首次打开网站或请求接口速度从 4000ms 提升到了 500ms，速度提升了 8 倍。