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 地址查找服务器,开始请求数据
- 服务器返回数据,浏览器开始解析
- 浏览器再一次请求页面中使用的资源文件
- 解析展示整个页面
浏览器渲染引擎的工作原理和工作流程?
-
解析 HTML 文档,构建 DOM 树(DOM 节点树。
-
解析 CSS 文档,生成 CSS 规则树。
-
合并 DOM 树和 CSS 规则树,生成渲染树 render 树。
-
布局 render 树,计算每个元素的大小,位置等信息(重排会走这一步)。
-
绘制 render 树,绘制页面的像素信息,(根据 render 树上每个节点的几何属性计算每个节点的像素数,重绘会走这一步)
-
浏览器会将各层节点的像素信息发给 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 8 和 9 需要通过 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)。当元素的尺寸、结构或者触发某些属性时,浏览器会重新渲染页面,称为回流