面试

WebStorage

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。其API提供的方法有以下几种：

    - setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    - getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    - removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    - clear () ——  删除所有的数据

    - key (index) —— 获取某个索引的key

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

• 页面刷新不会消除数据;
• 只有在当前页面打开的链接，才可以访sessionStorage的数据；
• 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;

css

垂直水平居中

使用flex

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

absolute + 四个方向的值相等

使用绝对定位布局，设置 margin:auto;，并设置 top、left、right、bottom 的 值相等即可（不一定要都是 0）。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

重要

网页从输入网址到渲染完成经历了哪些过程？

大致可以分为如下7步：

1. 输入网址；
2. 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
3. 与web服务器建立TCP连接；
4. 浏览器向web服务器发送http请求；
5. web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
6. 浏览器下载web服务器返回的数据及解析html源文件；
7. 生成DOM树，解析css和js，渲染页面，直至显示完成；

前端如何优化网站性能？

• 尽量减少HTTP请求。如使用打包工具合并资源、CSS Sprite、静态资源使用缓存；
• 压缩请求资源体积。如使用webpack进行压缩、服务端开启gzip压缩等；
• 使用CDN减少响应时间；
• 减少DNS查询次数。如减少主机名、缓存DNS等；
• 将js脚本尽量放在页面底部，将css样式表放在顶部；
• 减少回流与重绘；
• 减少DOM元素数量和DOM操作

jQuery获取的dom对象和原生的dom对象有何区别？

js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

HTTP

session 与 cookie 的区别

• session 保存在服务器，客户端不知道其中的信息；
• cookie 保存在客户端，服务器能够知道其中的信息。
• session 中保存的是对象，cookie 中保存的是字符串。
• session 不能区分路径，同一个用户在访问一个网站期间，所有的 session 在任何一个地方都可以访问到。
• 而 cookie 中如果设置了路径参数，那么同一个网站中不同路径下的 cookie 互相是访问不到的。

cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制 ?

• cookies 是一些存储在用户电脑上的小文件。
• 它是被设计用来保存一些站点的用户数据，这样能够让服务器为这样的用户定制内容，后者页面代码能够获取到 cookie 值然后发送给服务器。
• 比如 cookie 中存储了所在地理位置，以后每次进入地图就默认定位到改地点即可。

HTTP缓存

HTTP缓存是指，浏览器第一次向服务器发起HTTP请求后，服务器会返回请求的资源，并在响应头中添加一些有关缓存的字段。之后浏览器再次请求该资源时，就可以视情况使用强缓存或协商缓存。

强缓存是指浏览器直接从本地缓存中获取数据，不与服务器进行交互；协商缓存是指浏览器发送请求到服务器，服务器判断是否可使用本地缓存，如果可以使用则服务器返回304。

控制强缓存的字段有：

• Cache-Control。如设置max-age=10，则表示缓存的存在时间为10秒；
• Expires。指定了文件的过期时间，如果有max-age则会忽略；

控制协商缓存的字段有：

• Last-Modified / If-Modified-Since。记录文件最近修改时间，前者是响应首部字段，后者是请求首部字段；
• Etag / If-None-Match。根据实体内容生成一段hash字符串，前者是响应首部字段，后者是请求首部字段。优先级高于Last-Modified

跨域

跨域是指一个域下的脚本试图去请求另一个域下的资源，由浏览器同源策略导致。只要协议、域名、端口有任何一个不同，就会被视为不同的域。同源策略限制了不同域：Cookie、LocalStorage和IndexDB无法读取、DOM和js对象无法获取，Ajax请求发送不出去。这里介绍两种常见跨域方法：

jsonp跨域。原理是利用HTML中一些标签的src获取资源没有跨域限制，例如通过动态的创建script标签，去请求一个带参网址以实现跨域通信。该方法只能实现get请求；

    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    // 传参并指定回调执行函数为onBack 
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack'; 
    document.head.appendChild(script); 
    // 回调执行函数 
    function onBack(res) { alert(JSON.stringify(res)); } 

CORS跨域资源共享。实现CORS通信的关键是服务器实现CORS接口。
浏览器将CORS请求分为简单请求和非简单请求两类。当请求方法是head、get、post三种之一，以及HTTP头信息不超出几个特定的字段就是简单请求。对于简单请求，浏览器会自动在头信息中添加一个Origin字段，如果服务器回应的头信息没有Access-Control-Allow-Origin字段，则表示源不在服务器许可范围内，触发错误。

对于非简单请求，会在正式通信前增加一次HTTP查询请求，称为预检请求。浏览器先询问服务器，当前域名是否在服务器许可名单之中，以及可以使用的字段，只有得到肯定答复，才会发出正式的XMLHttpRequest请求，否则触发错误。预检请求头信息包括Origin、Access-Control-Request-Method、Access-Control-Request-Headers几个特殊字段。

跨域解决方案

1. 通过jsonp跨域
2. 跨域资源共享（CORS）
3. nodejs中间件代理跨域
4. nginx反向代理中设置proxy_cookie_domai

GET和POST的区别

GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 请求只应当用于取回数据
POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求

使用原生Ajax

Ajax是异步的js和XML，能在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。XMLHttpRequest是Ajax的基础，使用原生Ajax有三个步骤：

a.创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest(); 

b.配置请求与发送（get或post）：

xhr.open("GET","/try/ajax/ajax_demo.txt",true); //true代表异步 
xhr.send(); 
或 
xhr.open("POST","/try/ajax/demo_post2.php",true); 
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xhr.send("fname=Zhou&lname=minghang");

c.监听变化执行回调函数：

xhr.onreadystatechange=function() 
{ 
   if (xhr.readyState==4 && xhr.status==200){ 
       document.getElementById("myDiv").innerHTML = xhr.responseText; 
   }else{ 
        console.log('失败了'); 
   } 
} 

readyState存有XMLHttpRequest状态，0~4分别表示：未初始化、连接已建立、请求已接收、请求处理中、请求已完成。

status存有HTTP状态码，responseText与responseXML则用于获取响应数据。

请描述一下cookies，sessionStorage和localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

HTTP协议

HTTP超文本传输协议工作于客户端-服务端架构上，基于TCP/IP协议来传递数据，默认端口号80。该协议是一个无连接、无状态的请求/响应协议。

a.客户端请求消息

包括请求行、请求头部、空行和请求数据四个部分组成。首行包括请求方法、请求URI、协议版本。

b.服务器响应消息

包括状态行、消息报头、空行和响应正文四个部分组成。首行包括HTTP版本、状态码、状态描述。

c.HTTP状态码

状态码由三个十进制数字组成，第一个数字定义了状态码类型：1表示信息，需要请求者继续执行操作；2表示成功；3表示重定向，需要进一步操作以完成请求；4表示客户端错误；5表示服务器错误。常见状态码有：

• 200请求成功
• 301永久重定向，资源被永久转移到其他URI，会返回新的URI，今后新请求应使用新URI
• 302临时重定向，客户端应继续使用原有URI
• 304所请求的资源未修改，服务器不返回任何资源
• 401用户身份验证未提供或未通过
• 403服务器拒绝执行此请求
• 404请求的资源不存在
• 500内部服务器错误