前端知识点积累（js篇）

1、get和post

w3c是这么解释的：

    至于网上盛传一种说法：

      这种说法是有争议的，最初也不知道是谁写的一篇文章，然后被疯狂复制粘贴，导致现在一搜get和post的区别，全都是搬的那篇文章的解释，并且看到了不少反对这个文章观点的，所以我觉得不能尽信，万一面试官问你这个问题的时候你这么回答了，然后人家让你解释一下为什么会这么理解？？不是官方解释，也不是你亲自测试出来的结果，所以还是保守一点，或者可以根据你实际在项目中遇到过的get和post的两种请求方法，结合w3c的解释来回答这个问题。

2、http常用的状态码

      更多详细解释：http://www.w3school.com.cn/tags/html_ref_httpmessages.asp

3、cookie、session，localStorage和sessionStorage的区别

前端可以存取cookie值，但不能存取session值。

后台既可以存取cookie值，也可以存取session值。

cookie和session的区别：

• cookie是存在客户端（用户电脑）的，session是存在服务器端的。
• 存在本地的cookie信息很容易被窃取，session相对来说要安全一点，因此cookie中不会存储像密码之类的重要信息。但这个安全性也是相对较小一点而已，因为session是依赖cookie的，服务器想要记住客户端的某些信息，必须要给客户端一把“钥匙”（SESSIONID），这把“钥匙”一般都是存在cookie中的，因此这个SESSIONID任然有可能被别人拿到，然后用这把“钥匙”来开启服务器的那个装有你信息的“箱子”。只不过对于黑客来说，要拿到这把钥匙容易，开箱子的过程不会太简单，因此说session比cookie相对安全一点。
• cookie有大小限制（约4K）而session没有，但是session毕竟是放在服务器端的，因此会对服务器造成一定的压力。

（1）cookie

前后端都可以在客户端（用户电脑）设置cookie，后台可以通过请求头设置cookie，前端可以通过JavaScript设置。

对于前端来说，因为cookie的存储方式是一整个字符串，所以存值和取值都需要封装方法来实现。 如果不设置过期时间，cookie默认的生存周期是浏览器会话结束之后销毁（存在浏览器的内存中），就是说浏览器关闭了，cookie就会被销毁（是整个浏览器关闭，不是单个网页关闭），如果设置了过期时间，cookie将被存储在浏览器的磁盘文件中。下面是前端封装的设置cookie和取cookie的方法（摘自W3C）。如果想删除cookie，可以设置cname相同但过期时间为-1的键值对。

//存值  参数为 cookie 名、cookie 值、cookie过期时间
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

//取值   参数为 cookie 名
function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

（2）session

session是后端技术，前端可以了解一下。

session技术是基于cookie的，后台要用session存用户信息的话，需要借助cookie来存储JSESSIONID，每个客户端独有自己的JSESSIONID，就像身份证一样，是一个唯一性标识。

这个添加到cookie和从cookie中取值的过程都不需要前端做什么，不需要前端来存值，也不需要前端将值取出来再发送给服务器，是通过服务器端实现的（需要服务器端调用方法）。session默认在服务器端存储时间为30分钟，这个30分钟是以用户最后一次操作（请求）开始计时的，因此关闭浏览器并不会立马销毁session。

localStorage和sessionStorage都属于HTML 5 Web 存储

localStorage更像是cookie的升级版，因为cookie有4K的大小限制，而且存取都要自己封装方法，localStorage的限制是M级别的，不同浏览器限制大小不一样，但是在使用 web 存储前应检查浏览器是否支持 localStorage 和sessionStorage，因为是H5新增的，所以兼容性不是太好。

