http以及网络部分相关的知识

axios 和 ajax

Ajax 核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱

axios支持 Promise API,提供了一些并发请求的接口,自动转换JSON数据,体积也较小;

计算机网络

https,使用 ssl 证书进行加密传输 防止网络抓包 保证信息安全

js 中发起请求的方式:xhr、fetch、websocket

介绍 http 请求报文
请求行------请求行有请求方法、URL和HTTP协议版本3个字段

请求头(携带数据) cookies token content-type

请求体 传输数据 发起post或get请求

数据传输的格式

json        '{"name":"zhangsan"}'
urlencoded  name=Tom&&age=18
form-data   此格式数据常常用于文件上传

常见状态码

状态码:200 多,300 多,400 多,500 多

200:成功

301:永久重定向、302:临时重定向

401:未授权

403:服务器拒绝访问

404:页面找不到

500:服务器错误

设计模式

  • 单例模式

  • 观察者模式

  • 工厂模式

  • 发布订阅模式

get 和 post 的区别
get 用来获取数据,参数传递的时候在 url 中可以直接看到,不太安全。传递的数据量比较少,可以加入收藏夹

post 用来传递大量数据,数据在请求体中进行传递,url 地址中看不到,相对于 get 请求更安全

1、常见的请求方式

get 获取数据
post 新增数据
put/patch 修改数据
delete 删除数据
2、 CRUD(增删改查)

Create
Read
Update
Delete
3、SSR 服务器端渲染

php
java
python
node.js
4、get和post的区别

get请求参数明文传输,在url中传递
post请求在请求体中传输
post请求相对get请求更安全一些
post请求传输的参数大小比get请求大
get传送的数据量不能大于2kb,post传送的数据量较大
get请求可以加入收藏夹
get请求常常用于获取数据,请求速度快

5、get请求传递的参数为什么有大小限制?

get请求在url中传递,不同浏览器对url长度有限制

http 三次握手以及常见的状态码?

  • 第一次握手是客户端给服务端发送请求,请求建立连接。

  • 第二次握手是服务端给客户端发送请求,表示已经收到客户端的请求,并且同意建立连接。

  • 第三次握手是客户端向服务端发送请求,表示确认收到服务端发送的信息。

  • 三次握手的原因是为了确认客户端和服务端都有收发信息的能力,少一次确认不了,多一次浪费资源。

