1. 犀牛前端部落首页
  2. 前端面试题

前端面试题-传输优化

启用压缩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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4322.html

发表评论

登录后才能评论