前端面试问题及答案总结（三）

GET和POST的区别，何时使用POST？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
    POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

    GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
    也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
</code>

哪些地方会出现css阻塞，哪些地方会出现js阻塞？

js的阻塞特性：所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。

嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS怎么会阻塞加载了？CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6下CSS都是阻塞加载）

当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">   <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

   <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>、如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

   <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>、使用defer（只支持IE）

   <span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用`<span class="javascript">setTimeout</span>`来调用
</code>

Javascript无阻塞加载具体方式

• 将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前。

• 成组脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

• 非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在window.onload事件发出后开始下载代码。
  （1）defer属性：支持IE4和fierfox3.5更高版本浏览器
  （2）动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。代码如下：

  <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript">
  <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> script=<span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.createElement(<span class="hljs-string" style="color: rgb(42, 161, 152);">"script"</span>);
  script.type=<span class="hljs-string" style="color: rgb(42, 161, 152);">"text/javascript"</span>;
  script.src=<span class="hljs-string" style="color: rgb(42, 161, 152);">"file.js"</span>;
  <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.getElementsByTagName(<span class="hljs-string" style="color: rgb(42, 161, 152);">"head"</span>)[<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>].appendChild(script);
  </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span>
  </code>

   

此技术的重点在于：无论在何处启动下载，文件额下载和运行都不会阻塞其他页面处理过程。即使在head里（除了用于下载文件的http链接）。

闭包相关问题？

详情请见：详解js闭包

js事件处理程序问题？

详情请见：JavaScript学习总结（九）事件详解

eval是做什么的？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用<span class="hljs-built_in" style="color: rgb(38, 139, 210);">eval</span>，不安全，非常耗性能（<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>次，一次解析成js语句，一次执行）。
</code>

写一个通用的事件侦听器函数?

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-comment" style="color: rgb(147, 161, 161);">// event(事件)工具集，来源：github.com/markyun</span>
    markyun.Event = {
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 页面加载完成后</span>
        readyEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(fn)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (fn==<span class="hljs-literal" style="color: rgb(0, 102, 102);">null</span>) {
                fn=<span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>;
            }
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> oldonload = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload;
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">typeof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload != <span class="hljs-string" style="color: rgb(42, 161, 152);">'function'</span>) {
                <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload = fn;
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
                    oldonload();
                    fn();
                };
            }
        },
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 视能力分别使用dom0||dom2||IE方式 来绑定事件</span>
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 参数： 操作的元素,事件名称 ,事件处理程序</span>
        addEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(element, type, handler)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.addEventListener) {
                <span class="hljs-comment" style="color: rgb(147, 161, 161);">//事件类型、需要执行的函数、是否捕捉</span>
                element.addEventListener(type, handler, <span class="hljs-literal" style="color: rgb(0, 102, 102);">false</span>);
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.attachEvent) {
                element.attachEvent(<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
                    handler.call(element);
                });
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                element[<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type] = handler;
            }
        },
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 移除事件</span>
        removeEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(element, type, handler)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.removeEnentListener) {
                element.removeEnentListener(type, handler, <span class="hljs-literal" style="color: rgb(0, 102, 102);">false</span>);
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.datachEvent) {
                element.detachEvent(<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type, handler);
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                element[<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type] = <span class="hljs-literal" style="color: rgb(0, 102, 102);">null</span>;
            }
        }, 
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)</span>
        stopPropagation : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(ev)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (ev.stopPropagation) {
                ev.stopPropagation();
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                ev.cancelBubble = <span class="hljs-literal" style="color: rgb(0, 102, 102);">true</span>;
            }
        },
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 取消事件的默认行为</span>
        preventDefault : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(event)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (event.preventDefault) {
                event.preventDefault();
            } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                event.returnValue = <span class="hljs-literal" style="color: rgb(0, 102, 102);">false</span>;
            }
        },
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 获取事件目标</span>
        getTarget : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(event)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> event.target || event.srcElement;
        },
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；</span>
        getEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(e)</span> </span>{
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> ev = e || <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.event;
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (!ev) {
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> c = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.getEvent.caller;
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">while</span> (c) {
                    ev = c.arguments[<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>];
                    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (ev && Event == ev.constructor) {
                        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">break</span>;
                    }
                    c = c.caller;
                }
            }
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> ev;
        }
    }; 
</code>

Node.js的适用场景？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">高并发、聊天、实时消息推送   
</code>

JavaScript原型，原型链 ? 有什么特点？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-bullet">*  </span>原型对象也是普通的对象，是对象一个自带隐式的 <span class="hljs-strong">__proto__</span> 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
<span class="hljs-bullet">*  </span>原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
</code>

