前端一些基础的重要的知识2

1.输入网址后到底发生了什么？

（1）首要目标是获取连接的IP地址。浏览器开启一个线程来处理这个请求。调用浏览器内核中的对应方法，主要执行下面几步来获取网址的IP地址。
　　 1.搜索浏览器自身DNS缓存
　　 2.搜索操做系统自身的DNS缓存
　　 3.读取本地HOST文件
　　 当上面三步都没发现这个网址在本地的DNS缓存，那么浏览器就会请求宽带运营商服务器去获取DNS
　　 1.宽带运营商服务器查看自身缓存
　　 2.若是没有缓存，运营商服务器发起迭代DNS解析请求，首先询问根域，而后com域，最后域
　　 3.获取到IP后，运营商把结果返回操做系统内核同时缓存起来，系统内核把结果返回浏览器，最后浏览器得到IP地址
（2） 浏览器端口与远程`Web`服务器经过`TCP`三次握手协商来创建一个`TCP/IP`链接。
    　该握手包括
      一个同步报文（客户端发送syn包到服务器）
    　一个同步-应答报文（服务器确认客户端的syn,生成ACK，同时发送新的SYN给客户端(确保是真正的请求)，因此这里总共是发了SYN+ACK两个包给客户端）
    　一个应答报文（客户端向服务器发送确认包ACK）
　　　（SYN：同步序列编号，ACK:确认字符，等于发送过来的syn值+1）
（3）浏览器给web服务器发送HTTP请求,服务器响应。
（4）客户端获取HTML，而后创建文档树，渲染DOM，操做DOM，同时网页中的请求资源JS，css，图片等都会重复上面的步骤。

为何是三次？

为了防止已失效的链接请求报文段忽然又传送到了服务端，于是产生错误。（确保是真正的请求）

迭代查询和递归查询的区别？

迭代是客户机发送请求给dns1，dns1不能解析，则dns1把dns2的ip给客户机，客户机自动跳转到dns2，直到查询到为止。
递归则是客户机一直查询下去，只会返回最终结果。

4次挥手

1.客户端发送FIN给服务器，告诉服务器数据已经所有传输完成，能够关闭链接了
2.服务器响应ACK确认包，可是服务器数据还没传输完成，因此要等待一下
3.服务器数据传输完成了，发送FIN告诉客户端
4.客户端响应ACK确认包，链接关闭

 

2.浏览器渲染过程

1. 将HTML解析成DOM树 (DOM 树的构建过程是一个深度遍历过程：当前节点的全部子节点都构建好后才会去构建当前节点的下一个兄弟节点)
2. 将CSS解析成 CSS Rule Tree 。
3. 根据DOM树和CSS树来构造 Rendering Tree。(一些像display:none的东西不在渲染树)
4. reflow(又叫layout)，计算出每一个节点的位置。
5. painting 绘制 (遍历render树，使用UI层绘制每一个节点)

　　注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容。

2.new操做符干了什么

var a=new Base();
实际干了下面几件事：
var obj = {};
obj.__proto__ = Base.prototype; //使obj的__proto__私有属性拥有constructor (使obj的构造者是Base)
Base.call(obj); //Base里的this指向obj
a=obj;//把obj赋值给目标

 

3.CSS中5种position

1.static （静态定位） //正常文本流（忽略 top, bottom, left, right 或者 z-index 声明）
2.relative（相对定位） //正常文本流位置+设置的定位（例如left:20px;就向右移20px），因此仍是有可能覆盖原文档的
3.absolute（绝对定位）//脱离文档流,相对于 static定位之外 的第一个父元素定位，向上级查找，若是找不到，默认就是相对于HTML定位(例如left:20px;就相对于那个父元素定位右移20px)
 注意：绝对定位的元素忽略float属性！
4.fixed（固定定位）//脱离文档流，相对于浏览器窗口固定的定位（例如top:20px;永远距离浏览器顶部20px,就算滚动也不会变）
5.sticky(粘性定位)//例如top:20px： 若是距离浏览器顶部超过20px，则表现为relative随着页面滚动。 当距离顶部20px时，则表现为fixed固定距离浏览器顶部20px

只要设置了position:absolute和float中任何一个，都会让元素以display:inline-block的方式显示

