前端性能优化成神之路-HTTP压缩开启gzip

什么是HTTP压缩

HTTP压缩是指: Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络传输的数据量,提高了用户显示网页的速度。当然,同时会增加一点点服务器的开销。 本文从HTTP协议的角度,来理解HTTP压缩这个概念。

HTTP内容编码和HTTP压缩的区别

HTTP压缩,在HTTP协议中,其实是内容编码的一种。

在http协议中,可以对内容(也就是body部分)进行编码, 可以采用gzip这样的编码。 从而达到压缩的目的。 也可以使用其他的编码把内容搅乱或加密,以此来防止未授权的第三方看到文档的内容。所以我们说HTTP压缩,其实就是HTTP内容编码的一种。 所以大家不要把HTTP压缩和HTTP内容编码两个概念混淆了。

HTTP压缩的过程

浏览器发送Http request 给Web服务器,  request 中有Accept-Encoding: gzip, deflate。 (告诉服务器, 浏览器支持gzip压缩)

Web服务器接到request后, 生成原始的Response, 其中有原始的Content-Type和Content-Length。

Web服务器通过Gzip,来对Response进行编码, 编码后header中有Content-Type和Content-Length(压缩后的大小), 并且增加了Content-Encoding:gzip.  然后把Response发送给浏览器。

浏览器接到Response后,根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后, 然后显示出网页。

实例:博客园就使用了gzip压缩

内容编码类型

HTTP定义了一些标准的内容编码类型,并允许用扩展的形式添加更多的编码。

Content-Encoding header 就用这些标准化的代号来说明编码时使用的算法

Content-Encoding值

  gzip  表明实体采用GNU zip编码

  compress 表明实体采用Unix的文件压缩程序

  deflate  表明实体是用zlib的格式压缩的

  identity  表明没有对实体进行编码。当没有Content-Encoding header时, 就默认为这种情况

  gzip, compress, 以及deflate编码都是无损压缩算法,用于减少传输报文的大小,不会导致信息损失。 其中gzip通常效率最高, 使用最为广泛。

压缩的好处

http压缩对纯文本可以压缩至原内容的40%, 从而节省了60%的数据传输。

Gzip的缺点

JPEG这类文件用gzip压缩的不够好。

对HTTP传输内容进行压缩是改良前端响应性能的可用方法之一,大型网站都在用。但是也有缺点,就是压缩过程占用cpu的资源,客户端浏览器解析也占据了一部分时间。但是随着硬件性能不断的提高,这些问题正在不断的弱化。

Gzip是如何压缩的

简单来说, Gzip压缩是在一个文本文件中找出类似的字符串, 并临时替换他们,使整个文件变小。这种形式的压缩对Web来说非常适合, 因为HTML和CSS文件通常包含大量的重复的字符串,例如空格,标签。

如何使用gzip进行压缩

怎么样才能使用HTTP的这个属性来压缩呢?这才是本文的重点。其实很简单,客户端不用任何配置,在服务端配置即可,服务器不同,配置方法也不尽相同。本文以tomcat为例

tomcat的配置

以我电脑tomcat安装目录为例,找到F:\software\apache-tomcat-7.0.54\conf文件夹下的server.xml

compress="on" 表示开启压缩。

compressionMinSize="2048"表示会对大于2KB的文件进行压缩。一般按照如此配置,可根据自己需求而定。

compressableMimeType是指将进行压缩的文件类型,对js,css,图片的压缩可以大大提升压缩效果。

tomcat的server.xml的配置按照上述进行配置,重启tomcat服务器。

原文地址:https://www.cnblogs.com/LO-ME/p/7377082.html

时间: 2024-10-08 10:26:15

前端性能优化成神之路-HTTP压缩开启gzip的相关文章

前端性能优化成神之路-总结

首先来看一下前端性能优化所涉及的层面有如下四个:网络层面,构建层面,浏览器渲染层面,服务端层面 具体的优化点有:资源合并与压缩,图片编码原理和类型的选择,浏览器的渲染机制,懒加载与预加载,浏览器存储,缓存机制,PWA,Vue-SSR等等 首先来了解一下web前端的本质 web前端的本质是一种GUI软件,是可以直接借鉴其他GUI系统架构设计的方法,但是web前端有点特别 下面是CS架构的GUI软件的开发和部署过程,CS架构的GUI软件在用户从商店下载下来后,是一个APK包,通过解压安装到手机的操作

前端性能优化成神之路-浏览器缓存机制详解

对一个网站而言,CSS.javascript.logo.图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能. 通过设置http头中的cache-control和expires的属性和HTML Meta标签,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月. 浏览器缓存控制机制有两种:HTML Meta标签 vs. HTTP头信息(主要) HTML Meta 标签定义的缓存机制 可以在HTML页面的<head>节

阿里巴巴 web前端性能优化进阶路

Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及大名鼎鼎的优化大师Steve Souders.本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结.希望对正在从事这个领域研究的前端同学能有所帮助. 简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段

033.[转] Java 工程师成神之路 | 2019正式版

Java 工程师成神之路 | 2019正式版 原创: Hollis Hollis 2月18日 https://mp.weixin.qq.com/s/hlAn6NPR1w-MAwqghX1FPg http://www.hollischuang.com/ 主要版本 更新时间 备注 v1.0 2015-08-01 首次发布 v1.1 2018-03-12 增加新技术知识.完善知识体系 v2.0 2019-02-19 结构调整,更适合从入门到精通:进一步完善知识体系: 新技术补充: 1 基础篇 01 面

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

转:Java工程师成神之路~(2018修订版)

转: http://www.hollischuang.com/archives/489 阿里大牛珍藏架构资料,点击链接免费获取 针对本文,博主最近在写<成神之路系列文章> ,分章分节介绍所有知识点.欢迎关注. 主要版本 更新时间 备注 v1.0 2015-08-01 首次发布 v1.1 2018-03-12 增加新技术知识.完善知识体系 一.基础篇 JVM JVM内存结构 堆.栈.方法区.直接内存.堆和栈区别 Java内存模型 内存可见性.重排序.顺序一致性.volatile.锁.final