网络相关(http,axios面试自用)

橘个栗子
227 阅读7分钟

1. 什么是跨域，以及如何解决跨域问题？

跨域是相对于同源策略而言的。 同源策略是一种约定，它是浏览器最核心也最基本的安全功能 所谓同源是指: url中的协议，域名，端口都相同,就是同源, 否则就是跨域 前端请求成功发送，后端也返回数据了，但是会被浏览器阻止js读取。

比如

image.png

同源策略带来的影响 在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据 但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的 这时如果再通过Ajax请求数据就会拿不到跨域数据

跨域解决方案

后端配置 cors 请求头中添加相应内容 Access-COntrol-Allow-Origin '*' 也可以是数组，指定允许跨域的域名 允许跨域

前端设置代理 ：prox代理 （中转服务器）

image.png jsonp 通过herf arc请求的脚本，文件，img等是不存在跨域问题的，只有ajax，fetch请求才存在跨域问题

它只支持get，不支持post

json包裹js函数再包裹真实数据

//前端
function bb(data){
    console.log(data)
}
<script src='http://xxxxxx?callback=bb' type='text/javascript'><script>
    
//后端
设置响应格式为json 拿到url的额外参数callback 执行callback并且传入参数（要返回的数据）

Nginx反向代理

2. HTTP和HTTPS的区别(必考)

HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头 HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密 HTTP 的端口号是 80，HTTPS 是 443 HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费 HTTP 的连接很简单，是无状态的； HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

3. HTTP的状态码说一下

1xx: 指示信息——表示请求已接收，继续处理

2xx: 成功——表示请求已被成功接收

3xx: 重定向——表示要完成请求必须进行进一步操作

4xx: 客户端错误——表示请求有语法错误或请求无法实现

5xx: 服务端错误——表示服务器未能实现合法的请求

100-199 用于指定客户端应响应的某些动作 200-299 用于表示请求成功 300-399 用于已重定向的文件 400-499 用于指出客户端的错误 400：语法有误，当前请求无法被服务器理解 401：当前请求需要用户验证，没有权限访问 403：服务器已经理解请求，但是拒绝执行它，场景如不允许直接访问，只能通过服务器访问时 404：请求的内容不存在。 500-599 用于指出服务器错误 503：服务不可用

4. get和post的区别(必考)

  • 提交数据存储位置不同

GET请求会将数据放到URL后面 POST请求会将数据放到请求体中

  • 对提交的数据大小限制不同

GET请求对所发信息量的限制是2000 个字符 POST请求对信息量没有限制

  • 应用场景不同

GET请求用于提交非敏感数据和小数据 POST请求用于提交敏感数据和大数据

  • get请求可以被缓存，post不可以被缓存
  • get后退不会有影响，post后退会重新进行提交
  • get请求的记录会留在历史记录中，post请求不会留在历史记录

5. Cookie、SessionStronge、LocalStronge的区别(重点)

  • 在同一浏览器下生命周期不同

Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间 SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间 LocalStorage生命周期: 除非被清除，否则永久保存

  • 容量不同

Cookie容量限制: 大小(4KB左右)和个数(20~50) SessionStorage和LocalStorage容量限制: 大小(5M左右)

  • 网络请求不同

Cookie网络请求: 每次都会携带在HTTP请求头中，如果使用cookie保存过多数据会带来性能问题 SessionStorage和LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信

  • 应用场景不同

Cookie: 判断用户是否登录 sessionStorage: 表单数据 LocalStorage: 购物车

需要注意的是：无论通过哪种方式存储的数据, 都不能将敏感数据直接存储到本地

6.ajax的四个步骤

  • 创建一个异步对象
let xmlhttp = new XMLHttpRequest();
复制代码
  • 设置请求方式和请求地址

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

xmlhttp.open("GET","04-ajax-get.php",true);
复制代码
  • 发送请求
xmlhttp.send();
复制代码
  • 监听状态的变化
xmlhttp.onreadystatechange = function(ev2){
    /*
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
    */
    if (xmlhttp.readyState === 4){
        // 判断是否请求成功
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
            // 5.处理返回的结果
            console.log("接收到服务器返回的数据");
        }else {
            console.log("没有接收到服务器返回的数据");
        }
    }
}
复制代码

7. 前端对后端返回的数据如何处理

前端通过javascript对后端返回的json或者xml进行格式化处理
JSON:
var jsonObj = JSON.parse(后端返回的json字符串);
var result = JSON.stringify(jsonObj, null, 2);//格式化
​
XML：
先使用 xml2json转化为JSON格式，然后再JSON.parse再JSON.stringfy进行格式化

8 . 从输入 URL 到页面加载完成的过程中都发生了什么(重点)

这里我不得不说一下，这是一个前端面试非常经典的面试题，这个题目很深，涉及的知识点很广，我这里只是简单概括，如果想进一步了解请移步：传送门

1. 浏览器会进行DNS域名解析，拿到域名对应的服务器ip地址，再用该ip去访问web服务器
2. 然后会和web服务器进行tcp的三次握手建立tcp连接
3. 连接建立成功后，浏览器会发送http的get请求
4. 服务器收到请求并给予响应，返回请求的数据
5. 浏览器拿到数据并进行解析、渲染
6. 浏览器和服务器进行tcp的四次挥手，断开连接

9. 详细说一下 TCP 的三次握手和四次挥手过程(重点)

10.说一下浏览器渲染机制

1.解析HTML生成DOM树  
2.解析CSS生成CSSOM规则树  
3.将DOM树和CSSOM规则树合并在一起生成渲染树  
4.遍历渲染树开始布局，计算每个节点的位置大小信息  
5.将渲染树的每个节点绘制到屏幕  

11.说一下浏览器事件环(重点)

1.JS是单线程的
  JS中的代码都是串行的, 前面没有执行完毕后面不能执行
​
2.执行顺序
2.1程序运行会从上至下依次执行所有的同步代码
2.2在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
2.3当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件
2.4一旦满足条件就执行满足条件的异步代码
​
3.宏任务和微任务
在JS的异步代码中又区分"宏任务(MacroTask)"和"微任务(MicroTask)"
宏任务: 宏/大的意思, 可以理解为比较费时比较慢的任务
微任务: 微/小的意思, 可以理解为相对没那么费时没那么慢的任务
​
4.常见的宏任务和微任务
MacroTask: setTimeout, setInterval, setImmediate（IE独有）...
MicroTask: Promise, MutationObserver ,process.nextTick（node独有) ...
注意点: 所有的宏任务和微任务都会放到自己的执行队列中, 也就是有一个宏任务队列和一个微任务队列
        所有放到队列中的任务都采用"先进先出原则", 也就是多个任务同时满足条件, 那么会先执行先放进去的
​
5.完整执行顺序
1.从上至下执行所有同步代码
2.在执行过程中遇到宏任务就放到宏任务队列中,遇到微任务就放到微任务队列中
3.当所有同步代码执行完毕之后, 就执行微任务队列中满足需求所有回调
4.当微任务队列所有满足需求回调执行完毕之后, 就执行宏任务队列中满足需求所有回调
... ...
注意点:
每执行完一个宏任务都会立刻检查微任务队列有没有被清空, 如果没有就立刻清空
avatar
文章
阅读
粉丝