首页 > 其他分享 >前端性能优化-gzip压缩

前端性能优化-gzip压缩

时间:2023-04-08 21:37:07浏览次数:30  
标签:xml 浏览器 text 前端 gzip 服务器 压缩

提纲:

  • GZIP是什么
  • 如何启用gzip
  • 什么时候应该启用gzip

image.png

1、gzip压缩是什么

gzip是一种文件压缩格式,它可以将文件压缩为较小的大小,以便更快地在网络上传输或存储在磁盘上。
gzip压缩算法适用于文本类型的数据,通常用于压缩Web服务器上的静态资源文件,例如HTML,CSS,JavaScript文件和其他文本文件。当客户端请求这些文件时,Web服务器会将它们压缩为gzip格式并将其发送到客户端,这可以显著提高网站的加载速度和性能。
gzip压缩是一种有损压缩,这意味着压缩后的文件可能会损失一些细节和精度,但通常不会对文件的实用性造成太大影响。

注:gzip压缩不适宜用于图片等资源,因为图片通常本身已经采用压缩算法了,采用gzip压缩可能反而会使得图片大小更大。

2、在项目中如何使用gzip压缩

2.1 浏览器

首先想要使用gzip,需要浏览器支持。目前大多数的浏览器都支持gzip,在浏览器向服务器请求资源时,在http请求头Accept-Encoding属性表示浏览器支持的格式,这样服务器在接收到请求后,就可以知道浏览器是否支持gzip压缩了。
image.png

2.2 服务器

常用的web服务器如nginx、linux等都支持gzip压缩。

tomcat

找到tomcat的server.xml文件,找到其中Connector节点然后进行配置修改,示例如下:

<Connectorport="80"
  protocol="HTTP/1.1" 
  connectionTimeout="20000" 
  redirectPort="8443" 
  URIEncoding="UTF-8"
  maxPostSize="0" 
  useBodyEncodingForURI="true"
  compression="on" 
  compressionMinSize="2048" 
  noCompressionUserAgents="gozilla, traviata" 
  compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

具体参数说明:

  • compression="on" 打开压缩功能
  • compressionMinSize="2048" 启用压缩的输出内容大小,当被压缩对象的大小>=该值时才会被压缩,这里面默认为2KB
  • noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器,不启用压缩
  • compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 压缩类型

nginx

Nginx 默认是不开启 gzip 的,开启gzip的示例如下:

http {
  # 开启 gzip 压缩
  gzip  on;

  # 使用 gzip 压缩的文件类型
  # 此外,text/html 是自带的,不用写上
  gzip_types text/plain text/css application/javascript application/json text/xml applica	tion/xml application/xml+rss;

  # 小于 256 字节的不压缩
  # 这是因为压缩是需要时间的,太小的话压缩收益不大
  gzip_min_length 256;

  # 开启静态压缩
  # 压缩的资源会被缓存下来,下次请求时就直接使用缓存
  gzip_static  on;
}

3、应该什么时候都使用gzip压缩吗?

虽然启用gzip压缩可以减少网络传输量,提高页面加载速度。但gzip压缩也会对服务器和客户端带来一些压力(服务器需要压缩,客户端需要解压)。
但对于以下情况,使用gzip压缩可能会导致一些性能问题

  • 客户端使用非常老旧或性能较差的计算机上
  • 对于大量非常小的文件使用gzip可能会给服务器带来一些压力

总的来说,在现代浏览器和计算机上,使用gzip压缩通常是一种非常有效的优化方式。

参考:

  • ChatGPT

标签:xml,浏览器,text,前端,gzip,服务器,压缩
From: https://www.cnblogs.com/Nicander/p/17299262.html

相关文章

  • 若依管理系统前端实践
    若依管理系统是一套基于若依框架开发的后台管理系统,它是一个前后端分离的项目,前端使用vue,Element,后端使用SpringBoot&Security。这篇随笔中将记录一下自己在使用过程中前端使用上的一些收获和问题。目录1.路由控制1.1简述1.2token的检验1.3获取角色权限1.4生......
  • 前端笔试遇到的两个编程题
    倒计时:在倒计时不超过一天的代码varhour=document.querySelector(".hour");  varminute=document.querySelector(".minute");  varsecond=document.querySelector(".second");//截止的时间  varinputTime=+newDate("2023-4-0820:0......
  • 使用 MQTT 实现前端消息传递
    MQTT是一种轻量级的消息传递协议,广泛应用于物联网和分布式系统中。在前端应用中使用MQTT可以实现实时消息传递和数据同步。本文将介绍如何使用MQTT在前端应用中实现消息传递。安装MQTT.js要使用MQTT,在前端应用中,需要安装MQTT.js。在终端中执行以下命令:npminstallmq......
  • 2023.04.07 - 前端常用解决跨域问题的方案
    JSONP:JSONP(JSONwithPadding)是一种前端跨域请求的方式,它利用了HTML中的<script>标签没有跨域限制的特点,通过动态创建<script>标签,构造一个特殊的URL,让服务端返回一段指定的JavaScript代码,然后在本地执行这段代码以达到跨域请求数据的目的。JSONP具有兼容性好、简单易......
  • k8s前端部署
    //前端项目打包构建;支持多环境pipeline{agentanyenvironment{//GIT路径GIT_PATH="threegene/dev/zproduct/server/demo.git"//项目名称,使用Job名称作为项目名称PROJECT_NAME="${JOB_NAME}"//自定义项目名称//PROJECT_NAME="threegene-livex-center-html"//......
  • 前端里那些你不知道的事儿之 【window.onload】
    作者:京东科技孙凯一、前言相信很多前端开发者在做项目时同时也都做过页面性能优化,这不单是前端的必备职业技能,也是考验一个前端基础是否扎实的考点,而性能指标也通常是每一个开发者的绩效之一。尤其马上接近年关,页面白屏时间是否过长、首屏加载速度是否达标、动画是否能流畅运行......
  • #yyds干货盘点 前端小知识点扫盲笔记记录5
    前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结事件委托<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/&g......
  • #yyds干货盘点 前端小知识点扫盲笔记记录3
    前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结localStorage和sessionStoragecookie本身用于浏览器和server通讯。被“借用”到本地存储来的。可用document.cookie='...'来修改。其缺点:存储大小......
  • #yyds干货盘点 前端小知识点扫盲笔记记录
    前言大家好我是歌谣微信公众号关注前端小歌谣带你进入前端巅峰人才交流群MVC和MVVM//在MVVM框架下视图和模型是不能直接通信的,只能通过ViewModel进行交互,它能够监听到数据的变化,//然后通知视图进行自动更新,而当用户操作视图时,VM也能监听到视图的变化,然后通知数据做相应改动,//......
  • element Compressor图片压缩且上传-
      上传了压缩后的照片 <template><div><!--<el-upload:class="uploadDisabled"ref="upload":action="action":headers="headers"list-type="picture-card":limit="1":file-......