前端学习

前端学习

@色少11年前

09/1
15:38
前端技能

【转】关于Gzip的部署

[转]http://www.cnblogs.com/linzhenjie/archive/2013/03/05/2943635.html
apache启用gzip压缩方法
一、gzip介绍

Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台。当应用Gzip压缩到一个纯文本文件时,效果是非常明显的,大约可以减少70%以上的文件大小。这取决于文件中的内容。

利用Apache中的Gzip模块,我们可以使用Gzip压缩算法来对Apache服务器发布的网页内容进行压缩后再传输到客户端浏览器。这样经过压缩后实际上降低了网络传输的字节数,最明显的好处就是可以加快网页加载的速度。

网页加载速度加快的好处不言而喻,除了节省流量,改善用户的浏览体验外,另一个潜在的好处是Gzip与搜索引擎的抓取工具有着更好的关系。例如 Google就可以通过直接读取gzip文件来比普通手工抓取更快地检索网页。在Google网站管理员工具(Google Webmaster Tools)中你可以看到,sitemap.xml.gz 是直接作为Sitemap被提交的。

而这些好处并不仅仅限于静态内容,PHP动态页面和其他动态生成的内容均可以通过使用Apache压缩模块压缩,加上其他的性能调整机制和相应的服务器端 缓存规则,这可以大大提高网站的性能。因此,对于部署在Linux服务器上的PHP程序,在服务器支持的情况下,我们建议你开启使用Gzip Web压缩。

二、Web服务器处理HTTP压缩的过程如下:

1. Web服务器接收到浏览器的HTTP请求后,检查浏览器是否支持HTTP压缩(Accept-Encoding 信息);

2. 如果浏览器支持HTTP压缩,Web服务器检查请求文件的后缀名;

3. 如果请求文件是HTML、CSS等静态文件,Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件;

4. 如果请求文件的压缩文件不存在,Web服务器向浏览器返回未压缩的请求文件,并在压缩缓冲目录中存放请求文件的压缩文件;

5. 如果请求文件的最新压缩文件已经存在,则直接返回请求文件的压缩文件;

6. 如果请求文件是动态文件,Web服务器动态压缩内容并返回浏览器,压缩内容不存放到压缩缓存目录中。

下面是两个演示图:

开启使用Gzip后:

三、实施

Apache上利用Gzip压缩算法进行压缩的模块有两种:mod_gzip 和mod_deflate。 要使用Gzip Web压缩,请首先确定你的服务器开启了对这两个组件之一的支持。在Linux服务器上,现在已经有越来越多的空间商开放了对它们的支持,有的甚至是同时 支持这两个模块的。例如目前Godaddy、Bluehost及DreamHosts等空间商的服务器都已同时支持mod_gzip 和mod_deflate。

虽然使用Gzip同时也需要客户端浏览器的支持,不过不用担心,目前大部分浏览器都已经支持Gzip了,如IE、Mozilla Firefox、Opera、Chrome等。

通过查看HTTP头,我们可以快速判断使用的客户端浏览器是否支持接受gzip压缩。若发送的HTTP头中出现以下信息,则表明你的浏览器支持接受相应的gzip压缩:

Accept-Encoding: gzip 支持mod_gzip
Accept-Encoding: deflate 支持mod_deflate

Accept-Encoding: gzip,deflate 同时支持mod_gzip 和mod_deflate
  在apache2.0以上(包括apache2.0)的版中gzip压缩使用的是mod_deflate模块,下面是具体配置步骤 如下:

   1、修改Apache的http.conf文件,去除mod_deflate.so前面的注释

LoadModule deflate_module modules/mod_deflate.so

 2、在根目录中新建.htaccess文件,定制压缩规则

#GZIP压缩模块配置

#启用对特定MIME类型内容的压缩
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|exe|t?gz|zip|bz2|sit|rar|pdf|mov|avi|mp3|mp4|rm)$ no-gzip dont-vary #设置不对压缩的文件
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript #设置对压缩的文件

3、对指定的文件配置缓存的生存时间,去除mod_headers.so模块前面的注释

LoadModule headers_module modules/mod_headers.so

4、在根目录中新建.htaccess文件,定制压缩规则

#文件缓存时间配置

Header set Cache-Control "max-age=2592000"

里面的文件MIME类型可以根据自己情况添加,至于PDF 、图片、音乐文档之类的这些本身都已经高度压缩格式,重复压缩的作用不大,反而可能会因为增加CPU的处理时间及浏览器的渲染问题而降低性能。所以就没必要再通过Gzip压缩。通过以上设置后再查看返回的HTTP头,出现以下信息则表明返回的数据已经过压缩。即网站程序所配置的Gzip压缩已生效。

Content-Encoding: gzip
注:不管使用mod_gzip 还是mod_deflate,此处返回的信息都一样。因为它们都是实现的gzip压缩方式。

除此之外,还可以通过一些在线检查工具http://tool.chinaz.com/Gzips/来检测你的网站内容是否已经过Gzip压缩。

四、mod_gzip 和mod_deflate的主要区别是什么?使用哪个更好呢?

首先一个区别是安装它们的Apache Web服务器版本的差异。Apache 1.x系列没有内建网页压缩技术,所以才去用额外的第三方mod_gzip 模块来执行压缩。而Apache 2.x官方在开发的时候,就把网页压缩考虑进去,内建了mod_deflate 这个模块,用以取代mod_gzip。虽然两者都是使用的Gzip压缩算法,它们的运作原理是类似的。

第二个区别是压缩质量。mod_deflate 压缩速度略快而mod_gzip 的压缩比略高。一般默认情况下,mod_gzip 会比mod_deflate 多出4%~6%的压缩量。