sticky定位的限制：

    1.须指定 top, right, bottom 或 left 四个阈值其中之一，才可以使粘性定位生效。不然其行为与相对定位相同。

         而且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。

    2.设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，不然 position:sticky 不会生效

4.GET和POST的区别

1.用途：//http规范
    GET用于获取数据，POST用于发送数据。
2.传参方式：
    GET使用URL或Cookie传参。而POST将数据放在body中。
3.安全性：
    POST比GET安全，由于数据在地址栏上不可见。
4.长度限制：//取决于浏览器/服务器
    GET的URL会有长度上的限制(早期IE是2083个字符内)，POST的数据则能够很是大。
5.数据包：GET产生一个TCP数据包；POST产生两个TCP数据包。//http1.1以后的规范
         GET，浏览器会把http header和data一并发送出去，服务器响应200；
         POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok
6.幂等性：//本质区别
    GET是幂等方法，屡次调用不会对资源产生影响，POST是非幂等方法。

5.cookies，sessionStorage 和 localStorage 的区别

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

2.存储大小：
　　一个cookie最多4K，一个站点最多20个cookie。 
　　sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。 

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

4.做用域：
　　sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面。
　　localStorage和cookie是全部窗口共享的。

6.cookie和session的区别？

cookie:储存在浏览器端。不安全。一个cookie最多4K,一个站点最多20个cookie
session:储存在服务器端。安全。占用服务器资源。

5.HTTP缓存相关请求头

1.Expires/Cache-Control
缓存文件一段时间，或者到某个时间点
Expires要求客户端和服务端的时钟严格同步
Cache-Controll是HTTP1.1中才有的，若是两个同时设置了，以Cache-Control为基准

2.Last-Modified/ If-Modify-since
第一次请求，返回了Last-Modifed，这个文件最后修改的时间
第二次请求会带上If-Modify-since，对比文件最后修改的时间

3.ETag/ If-None-Match
第一次请求，返回ETag标签
第二次请求会带上If-None-Match，对比标签是否有改变

6.Cache-control取值

public 全部内容都将被缓存(客户端和代理服务器均可缓存) 
private 内容只缓存到私有缓存中(仅客户端能够缓存，代理服务器不可缓存) 
no-cache 必须先与服务器确认返回的响应是否被更改，而后才能使用该响应来知足后续对同一个网址的请求。所以，若是存在合适的验证令牌 (ETag)，no-cache 会发起往返通讯来验证缓存的响应，若是资源未被更改，能够避免下载。 
no-store 全部内容都不会被缓存到缓存或 Internet 临时文件中 
must-revalidation/proxy-revalidation 若是缓存的内容失效，请求必须发送到服务器/代理以进行从新验证 
max-age=xxx 缓存的内容将在 xxx 秒后失效

7.cookies的做用域

默认状况下，当前目录下设置的cookie，当前目录及该目录下的全部子目录下的全部文件都可以访问该cookie
若是设置了path="/"，则无论设置cookie在哪一个路径，全部目录及子目录下都可以访问到这个cookie
另外还有
domain设置cookie的访问域
secure，若是设置了该属性，只有使用https协议才可以访问到该cookie

 9.停止JavaScript

1.return
2.throw new Error('error');
或者throw SyntaxError();

 10.HTML5提出Web Worker标准，容许JavaScript脚本建立多个线程，可是子线程彻底受主线程控制，且不得操做DOM。

11.EventLoop机制

setTimeout(function(){console.log(1);}, 0);

console.log(2);

上面代码的执行结果老是2，1，由于只有在执行完主线程的同步任务之后，系统才会去执行"任务队列"中的回调函数

12.跨站脚本攻击(XSS)

一些现代浏览器已经默认禁止XSS形式的输入，

XSS分为反射型和存储型，存储型会存在服务器里，其余用户访问到页面时，则会被攻击

防范措施：

编码：对用户输入的数据进行HTML Entity编码
过滤：移除用户上传的DOM属性或者style,script,iframe等
校订：避免直接对页面解码，用DOM Parse转换，再校订不匹配的DOM标签

13.跨站请求伪造攻击（CSRF)

伪造客户请求

防范措施：

验证码：经过 referer、token 或者 验证码 来检测用户提交。
连接：尽可能不要在页面的连接中暴露用户隐私信息。
post：对于用户修改删除等操做最好都使用post 操做 。
cookie：避免全站通用的cookie，严格设置cookie的域。