优化网站设计(四):对资源启用压缩

news/2024/5/12 17:29:12/文章来源:https://blog.csdn.net/weixin_34087307/article/details/85555525

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题。

作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考

Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html

同时,他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践,并结合自己的实际项目情况进行应用。

接下来的一段时间,我将结合ASP.NET这个开发平台,针对这些原则,通过一个系列文章的形式,做些讲解和演绎,以帮助大家更好地理解这些原则,并且更好地使用他们。

准备工作

为了跟随我进行后续的学习,你需要准备如下的开发环境和工具

  1. Google Chrome 或者firefox ,并且安装 Yslow这个扩展组件.请注意,这个组件是雅虎提供的,但目前没有针对IE的版本。
    1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
      Technorati Tags: Performance,Web design,ASP.NET
    2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
    3. 你应该对这些浏览器的开发人员工具有所了解,你可以通过按下F12键调出这个工具。
  2. Visaul Studio 2010 SP1 或更高版本,推荐使用Visual Studio 2012
    1. http://www.microsoft.com/visualstudio/eng/downloads
  3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解,本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇,我们要讨论的是对资源启用压缩的话题。我们知道,不光我们如何减少请求数,或者使用CDN,以及使用缓存,有一个事实是我们无法避免的:内容总是需要从服务器传输到客户端,那怕次数是少一些。那么,如果希望这个传输的过程尽量地快,我们应该会很自然地想到,能否将传输的内容体积减小呢?

要回答这样的一个问题,我们通常就会使用到压缩技术。关于这一条原则的理论和概念,请参考 http://developer.yahoo.com/performance/rules.html#gzip

压缩并不那么简单,其实它包含了一对操作:压缩和解压缩。换句话说,在我们今天讨论的网站优化中使用压缩技术,不仅仅需要考虑服务器端对内容进行压缩,还要考虑客户端(浏览器)对内容进行解压缩。反过来也是如此。所以,这里就会有一个问题,我们必须要使用大多数浏览器都能接受的压缩算法。由于浏览器的多样性,通常是由浏览器在发起请求的时候,显式地表明自己接受那些压缩算法,然后服务器检查这些设置,再确认自己是否能利用这些算法进行压缩(或者解压缩),如果不能,则宁愿不进行压缩,直接返回原始的内容。

所以,在HTTP 1.1中规定,浏览器在发起请求的时候,可以通过下面这个Request Header来表明自己支持的压缩算法(可以有多个)

Accept-Encoding: gzip, deflate
然后,服务器在发送响应的时候,也可以通过下面这个Response Header来表明此次响应是否使用了某种算法(肯定只有一个)
Content-Encoding: gzip
作为程序员,我们知道其实还有很多其他的算法,但是确实从通用层面考虑,使用最多的是Gzip。 其他能与其相提并论的还有deflate,但还是Gzip用的最多。

 

哪些资源适合做压缩

  1. 静态网页(HTML,HTM)
  2. 文本文件(TEXT,XML等)
  3. 脚本文件(JAVASCRIPT)
  4. 样式文件(CSS)

 

哪些资源不适合做压缩

  1. 图片(JPG,GIF,PNG)
  2. 特殊组件(FLASH, XAP)

 

如何做压缩

要实现压缩功能并不难,现代的一些Web 服务器都内置支持这个特性。针对微软的IIS 7.0或者更高版本的话,可以通过参考下面的文章进行配置

Configuring HTTP Compression in IIS 7

http://technet.microsoft.com/en-us/library/cc771003(v=WS.10).aspx
我来对其做一些总结和演示

IIS 7.0内置支持Gzip压缩,这个可以通过在安装IIS的时候进行选择

正确安装之后,在管理工具中,就可以看到这样一项功能

image

 

IIS 7.0 支持两种方式的压缩:静态压缩和动态压缩。所谓静态压缩,就是对相对较大的内容,IIS 7.0会将它们压缩成一个新文件,并且缓存在磁盘上(可以通过下面这个界面配置多大的文件要进行静态压缩,并且放在哪个目录中),而动态压缩就是对于某些提交小的内容,直接在运行时进行动态压缩,不在磁盘上进行缓存(这种做法会带来CPU的一些额外的负担)

image

这个缓存的目录中会自动为每个应用程序池(Application Pool)创建一个子目录,以便保存那些静态压缩的文件

image

那么这种压缩到底能有多少收益呢?我们可以看看下面这个截图