那么,为什么使用mod_deflate?第三个区别是对服务器资源的占用。 一般来说mod_gzip 对服务器CPU的占用要高一些。mod_deflate 是专门为确保服务器的性能而使用的一个压缩模块,mod_deflate 需要较少的资源来压缩文件。这意味着在高流量的服务器,使用mod_deflate 可能会比mod_gzip 加载速度更快。

不太明白?简而言之,如果你的网站,每天不到1000独立访客,想要加快网页的加载速度,就使用mod_gzip。虽然会额外耗费一些服务器资源, 但也是值得的。如果你的网站每天超过1000独立访客,并且使用的是共享的虚拟主机,所分配系统资源有限的话,使用mod_deflate 将会是更好的选择。

另外,从Apache 2.0.45开始,mod_deflate 可使用DeflateCompressionLevel 指令来设置压缩级别。该指令的值可为1(压缩速度最快,最低的压缩质量)至9(最慢的压缩速度,压缩率最高)之间的整数,其默认值为6(压缩速度和压缩质 量较为平衡的值)。这个简单的变化更是使得mod_deflate 可以轻松媲美mod_gzip 的压缩。

P.S. 对于没有启用以上两种Gzip模块的虚拟空间,还可以退而求其次使用php的zlib函数库(同样需要查看服务器是否支持)来压缩文件,只是这种方法使用起来比较麻烦,而且一般会比较耗费服务器资源,请根据情况慎重使用。详细 php启用zlib压缩文件

【转】关于Gzip的部署

@色少11年前

09/1
15:28
前端技能

arguments对象转换为数组

函数内的arguments 对象,有人称之为“类数组”对象,因为它具有数组的一些特性:拥有length 属性、并且用数字索引存放着参数以便访问,可大家都知道其实它并不是数组。

有的时候需要将参数列表看作一数组,以便使用数组的一些方法(如concat, splice 等)进行操作,这就要想办法做一个转换,

(function() {

aArguments = Array.prototype.slice.apply(arguments);

})(1,2,3);

 也可以简单写成

(function() {
var aArguments = [].slice.apply(arguments);

})(1,2,3);

 

此时aArguments 已经是参数数组[1, 2, 3] 了。

slice 方法确实可用于拷贝数组,但它是属于数组的方法,直接arguments.slice() 肯定是不行的。上面的方法则比较巧妙,它利用了arguments 对象的那些数组特性,然后通过apply 使自身运用于数组的slice 方法,以达到转换为数组类型的效果。

补充:在这里使用了

1
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span>forEach<span class="token punctuation">.</span>call

而不是

1
Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>forEach<span class="token punctuation">.</span>call

,二者等价,但是前者可以节省几个字节。

下面一个小例子:

使用mySort()能将传入的参数按照从小到大的顺序显示出来

function mySort(){

var args=new Array();   //使用数组作为参数存储容器

//补充代码

return args;

}

var result=mySort(50,11,16,24,88,57,…,10); //传入的参数个数不定

console.log(result);

 

下面是补充代码:

//           方法1

//          args=args.slice.call(arguments).sort(function(a,b){return a-b})

//           方法2

//            for(var i=0;i<arguments.length;i++) {

//                args[i]=arguments[i];

//            }

//           args.sort(function(n1,n2){

//                return n1-n2;

//            });

2014年12月更新:

http://blog.csdn.net/myhahaxiao/article/details/6952321

深入解析apply和call的区别和用法

我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..

主要我是要解决一下几个问题:

1.        apply和call的区别在哪里

2.        什么情况下用apply,什么情况下用call

3.        apply的其他巧妙用法(一般在什么情况下可以使用apply)

我首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用.

apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.

 Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)

call:和apply的意思一样,只不过是参数列表不一样.

 Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:这个对象将代替Function类里this对象
params:这个是一个参数列表

1.        apply示例:

  1. <script type=“text/javascript”>
  2.     /*定义一个人类*/
  3.     function Person(name,age)
  4.     {
  5.         this.name=name;
  6.         this.age=age;
  7.     }
  8.     /*定义一个学生类*/
  9.     function Student(name,age,grade)
  10.     {
  11.         Person.apply(this,arguments);
  12.         this.grade=grade;
  13.     }
  14.     //创建一个学生类
  15.     var student=new Student(“zhangsan”,21,“一年级”);
  16.     //测试
  17.     alert(“name:”+student.name+“\n”+“age:”+student.age+“\n”+“grade:”+student.grade);
  18.     //大家可以看到测试结果name:zhangsan age:21  grade:一年级
  19.     //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
  20. </script>

 

分析: Person.apply(this,arguments);

this:在创建对象在这个时候代表的是student

arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];

                   也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面

 

2.        call示例

在Studen函数里面可以将apply中修改成如下:

Person.call(this,name,age);

这样就ok了

3.        什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

4.        apply的一些其他巧妙用法

细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合, 在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) 这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:

 

a)        Math.max 可以实现得到数组中最大的一项

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组

但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

b)        Math.min  可以实现得到数组中最小的一项

同样和 max是一个思想 var min=Math.min.apply(null,array);

c)        Array.prototype.push 可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:

  1. vararr1=new Array(“1”,“2”,“3”);
  2. vararr2=new Array(“4”,“5”,“6”);
  3. Array.prototype.push.apply(arr1,arr2);

 

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题!

5.        总结:

一开始我对apply 非常的不懂,最后多看了几遍,自己多敲了几遍代码,才明白了中间的道理,所以,不管做什么事情,只要自己肯动脑子,肯动手敲代码,这样一个技术就会掌握…

还有比如第四部分得内容,巧妙的解决了实实在在存在的问题,这个肯定不是一个初学者能想到的解决方案(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!

arguments对象转换为数组