前端工作过程遇到的问题总结(一)

矫情吗；* 2022-03-09 03:23 301阅读 0赞

**目录**

本地储存localStorage与cookie的区别

输入一个url到返回页面，中间发生了什么？(面试)

原生AJAX写法（面试）

同源策略、跨域解决方案

Flexb布局

--------------------

### 本地储存localStorage与cookie的区别 ###

*  cookie在浏览器与服务器之间来回传递

sessionStorage和localStorage不会把数据发送给服务器，仅在本地保存

*  数据有效期不同

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

sessionStorage：仅在当前浏览器窗口关闭前有效。

localStorage：始终有效，长期保存。

*  cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
 *  存储大小也不同

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

*  作用域不同

sessionStorage不在不同的浏览器窗口中共享；

localStorage在所有同源窗口中都是共享的

cookie也是在所有同源窗口中都是共享的

Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage的api接口使用更方便

### 输入一个url到返回页面，中间发生了什么？(面试) ###

在浏览器中输入url，客户端先检查本地是否有对应的ip地址，

*  如果找到了则返回响应的ip地址
 *  如果没有找到则会请求DNS服务器，返回解析后的ip地址。

应用层客户端发送HTTP请求，包括请求头和请求体。其中请求头包含了重要的信息，包括请求的方法，目标url，遵循的协议，返回的信息是否需要缓存，客户端是否发送cookie等

然后传输层TCP协议传输报文，三次握手四次握手，三次握手，发送端发送带有SYN标示的数据给接收端，接收端接受到数据包后返回一个SYN/ACK标志的数据包表示确认信息，接收端接受后再发送一个带有ACK表示接到请求，连接成功。

再然后网络层ip协议查询mac地址，ip协议把TCP分割好的各种数据包发送给接收方，而要保证确实能传到接收方需要mac地址，物理地址是唯一的。ip地址和mac地址是一一对应的关系，一个网络设备可以换，但是mac地址是不能变的。

数据到达链路层，客户端发送请求的一端就完成了

服务端接受请求，在层层向上直到应用层。接受到HTTP请求后，查找资源并返回响应报文，响应报文有一个重要的信息就是状态码，返回数据渲染页面最后呈现给客户。

建议参考这个文档：[输入URL到页面加载][URL]

### 原生AJAX写法（面试） ###

这是一篇转载的文章：[原生Ajax写法][Ajax]

*  原生Ajax的使用：

*  get方法

*  post方法

### 同源策略、跨域解决方案 ###

**同源策略**

*  什么是源

源(origin)就是协议、域名和端口号。

若地址里面的协议、域名和端口号均相同则属于同源。

以下是相对 http://www.a.com/test/index.html的同源检测

1.  http://www.a.com/content/list.html --成功
2.  http://www.child.a.com/test/index.html --失败，域名不同
3.  https://www.a.com/test/index.html --失败，协议不同
4.  http://www.a.com:8080/test/index.html --失败，端口号不同

*  同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读取对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

*  不受同源策略限制的

1.  页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2.  跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>

**跨域**

*  什么是跨域

前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是需要跨域。

*  跨域的实现形式

1. 降域 document.domain

同源策略认为域和子域属于不同的域，如：

child.a.com与a.com
    child.a.com与child2.a.com
    xxx.child1.a.com与child1.a.com

两两不同源，可以通过设置document.domain='a.com',浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置document.domain='a.com'.

此方式的特点：

1.  只能在父域名与子域名之间使用，且将xxx.child1.a.com域名设置为a.com后，不能再设置child1.a.com
2.  存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
3.  这种方法只适用于Cookie和iframe

2. JSONP跨域

JSONP和JSON并没有什么关系！

JSON的原理：在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。如下面的代码：

这样便实现了跨域的参数传递。

采用jsonp跨域也存在问题：

1.  使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议进行基本的token的身份验证
2.  只能是GET，不能POST
3.  可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题

3. CORS

CORS是一个W3C标准，全程是“跨域资源共享”（Cross-origin resource sharing）

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

刚才的例子中，在b.com里面添加响应头声明允许a.com的访问，代码： Access-Control-Allow-Origin: http://a.com 然后a.com就可以用ajax获取b.com里的数据了。

注意：此方法IE8以下完全不支持，IE8-10部分支持。详见caniuse-CORS 详细内容请参考：跨域资源共享 CORS 详解

4. 其他方法

1.  HTML5的postMessage方法
2.  window.name
3.  location.hash

### Flexb布局 ###

这里可以看我的另外一篇文章：[快速入门Flex布局][Flex]

[URL]: https://segmentfault.com/a/1190000006879700
[Ajax]: https://blog.csdn.net/QQ_Empire/article/details/81737394
[Flex]: https://blog.csdn.net/wo_921110/article/details/87981338