image

上图中看到,在我的一个测试网站中,它对两个JAVASCRIPT文件做了压缩,压缩之后的尺寸分别为33KB和51KB,而这两个文件的原始文件大小其实是92KB和197KB,我们可以由此看出来,压缩比高达65%和74%。这是相当可观的一个收益,而你要做的仅仅是启用压缩即可。

image

 

实际上这个文件已经被压缩成下面这样了(不再是纯文本的脚本了)
不可否认的是,压缩和解压缩肯定会对CPU带来一些额外的负担的,但通常情况下,这个代价是很小的,尤其是与收益比较起来的话。
等等!我们好像漏了一个很重要的话题:上面的界面中,我们知道如何启用压缩,但却没有看到
  1. 如何设置哪些文件应该如何压缩(无论静态还是动态)。
  2. 到底是采用什么算法压缩

 

这个细节被隐藏在下面的配置文件中

C:\windows\system32\inetsrv\config\applicationHost.config
打开这个文件,搜索一下httpCompression,你可以找到如下的配置信息,当然,你可以在这个基础上做一些修改,前提是你先看懂它们。实际上不难,对吧
Technorati Tags: 性能优化,performance,ASP.NET,web design

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_767134.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站初学笔记3-HTML实用元素3

HTML-复选框 <html> <body> <form>我喜欢自行车&#xff1a;<input type"checkbox" name"Bike"><br />我喜欢汽车&#xff1a;<input type"checkbox" name"Car"></form> </body><…

ibits和oracle模糊查询,iBATIS 模糊查询LIKE (转) - 我的博客 - ITeye技术网站

iBatis 开发指南告诉我们&#xff0c;当 Person 对象的 name 属性不为 null 时启用 name 查询条件在映射文件 person.xml 中的配置为Xml代码 select id as id,name as name,passwd as passwd from person(name like #name#)select id as id,name as name,passwd as passwd fro…

腾讯云linux建站教程视频,手把手教你建站教程:购买腾讯云服务器后手动搭建WordPress网站1(CentOS 7)...

在搭建WordPress网站之前&#xff0c;我们需要先部署LNMP环境&#xff0c;很简单&#xff0c;不会的直接复制粘贴&#xff0c;十几分钟就完成了。下面请跟着教程&#xff0c;一步一步来跟着我复制粘贴&#xff1a;实例配置举例&#xff1a;(建议购买4G内存以上的云服务器)CPU&a…

网站如何变成灰色的

网站如何变成灰色的&#xff1f;![在这里插入图片描述](https://img-blog.csdnimg.cn/3862cb7c9e41412e8c66a19157ad3637.png 参考&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter filter :CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于…

网站添加头部Meta property=og协议的使用方法详解教程

Meta Propertyog怎么使用&#xff1f; 如何调用og:type&#xff1f;怎么在文章中调用og:title&#xff1f;如何使用调取文章og:image&#xff1f;本文将介绍什么是Meta Propertyog协议以及该协议的用法&#xff01; 什么是Meta Propertyog协议&#xff1f; og是一种新的HTTP…

SEO推广计划

一、网站分析以及关键词定位 1.官网定位 官网介绍公司信息、展示公司产品以及服务&#xff0c;让用户了解公司&#xff0c;产品服务&#xff0c;对产品服务产生兴趣&#xff0c;官网内容的建设&#xff0c;都要以目标用户为中心进行规划。最终目的&#xff0c;是要让用户信任这…

php里echo中加样式_PHP每15分钟自动更新网站地图(减少服务器消耗)

php中文网最新课程每日17点准时技术干货分享最近在弄一个短网址&#xff0c;自己写的代码。锻炼一下自己。在做html网站地图这块&#xff0c;想着把所有生成的短连接都展示出来&#xff0c;方便收录。就写了一个sitemap.php&#xff0c;后来发现&#xff0c;如果以后人流量大或…

利用WDCP面板备份网站文件及数据库以及网站还原恢复方法

2019独角兽企业重金招聘Python工程师标准>>> 无论我们VPS/服务器是使用的WEB面板管理&#xff0c;还是用一键包编译安装网站环境&#xff0c;在确保网站正常运维的同时&#xff0c;要及时做好网站的数据备份&#xff0c;万一如果有因为服务器导致无法打开&#xff0…

axios 注册拦截器 cdn引用_教程篇 | 使用七牛云存储、CDN加速网站图片

