## HTTP系列之Accept-Encoding和Content-Encoding[通俗易懂]

## HTTP系列之Accept-Encoding和Content-Encoding[通俗易懂]前端的性能优化是一个永不停歇的路程,优化的方式也不一而足,今天重点不在于介绍性能优化,而是介绍性能优化的其中一种方式,通过压缩来节省http请求的流量,实现过程中依赖http中header部分的两个字段,Accept-Encoding和Content-EnCoding(分别来自request的header和response的header)。前两天排查一个问题是注意到项目里ssr时返回的页面竟然没…

大家好,又见面了,我是你们的朋友全栈君。

前端的性能优化是一个永不停歇的路程,优化的方式也不一而足,今天重点不在于介绍性能优化,而是介绍性能优化的其中一种方式,通过压缩来节省http请求的流量,实现过程中依赖http中header部分的两个字段,Accept-Encoding和Content-EnCoding(分别来自request的header和response的header)。

前两天排查一个问题是注意到项目里ssr时返回的页面竟然没有压缩,页面体积大小高达182k,于是着手优化这部分。首先我们先了解下Accept-Encoding和Content-Encoding的作用。

含义与作用

为什么首先要讲这两个字段的含义呢?因为当你打开一个页面时,请求到了服务端,如果请求上没有这种编码的标识的话,服务端是不知道该不该压缩?使用哪种方式压缩的?所以request请求header里的Accept-Encoding就是用来告诉服务端客户端是支持哪些编码方式的,一般的值有gzip/compress/deflate/br等,可以多个,中间用逗号隔开。如:

Accept-Encoding: gzip, deflate, br
复制代码

当服务端接收到请求,并且从header里拿到编码标识时,就可以选择其中一种方式来进行编码压缩,然后返给客户端,但是如果response的header里没有编码标识的话,客户端就不知道服务端是用的哪种方式压缩的,所以需要Content-Encoding来标识服务端压缩时所用的压缩方式。

综上,Accept-Encoding用来标识客户端能够理解的内容编码方式。 Content-Encoding用来标识主体进行了何种方式的内容编码转换。

node中的使用

项目中使用的node实现的ssr,因此重要讨论下在node中实现压缩来完成性能的优化。实现代码简化如下:

const http = require('http');
const zlib = require('zlib');

const server = http.createServer(function(req,res){
	//...其他逻辑
	const acceptEncoding = req.headers['accpent-encoding'];
	if(!!acceptEncoding.match(/\bgzip\b/)){
		zlib.gzip(body,function(err,data){
			if(err){
				//...错误处理逻辑
			}
			res.setHeader('content-encoding','gzip');
			res.setHeader('content-length',body.length);
			res.end(body);
		})
	}
	// ...非gzip处理
});
复制代码

node中压缩是通过zlib来实现的,首先判断accept-Encoding里是否有gzip,有的话通过zlib压缩,并在response的header中标识。很简单吧!

结语

之前看http总是感觉很枯燥,看不下去,但通过与项目中的实践相结合还是蛮有意思的,比如这次虽然是一个比较小的优化点,但是还是有点成就感的。

如果本文对你有些许帮助,就请你点个赞鼓励下!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159679.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 调用第三方接口大致流程

    调用第三方接口大致流程下面以风控为例,业务是调用第三方接口获取支付宝报告天机支付宝获取流程:1本质:中转站:前台把参数传给我,我接受参数后传给天机,天机在传给支付宝,最后获取数据,在这个过程中   我们和天机都充当的是中转站的角色。2流程:a前台传客户的基本信息参数    b后台接受参数,传给天机,天机返回淘宝的认证地址链接,后台把链接返回给前台;    c前台打开链接,进入认证页面,进行认…

  • redis安装菜鸟教程_redis集群客户端

    redis安装菜鸟教程_redis集群客户端随笔-848文章-0评论-80阅读-278万转载:windows下安装redis及其客户端-Oops!#-博客园windows下安装redis及其客户端首先下载redis安装包:https://github.com/MSOpenTech/redis/releases解压安装包到相应文件夹,任何盘符都行。文件介绍:redis-server.exe:服务端程序,提供redis服务redis-cli.exe:客户端程序,通过它连接redis服务并…

  • ps make transparent png picture[通俗易懂]

    ps make transparent png picture[通俗易懂]firstctrl+alt+shift+echooseallLayer

  • python3 gil锁_python同步锁

    python3 gil锁_python同步锁前言python的使用者都知道Cpython解释器有一个弊端,真正执行时同一时间只会有一个线程执行,这是由于设计者当初设计的一个缺陷,里面有个叫GIL锁的,但他到底是什么?我们只知道因为他导致pyt

  • 栈溢出

    栈溢出Author:Liedrahttps://www.cnblogs.com/LieDra/入门介绍学习自https://zhuanlan.zhihu.com/p/25816426对部分内容进行

  • softmax为什么使用指数函数?(最大熵模型的理解)

    softmax为什么使用指数函数?(最大熵模型的理解)

    2021年11月19日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号