`
John_Kong19
  • 浏览: 279723 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

压缩网页内容提高web应用效率

阅读更多
按照调优指南,一个重要的原则就是对js、css等文件采用Gzip、deflate等压缩工具进行压缩,以降低网络传输带宽。

1、网页压缩原理
    网页压缩是一项由WEB服务器(应用服务器)和浏览器之间共同遵守的协议,也即WEB服务器(应用服务器)和浏览器都必须支持该技术,现在流行的浏览器 (IE、FireFox、Opera )都是支持的;Lighttpd、Apache 、Ngix、 IIS、Tomcat等应用服务器或web服务器都支持。双方的协商过程如下:

浏览器请求某URL,并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate,表明浏览器支持 gzip 和 deflate 这两种压缩方式(事实上 deflate 也是使用 gzip 压缩协议);
WEB 服务器接收到请求后判断浏览器是否支持压缩,如果支持就传送压缩后的响应内容,否则传送不经过压缩的内容;
浏览器获取响应内容后,判断内容是否被压缩,如果是则解压缩,然后显示响应页面的内容。
    具体的交互过程可以利用Livehttpheader来查看http的交互过程。

2、网页压缩的方法
对JS、CSS文件压缩分为两大方面:

对js、CSS采用yuicompressor、JsPacker这样的工具对js等文件进行压缩。主要是删除诸如空行、回车换行、注释等无用的字符,减少文件本身的大小,这也是诸如jquery、prototype等javascript库发布时候所采用的方法。
采用应用服务器(web服务器)及浏览器对gzip、deflate等压缩方法的支持来对请求进行实时的压缩
    在实际应用时候,应当结合两种方法来使用。在大型应用中,会采用lighttpd、apache这样的web服务器来做前端,可以在lighttpd或 apache中配置gzip、deflate支持。这里只是简单说明一下采用Jboss对gzip的支持来提高web应用程序的效率

3、Tomcat 开启Gzip :

1.找到Tomcat 目录下的conf下的server.xml,并找到如下信息

Connector port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true"
将它改成如下的形式(其实在上面代码的下面已经有了,将他们打开而已。):

<!-- Define a non-SSL HTTP/1.1 Connector on port 8080 --> <Connector port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml" >
这样,就能够对html和xml进行压缩了,如果要压缩css 和 js,那么需要将

compressableMimeType=”text/html,text/xml”加入css和js:

<Connector port="8080" ......... compressableMimeType="text/html,text/xml,text/css,text/javascript" >
你甚至可以压缩图片:

compressableMimeType=”text/html,text/xml”加入css和js:

<Connector port="8080" ......... compressableMimeType="text/html,text/xml,text/css,text/javascript,image/gif,image/jpg" >
开启后重启Tomcat ,通过浏览器查看headers信息就能看到是否开启(firebug中有),如果开启了,那么transfer-encoding就会是Gzip,否则就是chunked。
分享到:
评论

相关推荐

    Android Web应用开发-英文版

    6. **性能优化**:优化Web应用加载速度和运行效率是开发过程中的重要环节。这包括合理使用缓存、减少HTTP请求、压缩资源文件等策略。 7. **安全考虑**:由于WebView直接执行用户提供的HTML和JavaScript,开发者需要...

    WEB应用程序,应用程序

    现代Web开发框架,如React、Vue.js和Angular,极大地提高了开发效率和用户体验。 2. **后端**:后端通常使用服务器端编程语言(如Java、Python、Ruby、Node.js等)和框架(如Spring Boot、Django、Express.js)实现...

    实战 Web Service 压缩传输

    然而,在实际应用中,Web Service 的数据传输效率往往受到诸多因素的影响,尤其是当传输大量数据时,其效率问题更加突出。本文将围绕“实战 Web Service 压缩传输”这一主题,深入探讨如何通过不同的技术手段和策略...

    蓝桥杯第十三届大赛web大学组题目

    3. 图像处理:在images文件夹中,可以看到多个SVG图片,这些图片将被用于Web应用程序中。SVG是一种基于XML的矢量图形格式,可以实现高质量的图形显示。 4. Web开发技术:题目中使用了多种Web开发技术,包括HTML、...

    web应用系统开发书中程序

    8. **性能优化**:通过缓存策略、代码压缩、图片优化、CDN(内容分发网络)等手段,可以显著提升Web应用的加载速度和用户体验。 9. **测试与部署**:单元测试、集成测试和端到端测试确保代码质量,而持续集成/持续...

    WEB服务器应用指南.rar

    WEB服务器是互联网上的一个重要组成部分,它接收HTTP(超文本传输协议)请求并返回HTTP响应,负责展示网页内容。常见的WEB服务器软件有Apache、Nginx、IIS等。它们通过监听特定端口(如80或443)来处理来自客户端的...

    压缩web程序中的js文件

    "压缩web程序中的js文件"这个主题,主要是讲解如何对Web应用中的JavaScript文件进行压缩,以减小文件大小,加快页面加载速度。这一过程通常分为以下几个步骤: 1. **代码混淆**:通过改变变量名和函数名,使代码变...

    51单片机web应用

    5. **数据传输优化**:由于51单片机的内存和处理能力有限,需要对数据传输进行优化,例如采用JSON格式来减小数据体积,或者使用压缩算法提高传输效率。 6. **安全考虑**:考虑到数据的隐私和安全性,可能需要实施...

    Web技术应用基础电子教案

    11. **Web存储**:随着Web应用复杂性的增加,本地存储需求也在增长。浏览器提供了本地存储机制,如Cookie、localStorage和sessionStorage,以及新的IndexedDB,用于存储大量数据。 12. **Web性能优化**:包括减少...

    webapi 源码 版本控制 压缩 参数验证

    **压缩**则是一种提高网络传输效率的技术,它通过减少HTTP响应的大小来加快加载速度,节省带宽。WebAPI可以利用IIS或自定义中间件来实现GZIP或DEFLATE等压缩格式。在ASP.NET中,可以通过启用`HttpCompressionModule`...

    WEB应用技术课程设计

    【压缩包子文件的文件名称列表】:WEB应用技术课程设计 压缩包可能包含了以下内容: 1. JSP源文件:如`index.jsp`, `addStudent.jsp`, `editStudent.jsp`, `deleteStudent.jsp`, `searchStudent.jsp`等,分别对应...

    web网页前端模板

    在IT行业中,Web前端开发是构建互联网应用的重要组成部分,它主要负责用户与网站之间的交互界面。Web前端模板则是为了加速开发过程,提供预设样式和布局的代码框架。标题提到的"web网页前端模板",具体指的是"H+4.1...

    《王者荣耀》web期末大作业网页设计.zip

    合理地组织代码、压缩图片、使用CDN(内容分发网络)等方法,可以提升网页加载速度,提供更好的用户体验。 总之,《王者荣耀》Web期末大作业是一个全面考察学生网页设计与前端开发能力的项目,它涵盖了从页面结构到...

    web网页开发资料

    通过学习这些内容,你将能够创建功能丰富、交互性强且具有良好用户体验的Web应用。不论你是初学者还是希望提升技能的开发者,这份“web网页开发资料”都将是你宝贵的资源库。记得理论结合实践,动手编写代码,才能...

    Web期末大考核作业-简单网页设计

    【标题】"Web期末大考核作业-简单网页设计"揭示了这个项目的核心是关于创建一个基本的网页设计,可能是为了一个视频网站。这涉及到前端开发技术,主要使用HTML5和CSS3,这两种语言是构建现代网页的基础。 HTML5是超...

    [网站设计与Web应用开发技术]电子教案&源代码&习题答案

    【网站设计与Web应用开发技术】是一门涵盖了广泛IT领域的课程,主要关注如何构建和开发交互式的、功能丰富的网络应用程序。这门课程的核心是教授学生如何利用一系列技术和工具来创建高效、用户友好的网站和Web服务。...

    WEB应用程序设计代码完整版

    在本文中,我们将深入探讨"WEB应用程序设计代码完整版"这一主题,这涵盖了Web程序设计与开发的关键技术和实践。...通过深入学习这些内容,开发者将具备创建高效、安全且用户体验优秀的Web应用程序的能力。

    《实战 Web Service 压缩传输》

    总的来说,《实战 Web Service 压缩传输》这本书会深入探讨如何在实际项目中应用压缩技术,提升Web Service在处理大数据量时的性能表现。通过学习和实践这些技巧,开发者可以有效地优化服务的响应时间和网络资源利用...

    Web应用软件开发实习

    在Web应用软件开发实习中,实习生将深入学习和实践一系列关键技能,这些技能对于成为成功的Web开发者至关重要。Web应用软件开发涵盖了前端、后端以及两者之间的交互,涉及到的技术栈广泛,包括但不限于HTML、CSS、...

    大学生Web前端静态网页设计期末大作业源码.zip

    在本项目中,"大学生Web前端静态网页设计期末大作业源码.zip" 是一个包含有学生在Web前端课程中完成的期末大作业的压缩文件。这个作业可能涉及到一系列的HTML、CSS和JavaScript代码,用于创建静态网页。让我们深入...

Global site tag (gtag.js) - Google Analytics