页面重构怎么操作？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
</code>

WEB应用从服务器主动推送Data到客户端有那些方式？

 

code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">html5 websoket
    WebSocket通过Flash
    XHR长时间连接
    XHR Multipart Streaming
    不可见的Iframe
    <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript">标签的长时间连接(可跨域)
</span></code>

事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> <span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span> 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
 <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；
 <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>  ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = <span class="hljs-literal" style="color: rgb(0, 102, 102);">true</span>;
</code>

ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

详情请见：JavaScript学习总结（七）Ajax和Http状态字

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span> 通过异步模式，提升了用户体验

  <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

  <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span> Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

  <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> Ajax的最大的特点是什么。

  Ajax可以实现动态不刷新（局部刷新）
  readyState属性 状态 有<span class="hljs-number" style="color: rgb(42, 161, 152);">5</span>个可取值： <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>=未初始化 ，<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>=启动 <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>=发送，<span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>=接收，<span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>=完成

ajax的缺点

  <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>、ajax不支持浏览器back按钮。

  <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>、安全问题 AJAX暴露了与服务器交互的细节。

  <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>、对搜索引擎的支持比较弱。

  <span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>、破坏了程序的异常机制。

  <span class="hljs-number" style="color: rgb(42, 161, 152);">5</span>、不容易调试。

跨域： jsonp、 iframe、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.name、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.postMessage、服务器上设置代理页面
</code>

js对象的深度克隆

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">  <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">clone</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(Obj)</span> </span>{   
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> buf;   
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (Obj <span class="hljs-keyword" style="color: rgb(133, 153, 0);">instanceof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>) {   
            buf = [];  <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个空的数组 </span>
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = Obj.length;   
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">while</span> (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> buf;   
        }<span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (Obj <span class="hljs-keyword" style="color: rgb(133, 153, 0);">instanceof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span>){   
            buf = {};  <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个空对象 </span>
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> k <span class="hljs-keyword" style="color: rgb(133, 153, 0);">in</span> Obj) {  <span class="hljs-comment" style="color: rgb(147, 161, 161);">//为这个对象添加新的属性 </span>
                buf[k] = clone(Obj[k]);   
            }   
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> buf;   
        }<span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span>{   
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> Obj;   
        }   
    }  
</code>

AMD和CMD 规范的区别？

详情请见：详解JavaScript模块化开发

网站重构的理解？

code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面

减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存
</code>

如何获取UA？

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript"> 
    <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">whatBrowser</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{  
        <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Name.value=navigator.appName;  
        <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Version.value=navigator.appVersion;  
        <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Code.value=navigator.appCodeName;  
        <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Agent.value=navigator.userAgent;  
    }  
</span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span>
</code>

js数组去重

以下是数组去重的三种方法：

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>.prototype.unique1 = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
  <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> n = []; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//一个新的临时数组</span>
  <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>; i < <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.length; i++) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//遍历当前数组</span>
  {
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//如果当前数组的第i已经保存进了临时数组，那么跳过，</span>
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//否则把当前项push到临时数组里面</span>
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (n.indexOf(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]) == -<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) n.push(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]);
  }
  <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> n;
}
 
<span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>.prototype.unique2 = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span>
</span>{
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> n = {},r=[]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//n为hash表，r为临时数组</span>
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span>(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>; i < <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.length; i++) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//遍历当前数组</span>
    {
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (!n[<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]]) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//如果hash表中没有当前项</span>
        {
            n[<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]] = <span class="hljs-literal" style="color: rgb(0, 102, 102);">true</span>; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//存入hash表</span>
            r.push(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]); <span class="hljs-comment" style="color: rgb(147, 161, 161);">//把当前数组的当前项push到临时数组里面</span>
        }
    }
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> r;
}
 
<span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>.prototype.unique3 = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span>
</span>{
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> n = [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>]]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//结果数组</span>
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span>(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>; i < <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.length; i++) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//从第二项开始遍历</span>
    {
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">//如果当前数组的第i项在当前数组中第一次出现的位置不是i，</span>
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">//那么表示第i项是重复的，忽略掉。否则存入结果数组</span>
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.indexOf(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]) == i) n.push(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]);
    }
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> n;
}
</code>

