前端开发面试题总结（个人向）

1.防抖和节流

-节流：在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

-防抖：前面所有的触发都被取消，最后一次执行在规定的时间之后才触发。也就是如果连续快速的触发只会执行一次

-lodash插件：封装函数的防抖与节流业务(debounce防抖，throttle节流)

2.Http和Https区别

-http是超文本传输协议，信息是明文传输，https则是具有安全性的SSL/TLS加密传输协议。

-使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443。

-http的连接很简单，是无状态的；https协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

3.Cookie、sessionStorage、localStorage的区别

-cookie 客户端请求时携带cookie发送给服务器；sessionStorage、localStorage不会自动发送给服务器，存储在本地浏览器

-cookie容量小，4k；sessionStorage、localStorage容量大 4、5M。

-存储时间：cookie在过期前一直有效；sessionStorage在关闭浏览器窗口前有效；localStorage可长期存储。

-cookie作用：1.保存用户登录状态（记录账户密码） 2.跟踪用户行为（记录上次访问时所在地等） 3.定制页面（保存用户个性化的内容）

4.WEB前端性能优化

-减少HTTP请求，每个请求都需要占用带宽，由于浏览器进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器需要分批进行请求，会增加用户的等待时间。

-减少DNS查找，DNS查找是需要时间的，而且它们通常都是只缓存一定的时间，所以应该尽可能地减少DNS查找的次数。

-设置HTTP/AJAX缓存，将请求过的进行缓存，使下次请求任务量减少。

-避免重定向

-延迟加载组件（图片懒加载、路由组件懒加载等）

-减少DOM元素数量

5.重绘和回流

-重绘：当节点需要更改外观而不会影响布局的就叫称为重绘（改变color等）

-回流：元素位置改变或者几何属性改变会引起回流。

-重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。

-回流会引起重绘，重绘不一定引起回流

6.布局方式

flex弹性盒子（弹性布局）；
rem布局（一般都是flex+rem使用的比较多）；
响应式布局（响应式布局的原理，和适配方案必修掌握）；
固定布局 / 流式布局（百分比布局）/ 浮动布局 / 定位布局；

7.TCP和UDP的区别

1、连接方面区别

TCP面向连接（如打电话要先拨号建立连zhi接）。

UDP是无连接的，即发送数据之前不需要建立连接。

2、安全方面的区别

TCP提供可靠的服务，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达。

UDP尽最大努力交付，即不保证可靠交付。

3、传输效率的区别

TCP传输效率相对较低。

UDP传输效率高，适用于对高速传输和实时性有较高的通信或广播通信。

4、连接对象数量的区别

TCP连接只能是点到点、一对一的。

UDP支持一对一，一对多，多对一和多对多的交互通信。

8.解决跨域问题

-跨域：浏览器的同源策略（IP地址、域名、端口）造成的。

解决方法：

1.CORS,设置Access-Control-Allow-Origin,如果使用nodejs和express，那么可以添加cors中间件，cors默认允许所有跨域请求，如果需要指定域名才能访问，可以配置origin字段

2.配置前端

在前端开发环境中配置代理，中转请求，因为跨域是浏览器的保护机制，如果脱离了浏览器发送请求，那么就不会收到浏览器跨域保护机制的影响，这样可以使用中转服务器来发送请求和接收响应，前端只需要请求这个中转服务器，并且保持和中转服务器URL保持一致就可以了，一般脚手架都支持配置本地代理，比如vue-cli中vue.config.js里配置devSever

3.配置服务端

第三种适用于产品环境，开发服务器不支持代理的情况下，可以手动创建一个中转服务器来代理请求，比如利用express创建一个服务器，负责发送前端页面，并代理请求，当然也可以使用nginx服务端的部署工具进行代理的配置

4.JSONP 只能解决get跨域问题

9.Promiss方法

10.vue的$nexttick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了

11.宏任务，微任务

常见的宏任务有：script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有：process.nextTick(nodejs),Promise.then(), MutationObserver

12.AJAX的优点

-局部刷新：不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页

-异步提交：客户端发出一个请求后，无需要等待服务器响应结束，就可以发出第二个请求。

ajax请求：

<script>//创建对象const xhr = new XMLHttpRequest();  //初始化,设置请求方法和url ('方法','目标对象')xhr.open('GET','url');    //设置请求体xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  //3.发送xhr.send(); xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status <= 300){console.log(xhr.response);}}}
</script>

13.transform（变形）

-transform-origin 设置原点，默认为对象的中心点

