写在一篇超出字数限制了，只能分成两篇了

1、 Vue与Angular以及React的区别

▍Angular

框架比较成熟完整，过于庞大，上手难；

指令以ng-xxx开头；由谷歌开发和维护；

版本1比较适合PC端开发，版本2在往移动端靠；

不支持低版本浏览器；内置指令和自定义指令；

内置过滤器和自定义过滤器；支持双向数据绑定；

▍Vue

它是一个轻量级框架，其核心库只关注视图层，简单小巧、易学易上手；

指令以v-xxx开头；个人维护项目；适合于移动端开发；不支持低版本浏览器；

内置指令和自定义指令；内置过滤器和自定义过滤器；支持双向数据绑定；

使用DOM模板。中心思想：一切都是组件，组件实例之间可以嵌套；核心库不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；基于依赖追踪的观察系统，并且异步队列更新。

▍React

依赖虚拟DOM；采用特殊的JSX语法；中心思想：一切都是组件，组件实例之间可以嵌套；核心库不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。

2、请描述一下你对webpack的理解？

Webpack Webpack 是一个项目打包工具

可以压缩代码和图片，把浏览器识别不了的代码转化为能识别的，可以启动一个热加载服务器 配置跨域、路径别名、打包分析、cdn映入、去掉console.log、单独打包第三方模块、ie兼容、eslint规范、图片压缩

3、vue2对比vue3

最大的区别就是： Vue2使用选项类型API（Options API）对比Vue3 合成型API（Composition API）

双向数据绑定原理发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：

可直接监听数组类型的数据变

监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升

可直接实现对象属性的新增/删除

默认使用懒加载

在2.x版本里。不管数据多大，都会在一开始就为其创建观察者，在数据很大时，就会造成性能的问题。在3.x中，只会对渲染出来的数据创建观察者，而且3.x的观察者更高效。

3.0新加入了TypeScript以及PWA支持

生命周期有了一定的区别

Vue2--------------vue3

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。

activated -> onActivated 组件卸载完成后执行的函数

deactivated -> onDeactivated

4、git命令

git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)

git status 查看文件状态

git add 文件列表追踪文件

git commit -m 提交信息向仓库中提交代码

git log 查看提交记录

1.分支明细

（1）主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。

（2）开发分支（develop）：作为开发的分支，基于 master 分支创建。

（3）功能分支（feature）：作为开发具体功能的分支，基于开发分支创建

2.分支命令

1）git branch 查看分支

（2）git branch 分支名称创建分支

（3）git checkout 分支名称切换分支

（4）git merge 来源分支合并分支 (备注：必须在master分支上才能合并develop分支)

（5）git branch -d 分支名称删除分支（分支被合并后才允许删除）（-D 强制删除）

3.暂时保存更改 （1）存储临时改动：git stash

（2）恢复改动：git stash pop

git怎么解决多人冲突？：

是当前修改是左箭头方向，传入的是右箭头的方向，

中间用等于号分割，等号上边是当前修改（本地），下边是传入的修改（线上的代码）。

两人同时提交可能会出现冲突，解决办法是手动修改冲突

5、前端有哪些页面优化方法?

- 减少 HTTP请求数
- 从设计实现层面简化页面
- 合理设置 HTTP缓存
- 资源合并与压缩
- 合并 CSS图片，减少请求数的又一个好办法。
- 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
- 多图片网页使用图片懒加载。
- 在js中尽量减少闭包的使用
- 尽量合并css和js文件
- 尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
- 减少对DOM的操作
- 在JS中避免“嵌套循环”和 “死循环”
- 尽可能使用事件委托（事件代理）来处理事件绑定的操作
- 浏览器缓存
- 防抖、节流
- 资源懒加载、预加载
- 开启Nginx gzip压缩
三个方面来说明前端性能优化
一： webapck优化与开启gzip压缩
    1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件
    其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'
    2.文件采用按需加载等等
    3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
    accept-encoding:gzip
    4.图片优化，采用svg图片或者字体图标
    5.浏览器缓存机制，它又分为强缓存和协商缓存
二：本地存储——从 Cookie 到 Web Storage、IndexedDB
    说明一下SessionStorage和localStorage还有cookie的区别和优缺点
三：代码优化
    1.事件代理
    2.事件的节流和防抖
    3.页面的回流和重绘
    4.EventLoop事件循环机制
    5.代码优化等等

node，网络

1、什么是axios

基于promise的http库，可以用在浏览器和node.js，支持promiseAPI，客户端支持防御xsrf

2、Node是什么（别看这么简单，有的人一问就懵）

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。

浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境

Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境

3、模块化的意义

一句话：降低软件的复杂性。使其可控，可维护，可扩展。

一个功能就是一个模板，多个模板可以组成完整应用，抽离一个模板不会影响其他功能的运行

4、网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。

5、为什么要用node

简单强大，轻量可扩展。

简单体现在node使用的是javascript,json来进行编码，强大体现在非阻塞IO,可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问，轻量体现在node本身既是代码，又是服务器，前后端使用统一语言;可扩展体现在可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件。

6、node中的异步和同步怎么理解?

node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的．

