前端开发岗面试题（持续更新...）

记录一下所见所面的一些面试题！！！o(*￣▽￣*)ブ

1、flex布局问题

tip:flex布局后，子元素的float、clear和vertical-align属性将失效

属性：flex-direction(排序方向)、flex-wrap(换行方向)、justify-content(水平对齐方向)、align-items(垂直对齐方向)、align-content(多行情况下垂直对齐方式)

2、vue父子组件的加载顺序

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

3、深拷贝和浅拷贝

深拷贝增加了一个指针并申请了一个新的内存是这个指针指向新的内存；

深拷贝实现方式：1）json方法：JSON.parse(JSON.stringfy(obj))

                             2）for in实现遍历和复制

                             3）array.prototype.forEach

浅拷贝增加了指针，指向了一个已存在的内存地址。

两者的根本区别在于是否真正获取一个对象的复制实体，而不是引用。

4、JS的循环机制

js事件分为同步任务和异步任务，遇到同步任务就放在执行栈中执行，碰到异步任务放到任务队列中，等执行栈执行完毕后，再去执行任务队列中的事件，主线程重复前面的步骤就称为循环机制

5、浏览器缓存

定义：浏览器保存通过http获取的所有资源称为浏览器缓存

过程：浏览器缓存分为强制缓存和协商缓存，强制缓存优先于协商缓存进行，若强制缓存生效则直接使用缓存，若不生效则进行协商缓存，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求缓存失效，重新获取请求结果，再存入浏览器缓存中，生效则返回304继续使用缓存。

优点：1）减少冗余数据传输

           2）减少服务器负担，提升网站性能

           3）加快客户端加在网页速度

拓展：DNS缓存-域名系统、CDN缓存-内容分发网络

具体请看：https://www.cnblogs.com/chengxs/p/10396066.html

6、this的指向

普通函数：this指向window

构造函数：this指向实例对象

对象方法调用：this指向对象方法所属的对象

事件绑定方法：this指向绑定事件的对象

定时器函数：this指向window

tip:改变this的指向可以由call()、apply()、bind()

     实现案例请看：https://blog.csdn.net/qq_45219069/article/details/95378052

7、解决跨域问题

定义：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同都是跨域

解决：1）Jsonp

           2）iframe

           3）window.name

           4）window.postmessage

           5）服务器上设置代理页面

具体请看：https://blog.csdn.net/tjcjava/article/details/76468225

8、如何实现浏览器性能优化

      1）减少http请求次数

      2）前端模板js+数据，减少由于html标签导致的带宽浪费

      3）用innerHTML代替dom操作，减少dom操作次数，优化js性能

      4）减少行内样式

      5）避免使用css表达式

      6）图片预加载

9、vue路由的两种模式

hash：#会出现在url上，但不会被包括在http请求中，对后端没有影响，改变hash不会重新加载页面

history：利用pushstate()和replacestate。该模式下url必须和食集像后端发起请求的url一致，否则会返回404错误。

10、内存泄漏

定义：内存泄漏是指应用城虚不需要的内存，由于某种原因内存没有返回到操作系统或可用内存池中。内存占用高影响系统性能，重则导致进程崩溃。

原因：1.js 意外的全局变量、闭包引起的内存泄漏、没有清理的dom元素引用、被遗忘的定时器或回调

           2.vue 监听window/body等事件没有解绑、绑在eventbus的事件没有解绑、echarts、v-if产生的内存泄漏

解决：es6推出的新数据结构webset和weakmap，可以使对象未被再次引用时，垃圾回收机制会自动回收该对象所占用的内存。

详细解答：https://juejin.cn/post/6914092198170460168

11、get和post的区别

get一般用于信息获取，使用url传递参数，对于所发送的信息数量限制在2000个字符

post一般用于修改服务器上的资源，对发送信息数量没有限制

tip：post应用场景-无法使用缓存文件、向服务器发送大量数据、发送包含位置字符的用户输入更稳定可靠。

12、浏览器输入url到页面显示经历的过程

       1)浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到下一步操作。

       2)在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

       3)浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

       4)握手成功后，浏览器向服务器发送http请求，请求数据包。

       5)服务器处理收到的请求，将数据返回至浏览器

       6)浏览器收到HTTP响应

       7)读取页面内容，浏览器渲染，解析html源码

       8)生成Dom树、解析css样式、js交互

       9)客户端和服务器交互

       10)ajax查询

13、computed和watch的区别

如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。(购物车)

如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。（搜索数据）

14、vuex的应用场景

vuex是一个状态管理器，通常用于数据和组件分离，需要分别处理的情况。比如：组件会被销毁（弹窗关闭后保留内容）、组件基于数据而创建（用户权限配置）、多对多事件（页面主题风格）。

15、面向对象的理解

面向对象是将现实问题构建关系，然后抽象成类，给类定义属性和方法后，再将类实例化成实例，通过访问实例的属性和调用方法来进行使用。

16、css3的新特性

border-color、border-image、border-radius、box-shadow、background-size、background-origin、background-clip、text-shadow、word-wrap（自动换行）、transform、animation（动画效果）、transition

17、vue的nextTick使用

定义：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。（当数据更新了，在dom中渲染后，自动执行该函数）

应用场景：

1. Vue生命周期的created钩子函数进行dom的操作一定要放在nexttick的回调函数中
2. 使用第三方插件，希望在cue生成的某些dom动态发生变化时在nexttick的回调中执行重新应用插件的方法
3. 项目中改变dom元素的数据后基于新的dom要做的操作，即更改数据后立即使用js操作新的视图时

18、vue生命周期的理解

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有;

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染;

更新前/后：当data变化时，会触发beforeUpdate和update方法;

销毁前/后：在执行destory方法后，对data的改变不会再触发周期函数。说明此时vue实例已经解除了事件监听和dom的绑定，但dom结构依然存在。

19、节流和防抖

防抖：触发高频事件后N秒内函数只会执行一次，如果N秒内高频事件被再次触发，则重新计算时间。

节流：高频事件触发，但在N秒内只会执行一次，所以节流会稀释函数的执行频率。

20、delete和vue.delete删除数组的区别

delete只是被删除的元素变成了empty、undefined，其他的元素键值还是不变

vue.delete直接删除了数组，改变了数组的键值

21、vue中的data为什么是一个函数

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件就会返回一份新得data，类似于给每一个组件实例创建一个私有的数据空间，让各个组件实例维护格自的数据。而单纯的写成对象形式，就使得所有的组件共用了一份data，就会造成一个变了全都改变了的结果。

22、vue中的key有什么作用

key的作用让每个item有一个唯一的识别身份，为了vue能精准的追踪到每一个元素，高效的更新虚拟dom。

23、元素水平垂直居中的方法

1）使用 flex 弹性布局 display:flex；justify-content: center；align-items: center;

2）transform变形  transfrom:translate((父宽-子宽子)/2/宽%,(父高-子高)/2/高%)

3）position定位 父：fixed 上下左右0 子：fixed 上下左右0 margin：auto

4）transform+position 父：fixed 上下左右0 子：fixed 上左50% transform: translate(-50%,-50%)。

具体实现：https://blog.csdn.net/weixin_44135121/article/details/91430443

 

（--------------------------------------先整到这，等我有时间再继续整理吧------------------------------------------------）