Liferay 前端性能调优(3) Gzip Filter

简介:

对于多数Http请求来说,如果我们能让他们以压缩文件的形式提供这些资源的话,也会极大的提高效率。我们只要开启Gzip,然后就可以减少下载这些资源所占用的网络传输时间。


为了进行比较,我们先给个截图,这是没有启用Gzip的情况:

从这里可以看出,在启用Gzip之前,下载ext-all-debug.js需要2.8MB这么大的文件,需要用时1.53秒。


然后我们就配置Gzip Filter,为此需要做2个步骤:

(1)在$LIFERAY_HOME/portal-ext.properties文件中启用GzipFilter的功能如下:

(2)在$TOMCAT_HOME/conf/server.xml中,因为我们要测试的页面部署在8080端口上,所以我们找到8080端口的连接器(Connector),然后启用gzip ,具体就是加入以下参数:

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla,traviata"

compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,image/gif,image/png,image/jpg"/>

这里我们可以很明显的看出来,我们启用了compression,然后我们定义了需要压缩的资源类型,用compressableMimeType属性,所以这里所有我们能想到的前端资源都在这个类型列表中。


最后,我们打开Firebug进行再次测试,作为结果的比较,果然性能提升很大:

从这我们不难看出,现在的Resource Header中 Content-Encoding被设置成了gzip,所以这表示我们的gzip的功能已经被正确的开启,然后我们发现ext-all-debug.js的尺寸从2.8MB缩小成了只有550KB,而且网络的传输时间从1.53秒缩短到了906毫秒,几乎减少了40%的下载时间,其他的资源也都相应的下载时间有了大幅度的减少。可见效果很明显。





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/1213031,如需转载请自行联系原作者
目录
相关文章
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
510 3
|
缓存 前端开发 JavaScript
前端性能调优
前端性能调优
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
524 3
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局(避免复杂嵌套,使用`const`构造函数)、管理内存、优化动画、实现懒加载和按需加载,以及利用Flutter的性能工具(如DevTools)都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例,展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
628 0
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
|
前端开发 算法
前端 CSS 经典:filter 滤镜
前端 CSS 经典:filter 滤镜
403 0
|
JSON 监控 数据可视化
前端性能调优的实际案例-小白都看的懂
本文是前端性能调优的真实案例,首发于掘金,定量而非定性的讲解,尤其是对于合并资源后的数量与性能的关系,给出一点点思路,仅供参考,同时文末也给出了一些前端可视化的图表类型,也将继续会在接下来的文章继续详细介绍。
356 0
前端性能调优的实际案例-小白都看的懂
|
存储 JavaScript 前端开发
web前端面试高频考点——Vue3.x升级的重要功能(emits属性、生命周期、多事件、Fragment、移出.async、异步组件写法、移出 filter、Teleport、Suspense...)
web前端面试高频考点——Vue3.x升级的重要功能(emits属性、生命周期、多事件、Fragment、移出.async、异步组件写法、移出 filter、Teleport、Suspense...)
508 0
|
前端开发
「趣学前端」filter滤镜,CSS的PS特技
CSS之filter赏析,来show一波CSS的PS特技。
323 1
|
前端开发
前端学习案例16-数组方法filter&undefined和null对比2
前端学习案例16-数组方法filter&undefined和null对比2
171 0
前端学习案例16-数组方法filter&undefined和null对比2
|
前端开发
前端学习案例15-数组方法filter&undefined和null对比 原
前端学习案例15-数组方法filter&undefined和null对比 原
168 0
前端学习案例15-数组方法filter&undefined和null对比 原

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1281
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    586
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    446
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    447
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    569
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    744
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1455
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    324
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1177
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    518