前端面试题-传输优化

启用压缩Gzip

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 优化压缩过程
gzip_buffers 4 16k;
# 使用http版本
gzip_http_version 1.1;
# gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间。一般设置1和2
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

启用Keep Alive

# 关闭Keep Alive（默认开启）
# keepalive_timeout 0;
# 超时时间65s，关闭Keep Alive
keepalive_timeout 65;
# 100个请求后，关闭Keep Alive
keepalive_requests 100;

HTTP资源缓存

Cache-Control/Expires

Last-Modified + If-Modified-Since

Etag + If-None-Match

Service Workers

• 加速重复访问
• 离线支持

webpack插件

• WorkboxWebpackPlugin
• ManifestPlugin

注意

• 延长了首屏时间，但页面总加载时间减少
• 兼容性
• 只能在localhost或https下使用

HTTP/2的性能提升

• 二进制传输
• 请求响应多路复用
• Server push

服务端渲染SSR

• Next
• Nuxt