前端一些基础的重要的知识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的域。