HTTP状态码

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">100</span>  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
<span class="hljs-number" style="color: rgb(42, 161, 152);">200</span>  OK   正常返回信息
<span class="hljs-number" style="color: rgb(42, 161, 152);">201</span>  Created  请求成功并且服务器创建了新的资源
<span class="hljs-number" style="color: rgb(42, 161, 152);">202</span>  Accepted  服务器已接受请求，但尚未处理
<span class="hljs-number" style="color: rgb(42, 161, 152);">301</span>  Moved Permanently  请求的网页已永久移动到新位置。
<span class="hljs-number" style="color: rgb(42, 161, 152);">302</span> Found  临时性重定向。
<span class="hljs-number" style="color: rgb(42, 161, 152);">303</span> See Other  临时性重定向，且总是使用 GET 请求新的 URI。
<span class="hljs-number" style="color: rgb(42, 161, 152);">304</span>  Not Modified  自从上次请求后，请求的网页未修改过。
<span class="hljs-number" style="color: rgb(42, 161, 152);">400</span> Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
<span class="hljs-number" style="color: rgb(42, 161, 152);">401</span> Unauthorized  请求未授权。
<span class="hljs-number" style="color: rgb(42, 161, 152);">403</span> Forbidden  禁止访问。
<span class="hljs-number" style="color: rgb(42, 161, 152);">404</span> Not Found  找不到如何与 URI 相匹配的资源。
<span class="hljs-number" style="color: rgb(42, 161, 152);">500</span> Internal Server <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Error</span>  最常见的服务器端错误。
<span class="hljs-number" style="color: rgb(42, 161, 152);">503</span> Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
</code>

cache-control

网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-title" style="color: rgb(133, 153, 0);">Expires</span> = <span class="hljs-string" style="color: rgb(42, 161, 152);">"Expires"</span> <span class="hljs-string" style="color: rgb(42, 161, 152);">":"</span> HTTP-date
</code>

例如

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">Expires</span>: <span class="hljs-string" style="color: rgb(42, 161, 152);">Thu, 01 Dec 1994 16:00:00 GMT （必须是GMT格式）</span>
</code>

如果把它设置为-1，则表示立即过期

Expires和max-age都可以用来指定文档的过期时间，但是二者有一些细微差别

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1.Expires在HTTP/1.0中已经定义，<span class="hljs-operator"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">Cache</span>-Control:<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age在HTTP/<span class="hljs-number" style="color: rgb(42, 161, 152);">1.1</span>中才有定义，为了向下兼容，仅使用<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age不够；
<span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>个问题：<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>)客户端和服务器时间不同步导致Expires的配置出现问题。 <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>）很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象；
 
<span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span><span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age 指定的是从文档被访问后的存活时间，这个时间是个相对值(比如:<span class="hljs-number" style="color: rgb(42, 161, 152);">3600</span>s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)
 
<span class="hljs-number" style="color: rgb(42, 161, 152);">4.</span>Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age相对对的是文档的请求时间(Atime)
 
如果值为<span class="hljs-keyword" style="color: rgb(133, 153, 0);">no</span>-<span class="hljs-keyword" style="color: rgb(133, 153, 0);">cache</span>,那么每次都会访问服务器。如果值为<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age,则在过期之前不会重复访问服务器。
</span></code>

js操作获取和设置cookie

<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建cookie</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">setCookie</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(name, value, expires, path, domain, secure)</span> </span>{
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieText = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">encodeURIComponent</span>(name) + <span class="hljs-string" style="color: rgb(42, 161, 152);">'='</span> + <span class="hljs-built_in" style="color: rgb(38, 139, 210);">encodeURIComponent</span>(value);
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (expires <span class="hljs-keyword" style="color: rgb(133, 153, 0);">instanceof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Date</span>) {
        cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; expires='</span> + expires;
    }
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (path) {
        cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; expires='</span> + expires;
    }
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (domain) {
        cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; domain='</span> + domain;
    }
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (secure) {
        cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; secure'</span>;
    }
    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie = cookieText;
}
<span class="hljs-comment" style="color: rgb(147, 161, 161);">//获取cookie</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">getCookie</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(name)</span> </span>{
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieName = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">encodeURIComponent</span>(name) + <span class="hljs-string" style="color: rgb(42, 161, 152);">'='</span>;
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieStart = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.indexOf(cookieName);
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieValue = <span class="hljs-literal" style="color: rgb(0, 102, 102);">null</span>;
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (cookieStart > -<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) {
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieEnd = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.indexOf(<span class="hljs-string" style="color: rgb(42, 161, 152);">';'</span>, cookieStart);
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (cookieEnd == -<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) {
            cookieEnd = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.length;
        }
        cookieValue = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">decodeURIComponent</span>(<span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> cookieValue;
}
 
<span class="hljs-comment" style="color: rgb(147, 161, 161);">//删除cookie</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">unsetCookie</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(name)</span> </span>{
    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie = name + <span class="hljs-string" style="color: rgb(42, 161, 152);">"= ; expires="</span> + <span class="hljs-keyword" style="color: rgb(133, 153, 0);">new</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Date</span>(<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>);
}</code>