7、什么是npm？Npm的使用场景？

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。

使用场景：

a. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

b. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

c. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

8、get与post请求有什么区别

get是从服务器上获取数据，post是向服务器传送数据。

POST比GET安全，因为数据在地址栏上不可见。

get方式提交的数据最多只能有1024字节，而post则没有此限制。

GET使用URL或Cookie传参。而POST将数据放在request BODY中。

GET与POST都有自己的语义，不能随便混用。

据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基，本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。post 发送两次，get 只发送一次。

并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

ajax

什么是ajax？ajax有什么优缺点？

ajax不是语言，ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

优点

1、最大的一点是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。

缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试

原生Ajax的创建过程

1.创建xhr 核心对象
var xhr=new XMLHttpRequest();

2.调用open 准备发送
参数一：请求方式
参数二: 请求地址
参数三：true异步，false 同步
xhr.open('post','http://www.baidu.com/api/search',true)

3.如果是post请求，必须设置请求头。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

4.调用send 发送请求 （如果不需要参数，就写null）
xhr.send('user=tom&age=10&sex=女')

5.监听异步回调 onreadystatechange
判断readyState 为4 表示请求完成
判断status 状态码 为 200 表示接口请求成功
responeseText 为相应数据。字符串类型。
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){ 
        if(xhr.status==200){
            console.log(xhr.responseText);
            var res=JSON.parse(xhr.responseText);
            console.log(res);
            if(res.code==1){
            modal.modal('hide');
           location.reload();
       }
    }
            
            
备注：如果是post请求，想要传json格式数据。
设置请求头

1.xhr.setRequestHeader('Content-Type', 'application/json')

open发送数据
2.xhr.open({_id:xxx,user:xxxx,age:xxxx})

web安全及防护

1.XSS攻击原理：

XSS(Cross-Site Scripting，跨站脚本攻击) 是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，

session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。

XSS避免方式：

url参数使用encodeURIComponent方法转义

尽量不是有InnerHtml插入HTML内容

使用特殊符号、标签转义符。

2.CSRF攻击（跨站请求伪造）：

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

CSRF避免方式：

添加验证码

使用token

服务端给用户生成一个token，加密后传递给用户

用户在提交请求时，需要携带这个token

服务端验证token是否正确

3.SQL注入攻击

就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。

解决：表单输入时通过正则表达式将一些特殊字符进行转换

`4、DDoS攻击`

DDoS又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。

解决：

限制单IP请求频率。

防火墙等防护设置禁止ICMP包等

检查特权端口的开放

使用基于token的登录流程

客户端使用用户名跟密码请求登录

服务端收到请求，去验证用户名与密码

验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里

客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

状态码

常见http状态码分类：

    200响应成功
    301永久重定向
    302临时重定向
    304资源缓存
    403服务器禁止访问
    404服务器资源未找到
    500 502服务器内部错误
    504 服务器繁忙
    1xx Informational（信息状态码）      接受请求正在处理
    2xx Success（成功状态码）            请求正常处理完毕
    3xx Redirection（重定向状态码）      需要附加操作已完成请求
    4xx Client Error（客户端错误状态码）  服务器无法处理请求
    5xx Server Error（服务器错误状态码）  服务器处理请求出错

浏览器从输入url到渲染页面，发生了什么？

这玩意一定要说全了装逼

用户输入阶段 合成 URL：浏览区会判断用户输入是合法 URL，比如用户输入的是搜索的关键词，默认的搜索引擎会合成新的，如果符合url规则会根据url协议，在这段内容加上协议合成合法的url

查找缓存 网络进程获取到 URL，先去本地缓存中查找是否有缓存资源，如果有则拦截请求，直接将缓存资源返回给浏览器进程；否则，进入网络请请求阶段；

DNS 解析： DNS 查找数据缓存服务中是否缓存过当前域名信息，有则直接返回；否则，会进行 DNS 解析返回域名对应的 IP 和端口号，如果没有指定端口号，http 默认 80 端口，https 默认 443。如果是 https 请求，还需要建立 TLS 连接；

建立 TCP 连接： TCP 三次握手与服务器建立连接，然后进行数据的传输；（三次握手开喷） 发送 HTTP 请求： 浏览器首先会向服务器发送请求行，它包含了请求方法、请求 URI 和 HTTP 协议的版本；另外还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核，请求域名；

服务器处理请求： 服务器首先返回响应行，包括协议版本和状态码，比如状态码 200 表示继续处理该请求；如果是 301，则表示重定向，服务器也会向浏览器发送响应头，包含了一些信息； 页面渲染:

查看响应头的信息，做不同的处理，比如重定向，存储cookie 看看content-type的值，根据不同的资源类型来用不同的解析方式 浏览器渲染原理直接开干..... 浏览器将获取的HTML文档解析成DOM树。处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

断开 TCP 连接：

数据传输完成，正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive，TCP 就会一直保持连接。

网络安全、HTTP协议

TCP UDP 区别

1.TCP向上层提供面向连接的可靠服务，UDP向上层提供无连接不可靠服务。
2.虽然 UDP 并没有 TCP 传输来的准确，但是也能在很多实时性要求高的地方有所作为
3.对数据准确性要求高，速度可以相对较慢的，可以选用TCP

Http和Https区别（高频）

1.`HTTP` 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
2.`HTTP` 是不安全的，而 HTTPS 是安全的
3.`HTTP` 标准端口是80 ，而 HTTPS 的标准端口是443
4.`在OSI` 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
5.`HTTP` 无法加密，而HTTPS 对传输的数据进行加密，证的网络协议，安全性高于HTTP协议。
6.`HTTP`无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书，一般免费证书少，因而需要一定费用。

GET和POST区别（高频）

1.GET在浏览器回退不会再次请求，POST会再次提交请求
2.GET请求会被浏览器主动缓存，POST不会，要手动设置
3.GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
4.GET请求在URL中传送的参数是有长度限制的，而POST没有限制
5.GET参数通过URL传递，POST放在Request body中
6.GET参数暴露在地址栏不安全，POST放在报文内部更安全
7.GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
8.GET产生一个TCP数据包；POST产生两个TCP数据包
Ge和post的选择：
1.私密性的信息请求使用post（如注册、登陆）。
2.查询信息使用get。

三次握手和四次挥手

三次握手：

第一次：建立连接时，客户端发送syn包到服务器，等待服务端确认

第二次：服务器收到syn包，必须确认客户的syn，同时也发送一个syn包，即syn+ACK包

第三次：客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕，客户端和服务端连接成功，完成三次握手

四次挥手：

第一次：浏览器发送完数据后，发送fin请求断开连接

第二次：服务器发送ack到客户端，确认客户端的断开请求

第三次：服务器请求断开fin的请求

第四次：客户端确认服务器的断开ack

POST的content-type几种方式

POST 方法中对发送数据编码的方式，也就是 Content-Type 有四种方式，其中默认是 application/x-www-form-urlencoded，最方便的是 application/json 。

四种方式包括：

application/x-www-form-urlencoded （URL encoded）

multipart/form-data （键值对型数据）

application/json (Json 类型数据)

text/xml （xml）传统的ajax请求时候，Content-Type默认为"文本"类型。

传统的form提交的时候，Content-Type默认为"Form"类型。

axios传递字符串的时候，Content-Type默认为"Form"类型。

axios传递对象的时候，Content-Type默认为"JSON"类型

http1.0、http1.1、http2.0的区别

1和1.0相比，1.1可以一次传输多个文件

http1.x解析基于文本，

http2.0采用二进制格式，新增特性多路复用、header压缩、服务端推送(静态html资源)

浏览器缓存的作用

浏览器缓存的作用：减少冗余的数据传输，节省网络带宽，更快加载页面，缓存降低了服务器的要求，有更快的响应

http如何实现缓存

个人理解：

强制缓存：浏览器在加载资源的时候，会根据本地缓存中的headers中的信息(expires,cache-control)是否要强缓存，如果命中的话，则会使用缓存中的资源，否则继续发送请求。

协商缓存：客户端向服务端发送请求，服务端检测是否有对应的标识，如果没有服务端会返回客户端对应的标识，客户端在下次请求把标识带过去服务器会验证标识，如果通过了，则会响应304，告诉浏览器读取缓存，如果没有通过则返回请求的资源。

两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

基于对比缓存，不管是否使用缓存都需要向服务器发送请求，那么还用缓存干什么？服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端。

缓存的资源去哪里了

memory cache 将资源文件缓存到内存中，下次请求读取的是内存中的
disk cache 将资源存到硬盘中，下次请求从硬盘中读取

http报文

HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。报文信息主要分为两部分：header,数据主体部分(body)

能不能说一说浏览器的本地存储？各自优劣如何？

浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。

共同点: 都是保存在浏览器端、且同源的

不同点：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

存储大小限制也不同，

cookie数据不能超过4K，sessionStorage和localStorage可以达到5M

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

localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；

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

作用域不同

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在

cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

2022年最新前端面试题（二）

1、 Vue与Angular以及React的区别

2、 请描述一下你对webpack的理解？

3、vue2对比vue3

4、git命令

5、前端有哪些页面优化方法?

node，网络

1、什么是axios

2、Node是什么（别看这么简单，有的人一问就懵）

3、模块化的意义

4、网站的组成

5、为什么要用node

6、node中的异步和同步怎么理解?

7、什么是npm？Npm的使用场景？

8、get与post请求有什么区别

ajax

什么是ajax？ajax有什么优缺点？

原生Ajax的创建过程

web安全及防护

1.XSS攻击原理：

2.CSRF攻击（跨站请求伪造）：

3.SQL注入攻击

4、DDoS攻击

使用基于token的登录流程

状态码

浏览器从输入url到渲染页面，发生了什么？

网络安全、HTTP协议

TCP UDP 区别

Http和Https区别（高频）

GET和POST区别（高频）

三次握手和四次挥手

POST的content-type几种方式

http1.0、http1.1、http2.0的区别

浏览器缓存的作用

http如何实现缓存

缓存的资源去哪里了

http报文

能不能说一说浏览器的本地存储？各自优劣如何？

2、请描述一下你对webpack的理解？

`4、DDoS攻击`