嗨&#xff0c;大家好&#xff0c;今天给大家分享的是使用七牛云等云服务商提供的对象存储服务&#xff0c;存储网站图片&#xff0c;并且可以cdn加速图片&#xff0c;让你的网页变得更快。首先给大家多多介绍一些有关的知识。目前各大云服务商都提供了对象存储服务&#xff0c…

分享一个免费SSL证书申请网站,给网站开启https协议 | 张戈博客

这些天&#xff0c;由于公司的业务需求&#xff0c;接触到了ssl证书和https协议。博客前几篇文章也分享了在WEB服务器上安装SSL证书&#xff0c;为网站开启https协议的教程&#xff0c;感兴趣的童鞋可以前往查看相关文章&#xff1a; 《LinuxNginx/Apache/Tomcat新增SSL证书&am…

大型网站架构系列:分布式消息队列(一)(转)

大型网站架构系列&#xff1a;分布式消息队列&#xff08;一&#xff09; 以下是消息队列以下的大纲&#xff0c;本文主要介绍消息队列概述&#xff0c;消息队列应用场景和消息中间件示例&#xff08;电商&#xff0c;日志系统&#xff09;。 本次分享大纲 消息队列概述消息队列…

网站正在建设中_网站建设中的几种推广方法

大家好&#xff0c;我是吉礻羊&#xff01;在网站建设的过程中&#xff0c;我们常常会运用到一些方法来对网站进行推广&#xff0c;有些方法效果很好&#xff0c;有些可能效果不明显。今天&#xff0c;和大家分享几种比较有效的推广方法。网站建设中的几种推广方法网站建设中的…

SEO关键词策略

为什么80%的码农都做不了架构师&#xff1f;>>> seo关键词策略 选择关键词的六大技巧 列出在整个行业内自己知道或者心中所想的所有关键词&#xff0c;最少列30个分析竞争对手的网站&#xff0c;看都用了哪些关键词咨询周围的朋友平时在搜索相关产品的时候会使用哪…

想做一个显示全国火车运行图的网站(6)第一阶段

我终于可以说这句话了&#xff0c;放个图先。 有位伟人说过&#xff0c;知识就是一个圆&#xff0c;知道的越多&#xff0c;半径越长&#xff0c;所接触的未知的区域也就越多。 我正好可以引用&#xff0c;网站做得越往后做&#xff0c;想要做的东西就越多&#xff0c;就越来越…

无法访问此网站 找不到 github-production-release-asset

github报错 解决方法&#xff1a;修改host 按winr&#xff0c;输入&#xff1a;c:\windows\system32\drivers\etc 加入这句话 52.216.186.155 github-production-release-asset-2e65be.s3.amazonaws.com

在网站url上加上省略的index/index/index后,页面css加载出错

原因&#xff1a;css的路径为相对路径。 如图&#xff1a; 错误路径&#xff1a; 正确路径&#xff1a; 修改&#xff1a; 找到页面把路径改为绝对路径&#xff1a; 修改后&#xff1a; 总结&#xff1a;虽然很简单。但是这个问题已经不是第一次遇到了&#xff0c;以后再遇…

分享8个帮助你学习快速编程的实用网站

为什么80%的码农都做不了架构师&#xff1f;>>> 日期&#xff1a;2012/02/20 来源&#xff1a;GBin1.com 作为一个合格的前端开发人员&#xff0c;我们不得不学习很多最新的技术和实现&#xff0c;不论是html5&#xff0c;CSS&#xff0c;CSS3&#xff0c; javasc…

springboot打jar包部署在linux(阿里云)服务器上项目启动成功但页面访问时提示无法访问此网站

项目打jar包放在阿里云服务器上&#xff0c;启动成功&#xff0c;但是页面访问时提示无法访问此网站。 问题分析&#xff1a;项目启动成功说明程序没有问题。无法访问可能是端口的问题。首先检查项目中使用的端口号&#xff0c;再检查阿里云服务器是否开启该端口号。如果阿里…

分享6个超酷的3D特效网站设计

为什么80%的码农都做不了架构师&#xff1f;>>> 日期&#xff1a;2012-6-16 来源&#xff1a;GBin1.com 作为独特的网站设计风格&#xff0c;使用3D特效设计的网站会带给访问者超酷的视觉冲击&#xff0c;今天小编我将介绍最近收集的8个超酷的3D网站设计&#xff…