目录
一：html及相关
二：css及相关
三：js及相关
四：vue及相关
五：react及相关
六：性能及优化
七：安全及相关
八：自我介绍及项目描述
一：html及相关
-
讲讲TCP三次握手、四次挥手，为什么要三次握手、四次挥手？
TCP三次握手：为了确保客户端和服务端之间能正常的传递数据
1.客户端向服务端申请建立联系
2.服务端接收到客户端的消息，同意客户端传递数据
3.客户端收到消息，并回复服务端已接受到可以传递数据的通知。
四次挥手：为了正常的断开数据
1.客户端向服务器发器断开申请
2.服务端接收到申请，并且告知已经接受到断开申请
3.等待数据传递接受，服务端向客户端告知准备断开
4.客户端接收到服务端的确认报文，等待2msl以后断开连接
-
说说从输入url到页面展示出来的整个过程。
1.用户在浏览器中输入url地址
2.查询浏览器中的url地址缓存，如果没有解析过，则新建dns域名查找
3.三次握手建立连接
4.执行http请求数据
5.http服务器返回静态资源给客户端
6.四次挥手断开连接
7.浏览器执行页面的绘制(
解析html资源，构建DOM Tree,
解析css资源，构建CSS Rule Tree
解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置 即回流
绘制页面
) -
什么是跨域？为什么会出现跨域？如何解决跨域问题？jsonp原理 是什么？
什么是跨域：当前页面请求的接口与当前页面的地址在协议，域名，端口上有任意一项的不同，就是跨域
为什么会出现跨域：浏览器为了保证安全，出现的同源协议策略
如何解决跨域问题：
1.cors ，'Access-Control-Allow-Origin', '*'
2.使用nginx反向代理（服务器之间是没有同源策略的）
3.Jsonp: 利用script标签可以跨域请求的原理，将回调函数当成参数拼接在url上，缺点就是只能get请求 -
http有哪些方法？
get , post ， put , delete
-
get和post的区别
1.get用于信息的获取，他是安全的（数据库安全），数据在url栏中不可见。post用于修改服务器上的资源，只有https才能加密安全
2.get请求可以被缓存，post请求不可以被缓存
3.get数据长度有限制，post长度无限制
4.get通过url传递参数，post放在request body中 -
讲讲http缓存机制。
浏览器请求数据都是优先请求缓存中的数据，拿不到在去向服务器请求
强制缓存：在强缓存下，客户端获取缓存中的数据，若当前数据未失效，则直接取用当前缓存中的数据。若缓存失效，则继续向服务器发起请求，将请求到的数据更新入缓存。
对比缓存：在对比缓存下，客户端也会优先访问缓存中的数据，但是同时会继续向服务发送消息，对比当前数据是否发生 变更，若未变更直接取用缓存中的数据
若发生变更，则将新的数据存入缓存并取用
二：css及相关
-
如何实现一个盒子水平垂直居中?
1.利用定位（常用方法,推荐）
2.利用 margin:auto;
3.利用 display:table-cell
4.利用 display：flex;设置垂直水平都居中
5.计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
6.利用 transform -
CSS选择器的优先级及CSS权重如何计算?
！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性
-
如何解决margin“塌陷”？
外边距塌陷共有两种情况：
1：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给
margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况
的方法为：两个外边距不同时出现
2：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生
上边距，父子元素会进行粘连。解决方案
1、为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透
明：border：1px solid transparent）；
2、为父盒子添加 overflow：hidden；
3、为父盒子设定 padding 值；
4、为父盒子添加 position：fixed；
5、为父盒子添加 display：table；
6、利用伪元素给父元素的前面添加一个空元素.father::before {content:''; display:table} -
::before和::after中双冒号和单冒号有什么区别、作用？
区别：
在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语
法表示伪元素
单冒号（:）用于 CSS3 的伪类
双冒号（::）用于 CSS3 的伪元素
想让插入的内容出现在其它内容前，使用::before，否则，使用::after；
在代码顺序上，::after 生成的内容也比::before 生成的内容靠后作用：
::before 和::after 的主要作用是在元素内容前后加上指定内容伪类与伪元素都是用于向
选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在开始和末尾
伪类与伪元素优先级分别与类、标签优先级相同 -
CSS的引入方式有哪些？ink和@ import的区别是什么？
行内式是指将样式写在元素的 style属性内。
内嵌式是指将样式写在 style元素内。
外链式是指通过link标签，引入CSS文件内的样式。 -
666
三：js及相关
-
谈谈你对Promise的理解？
1. Promise不仅是一个技术工具，它更代表了一种编程理念的体现，Promise作为一个构造函数，他可以生成具有特定状态的实例，这些状态包括pending（待定）、resolved（成功）、rejected（失败），这种状态管理机制获得异步操作的结果变得可预测和和控。
2.Promise即承诺，后续必须兑现！一旦兑现则不可更改。所以Promise的状态只可更改一次。
3.Promise是对回调函数的一种封装，他改进了异步编程的方式，传统的异步编程往往依赖于回调函数，然而回调函数的嵌套过深，很容易导致代码结构的混乱，形成所谓的回调地狱问题。而Promise则允许我们以同步的方式表达异步操作，从而可以简化代码臃肿以及可读性差的问题。
4.Promise实例可以视为一个状态的展示器，我们可以利用Promise来管理具有状态改变的业务逻辑。结合async、function进一步提升程序的清晰度和便捷性。
5.Promise在前端技术体系中有着广泛的应用，比如Ajax、Fetch API 等等都采用了Promise对象来处理异步操作，因此熟练掌握并合理使用Promise是前端开发者必备的技能。
6.当项目中存在着多个异步操作，并且这些操作之间存在着依赖关系时Promise可以通过链式调用来处理这些操作，使代码更加简洁和易读。比如说在用户登录后我们需要根据用户信息去加载对应的数据，这时我们可以使用Promise的链式调用，确保这些操作按照预期的顺序执行，从而实现业务的连贯性和流畅性。
7.尽管Promise解决了很多问题，但我们不能滥用它，例如在使用Promise.all时，一个失败就全军覆没，这可能导致一些关键性数据的加载失败，影响到整个流程的执行，因此在实际使用中我们通常只在需要确保所有步骤都成功完成后，才进行后续操作的场景下使用Promise.all，如图片预加载功能，还有别嵌套太多。
-
谈谈对原型链的理解
在javascript中，每个对象都有一个[[prototype]]属性，这个属性指向当前对象构造函数的原型。 该对象可以通过该属性（在chrome中表现为__proto__）访问到原型上的属性和方法。 而原型本身也可以拥有该属性，所以就能形成一个链式结构，一直查找到Object
-
.js如何实现继承？
构造函数法：创建一个构造函数A，并在A的原型上添加方法。将构造函数B的prototype指向A创建的实例。此时B构造函数创建的实例就能继承A的方法
Object.create(): 又名函数的委托，需要继承属性的对象A = Object.create(B) B是包含方法的对象
Object.setPrototype(需要被继承的对象,继承者) -
js有哪些数据类型？
基本数据类型：Number, String, null, undefined, Boolean, Symbol
引用数据类型：Object, Array, Error, Date, regPex, Function, set, map
基本数据类型存储在栈中，引用数据类型的地址存储在栈中，数据本身存在堆中