四次挥手

  • 第一次挥手:先由客户端向服务器端发送一个 FIN,请求关闭数据传输。
  • 第二次挥手:当服务器接收到客户端的 FIN 时,向客户端发送一个 ACK,其中 ack 的值等于 FIN+SEQ
  • 第三次挥手:然后服务器向客户端发送一个 FIN,告诉客户端应用程序关闭。
  • 第四次挥手:当客户端收到服务器端的 FIN 是,回复一个 ACK 给服务器端。其中 ack 的值等于 FIN+SEQ
    网页从开始到加载出来经历了什么
  • 输入网址之后会做域名解析
  • 根据 ip 地址查找服务器,开始请求数据
  • 服务器返回数据,浏览器开始解析
  • 浏览器再一次请求页面中使用的资源文件
  • 解析展示整个页面
    浏览器渲染引擎的工作原理和工作流程?
  1. 解析 HTML 文档,构建 DOM 树(DOM 节点树。

  2. 解析 CSS 文档,生成 CSS 规则树。

  3. 合并 DOM 树和 CSS 规则树,生成渲染树 render 树。

  4. 布局 render 树,计算每个元素的大小,位置等信息(重排会走这一步)。

  5. 绘制 render 树,绘制页面的像素信息,(根据 render 树上每个节点的几何属性计算每个节点的像素数,重绘会走这一步)

  6. 浏览器会将各层节点的像素信息发给 GPU,GPU 将各层进行合成和渲染,最终展示到页面上。

浏览器安全问题,https 协议,https 与 http 区别

  • HTTP 协议工作在 80 端口,HTTPS 协议工作在 443 端口

  • HTTPS 需要申请证书(用于验证服务器身份)

  • HTTP 在 TCP 三次握手建立连接之后即可开始传输数据;HTTPS 协议则需要在建立 TCP 连接之后客户端与服务器在进行 SSL 加密,确定对话密钥,完成加密后才开始传输数据。

  • HTTPS 协议协议:是具有安全性的ssl加密传输协议,为浏览器和服务器之间的通信加密,确保数据传输的安全;

HTTP 协议:是超文本传输协议,信息是明文传输;

HTTP2.0 和 HTTP1.0 的区别

  • HTTP2 使用的是二进制传送,HTTP1.X 是文本(字符串)传送

  • HTTP2 支持路复用

介绍一下 XSS 攻击和 CSRF?

  • XSS(跨站脚本攻击),是一种代码注入攻击,是通过在网站中注入恶意代码达到劫持用户 cookie 或其他信息的一种攻击。

  • 客户端:限制输入长度

  • 上线前:使用扫描工具自动检测 XSS 漏洞

  • CSRF(Cross-site request forgery)跨站请求伪造

  • 服务端做一些防御操

跨域

域名协议端口号只要有一个不一致就会引起跨域,跨域是浏览器的安全机制导致的,只有在浏览器中有;

跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

跨域如何解决:
1、前端我们解决不了,都是服务器端解决的;

2、在开发的时候:我可以通过配置代理服务器或者浏览器安装插件的方式临时解决,但是上线之后还是需要服务器做配置;

3、通过 jsonp 跨域

jsonp是一种跨域通信的手段,它的原理其实很简单:首先是利用script标签的src属性来实现跨域。通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。由于使用script标签的src属性,JSONP 使用简单且兼容性不错,但是只限于 get 请求。

4、postMessage 跨域

5、跨域资源共享(CORS)

需要浏览器和后端同时支持。IE 89 需要通过 XDomainRequest 来实现。浏览器会自动进行
 
CORS 通信,实现 CORS 通信的关键是后端。只要后端实现了 CORS,就实现了跨域。
 
//谷歌插件 corsf
如果面试官问:“CORS 为什么支持跨域的通信?”
答案:跨域时,浏览器会拦截 Ajax 请求,并在 http 头中加 Origin。

6、nginx 代理跨域

7、nodejs 中间件代理跨域

8、WebSocket 协议跨域

同步和异步

同步叫阻塞模式,异步叫非阻塞模式

异步的实现原理:js 中的事件轮训(eventloop),微任务和宏任务

异步实现的原理:

在js中有一个异步回调队列,当遇到异步任务的时候会把这个任务直接转到异步队列中。等待所有的同步任务都完成之后在执行异步队列
异步队列中的任务会分为微任务和宏任务
每一个宏任务周期中会把当前周期中的所有微任务都执行完成之后,在执行下一个宏任务周期
 
宏任务:所有的运行环境提供的异步任务
微任务:所有的语言自带的异步任务

什么是异步加载?异步加载和延迟加载有什么区别?

异步加载时相对于同步加载而言的,我们平常书写的代码就是同步加载,代码自上而下执行,是阻塞式的,而异步加载是非阻塞式的,在执行同步代码时,并不会阻塞我后续代码的执行,(例如定时器,发送 ajax 请求),而延迟加载则是一开始并不加载,在我需要的时候再进行加载(例如图片的懒加载)

异步解决方法

(1)回调函数callback

(2)Promise

(3)Generator

(4)async/await

垃圾回收机制

js 会自动的进行垃圾回收,就是那些无用的代码和运行任务会在结束之后从内存中清理出来。js 中的垃圾回收使用的是标记清除法

节流和防抖
防抖:在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时(本质是一个定时器)。

例如:搜索框的联想功能,不断输入值的时候,使用防抖来节约资源。(短信验证码、提交表单、resize 事件等)

节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

例如:scroll 事件,单位时间后计算一次滚动位置,input 事件(上面提到过),播放事件,计算进度条

两者的共同点:

函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。

函数防抖是某一段时间内只执行一次,而函数节流是单位时间执行一次。

回流和重绘

回流一定会触发重绘,但是重绘不一定会引起回流

改变页面布局或者大小尺寸的时候会引起回流,反之就是重绘

重绘:当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新 ,UI 层面, 例如改变元素颜色

回流:又叫重排(layout)。当元素的尺寸、结构或者触发某些属性时,浏览器会重新渲染页面,称为回流

猜你喜欢

转载自blog.csdn.net/weixin_47818125/article/details/128551409