-transform的4个属性 rotate(旋转） scale(缩放) translate(平移) matrix(缩放)

14.position

1.position:relative 相对定位，相对于元素原先的位置，通过设置top bottom left right 偏移量来使元素偏移，没有脱离文档流，移动位置原先位置依然占据空间。

2.position:absolute 绝对定位 1.相对于浏览器左上角；2.相对于开启position最近的父元素去移动。会脱离文档流，移动后原先位置不再占据位置。

3.position:fixed 固定定位特殊的绝对定位与绝对定位不同的是：fixed永远相对于浏览器视口去移动。

4.position:sticky 粘滞定位，在元素到达某一位置时，将其固定。

5.position:static 默认定位，没有开启定位

15.块级元素水平垂直居中方法

.box1 {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}

<body><div class='box'></div>
</body>
<style>body{height:100vh;display:flex;justify-content:center;align-items:center;}.box{width:200px;height:200px;bgc:pink;}
</style>

16.面试 vuex原理、如何更改数据; vue中路由守卫生命周期; 弹性布局; Promise.all Promise.race; Promise异步方法，变为同步方法(async/await) ; 异步操作都有什么；数组去重的方法；闭包概念与作用

17.flex布局

display:flex 开启flex布局

flex-direction(主轴方向): row/row-reverse/column/column-reverse

flex-wrap: nowrap(不换行，压缩宽度)/wrap/wrap-reverses

justify-content(主轴元素对齐方式): flex-start/flex-end/center/space-between/space-around/space-evenly

space-between 两端对齐，靠着容器壁，剩余空间平分

space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配

space-evenly 平均对齐，不靠着容器壁，剩余空间平分

align-items(在交叉轴上对齐方式):flex-start/flex-end/center/baseline/stretch

flex-grow

flex-basis

18.闭包作用

1.使函数内部变量在执行完后依然保存在内存中，延长局部变量的生命周期

2.使函数外部可以操作（读写）函数内部变量

19.vue中导航守卫钩子函数及生命周期

1.全局守卫钩子函数

全局前置守卫 beforeEach(to,from,next)

全局解析守卫 beforeResolve(to,from,next)

全局后置钩子 afterEach(to,from)

2.路由独享守卫

路由独享守卫 beforeEnter(to,from,next)

3.组件守卫

beforeRouteEnter(to,from,next)

beforeRouteUpdate(to,from)

beforeRouteLeave(to,from)

20.Promise.all Promise.race

Promise.all(iterable)

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

21.数组去重方法

1.set

<script>let arr = [1,1,2,2,3,3,4,4];let afterSet = new Set(arr);  //此时newSet已没有重复元素，但是是一个集合let newArr = [...afterSet];console.log(newArr);        //[1,2,3,4]
</script>

2.splice

/*splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素,从而修改 arrayObj。返回值是 一个由所移除的元素组成的新 Array 对象*/
<script>let arr = [1,1,2,2,3,3,4,4];for(let i=0; i<arr.length; i++){for(let j=i+1; j<arr.length; j++){if(arr[i]===arr[j]){arr.splice(j,1);}}}console.log(arr);    //[1,2,3,4]
</script>

3.indexOf()

<script>let arr = [1,1,2,2,3,3,4,4];let newArr = [];for(let i=0; i<arr.length; i++){if(newArr.indexOf(arr[i])===-1){newArr.push(arr[i]);}}console.log(newArr);      //[1,2,3,4]
</script>

22.BFC作用及实现

1.避免外边距重叠

为每个div包一个container 并触发overflow:hidden;

<style>.container {overflow: hidden;}.box {width: 200px;height: 200px;margin: 100px;background-color: red;}
</style>
<body><div class="container"><div class="box"></div></div><div class="container"><div class="box"></div></div>
</body>

2.清除浮动

通过设置overflow:hidden;可以清除box中float

<style>.container {border: 2px solid red;overflow: hidden;}.box {width: 200px;height: 200px;background-color: blue;float: left;}
</style>
<body><div class="container"><div class="box"></div></div>
</body>

3.阻止元素被浮动元素覆盖

给被覆盖的元素添加 overflow:hidden; 即可使被两元素分开

<style>.normal {width: 200px;height: 200px;background-color: red;overflow: hidden;}.float {width: 100px;height: 100px;background-color: blue;float: left;}
</style>
<body><div class="float"></div>    <div class="normal"></div>
</body>

23.单页面和多页面的区别

单页面：只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多页面：就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面优点： 1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小 2，前后端分离；

单页面缺点：1，不利于seo 2，初次加载时耗时多；

23.事件委托

事件委托，简单的来说，就是把一个元素的响应事件的函数委托到另一个元素。

24.响应式布局

响应式页面，是指一套页面，能够适配多种终端，比如宽屏pc电脑，平板，手机