if(typeof(Storage)!=="undefined"){
    // 支持 localStorage  sessionStorage 对象
} else {
    // 抱歉! 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

localStorage 和sessionStorage 的区别：

• localStorage - 没有时间限制的数据存储，默认永久存储，需要手动删除数据。
• sessionStorage - 针对一个 session（会话） 的数据存储，浏览器关闭就销毁。

这俩我用的不多了解也不多，毕竟兼容性不好，考虑到IE浏览器，还是算了吧。希望有一天IE浏览器也可以强制升级，不维护低版本。

 

4、window.history 和 document.referrer实现后退功能

window.history.go( ) ;返回上一页并且刷新

window.history.go(-1) ; 返回上一页不刷新

window.history.back( ) ; 返回上一页不刷新

window.location.href = document.referrer; 返回上一页并且刷新

偶然间发现通过window.history返回上一页的方法有个小弊端，假如页面中有锚点 （我在页面中用锚点做了目录定位功能），这个返回方法也会触发返回那个a标签的锚点事件 ，而document.referrer不会，它是获取前一页面的URL地址，但是window.location.href = document.referrer会刷新页面，当时我做的是h5的APP页面，Android系统大都用的是QQ浏览器内核，而这个浏览器内核有个bug，就是你通过js返回上一页的话页面会自动刷新，反正我尝试了很多方法都不能让页面不刷新，所以个人觉得h5手机APP的话，刷不刷新都关系不大，但是ios确实会有区别。

另外附上一篇很详细的关于document.referrer的文章链接  ： https://www.cnblogs.com/baiyygynui/p/6426621.html

5、true OR false

var a, //false
b = {}, //true
c = '', //false
d = [], //true
e = null, //false
f = undefined; //false

if(b){
  console.log("true");
}else{
  console.log("false");
}

另外，对一个对象进行  ！！（双重否定表肯定）操作会把它转成布尔对象  效果和Boolean( )强转是一样的，但是写法更简便。

6、在浏览器输入网址按下回车键之后发生了什么

这也是个老生常谈的问题了。

说简单点就是：浏览器根据 DNS 服务器得到域名的 IP 地址 =》向这个 IP 的机器发送 HTTP 请求 =》服务器收到、处理并返回 HTTP 请求 =》浏览器得到返回内容并展示。

说复杂点：

首先要经过DNS解析是因为电脑识别的是IP地址不是www.baidu.com这种人为取的域名，这种形式只是为了方便人记忆，但是电脑跟人是不一样的。

但是在向DNS服务器询问之前，操作系统会先检查自己本地的hosts有没有这样一个映射关系，比如说localhost对应的是127.0.0.1。一般hosts文件存放在C:\Windows\System32\drivers\etc目录下，用记事本打开之后可以自己修改，比如如果你在文本最后添加这样一行，你就访问不了百度了，因为你把映射关系改变了，而本地配置的映射关系优先级是大于DNS服务器上的，不过修改这个文件需要提供管理者权限。

找到这个映射关系并且把IP返回给浏览器之后，浏览器就会尝试和该IP地址建立连接，这个尝试连接的过程需要经过“三次握手”，第一次是客户端询问服务器是否可以建立连接，第二次服务器返回给客户端一个讯息告诉它能不能连，第三次是客户端接收到反馈信息后再正式与服务器建立连接，这样就完成了“三次握手”，连接完毕之后客户端就可以向服务器请求资源了，这个过程有点像打电话，我想给赵四打电话，我只知道他叫赵四，我先要找到赵四的电话号码，然后拨出电话，等赵四那边接通了之后我这边会嘟一声，我就知道电话通了，我可以跟赵四说话了。

说话的过程就是HTTP请求的过程，这个过程是建立在电话接通的前提下，HTTP请求是我问一句你答一句，而电话接通状态是一次性的，挂断了就说不了话了，也就不能发送HTTP请求了。

前端关注的重点应该是发送HTTP请求之后，服务器分析完你的需求返回给你相应的资源之后，客户端接收到资源之后应该干什么。客户端拿到资源浏览器会开始解析这些资源，并且开始渲染页面，最重要的就是这个渲染过程。

浏览器的渲染过程是一个很复杂的计算过程，并且它是先构建 DOM 和 CSSOM 树再呈现页面的，而脚本在文档的何处插入，就在何处执行。当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建，这也是为什么通常建议把JavaScript放在HTML文档的最后而不建议放在头部加载的原因，放在头部的话就会阻塞DOM树的渲染，导致页面出现很长一段时间的空白等待，尽可能快的让页面呈现会提升用户体验。

之后合并DOM Tree和CSS Rule Tree形成渲树，它只包含渲染网页所需的节点。遍历每个DOM树中的node节点，在CSSOM规则树中寻找当前节点的样式，生成渲染树。然后开始布局计算每个对象的精确位置和大小，最后一步是绘制，使用最终渲染树将像素渲染到屏幕上。总结步骤：

1. 处理 HTML 标记并构建 DOM 树；
2. 处理 CSS 标记并构建 CSSOM 树；
3. 将 DOM 与 CSSOM 合并成一个渲染树；
4. 根据渲染树来布局，以计算每个节点的几何信息；
5. 将各个节点绘制到屏幕上。

7、Ajax  =  Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

ajax的精髓就是XMLHttpRequest 对象，它用于和服务器交换数据。

jQuery封装的ajax大概可以理解为两部分，设置请求头、回调。jQuery帮我们简化了创建XMLHttpRequest对象和发送请求两个步骤 。在原生ajax中，发送一个ajax请求分为下面几个步骤：

1. 创建XMLHttPRequest对象；
2. 设置请求头；
3. 发送请求；
4. 失败或者成功的回调。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject），所以兼容写法应该是：

//创建xhr对象
var xhr;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhr=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//规定请求的类型、URL 以及是否异步处理请求
request.open("POST","url",true);
//设置请求头
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //必须写在open和send中间
//发送请求
request.send("name=zm&sex=girl");
//规定当服务器响应已做好被处理的准备时所执行的任务（回调函数）
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        //处理返回的信息
        console.log(xmlhttp.responseText);
    }
}
//xmlhttp.readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
//xmlhttp.status   200: "OK"  404: 未找到页面
//每当 readyState 属性改变时，就会调用onreadystatechange函数，因此当 readyState 等于 4 且状态为 200 时，表示响应已就绪

//xmlhttp.responseText  获得字符串形式的响应数据
//xmlhttp.responseXML	获得 XML 形式的响应数据。

 

JavaScript需要总结的太多了，还有双向数据绑定、原生js中需要做浏览器兼容判断的方法、promise.....太多太多了，随便顺个藤一摸就会发现自己是多么的无知。

暂时就记录这些吧。