前端常见面试基础问题

一、自我介绍

1.1 姓名、毕业院校(可说可不说)、项目经历、年龄和工作年限少谈

二、vue相关

2.1 路由模式:哈希模式和history模式的区别

1.路径表现的外观上:
在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的
2.本质上:
hash-----虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history -----利用了 HTML5 History Interface 中新增的 history.pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

2.2 vuex的使用

vuex:是一个跟vue配套的集中式状态管理工具,它作用是方便在vue中全局的存取数据方便组件间的通信,使用时通过,vuex.store()方法创建vuex实例,实例中有五个属性,分别是:1.state:定义状态的地方,2.mutations:定义同步更新状态的地方,3.actions:定义异步操作的地方,更改状态需要通过传入的context属性的commit方法,触发mutations中的方法去,修改状态4.getters:相当于vue中的computed,也就是vuex中的计算属性5.modules:为了方便模块化管理,可以在这定义模块,每个模块有自己的状态,在使用时需要加上模块名

2.3 computed和watch的区别

computed:
1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
watch:
1. 不支持缓存，数据变直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，，第一个参数是最新的值；第二个参数是输入之前的值；

watch代码:

2.4 vue-router的实现原理是什么? (是不是浏览器对象的封装)

1.hash ---- 利用URL中的hash（“#”）,hash,只会替换掉url中#以后的路径,而不会管前面的,hash不能对完全相同的url产生变化,所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
2.利用History interface在 HTML5中新增的方法,history会改变整个url就算一样的url还是会产生路由记录(history.pushState API)

2.5 v-model的实现原理

v-model实际是通过v-bind绑定value然后通过v-on定义input事件去更新绑定的值,这样就实现了双向绑定,可以说是一种语法糖

2.6 路由懒加载

通过import()函数去实现
const User = () => import('路由组件路径');

2.7 vue的生命周期,钩子函数

vue的生命周期就是组件从创建到销毁的过程,在这一过程中vue框架内置了一些钩子函数在特定的时候会被触发.
钩子函数:
beforeCreate:进行数据初始化,完成数据劫持observe,给组件配置watcher观察者实例
created:数据初始化完成,此时可以访问data中的数据以及methods中的方法
beforeMount:开始产生虚拟dom,此时真实dom还未产生,所以还无法操作dom
mountd:挂载真实dom,dom渲染完成
beforeUpdate:更新前,状态发生改变后,新旧虚拟dom使用diff算法对比
updated:将对比后的结果渲染到页面,同时页面更新完成
beforeDestrioy:销毁前执行,还是能操作实例,可以移除定时器,释放内存等这些操作
destroyed:销毁完成

2.8 vue组件间的通信

1.父传子通过父组件,在子组件标签上,绑定一个属性:users="users",子组件通过props接收
2.子传父子传父:1.在子组件中通过$emit()方法定义事件,参数1:'自定义事件名',参数2:要传给父组建的参数2.在父组件中通过v-on指令监听自定义事件,然后在监听的回调中取得数据子组件:<button v-for="item in categroies" :key="item.id" @click="getData(item)">{{item.name}}</button>getData(item){//子传父:1.通过自定义事件this.$emit('itemclick',item);}父组件:<cpn @itemclick="getChild"></cpn>//2.在父组件中取得数据getChild(item){console.log(item);}
3.兄弟相传(有吗?)vuex
4.父访问子//通过$refs:需要在子组件上加上ref属性值为子组件名字(例如:cpn),然后通过$refs.设置的名字获取到相应的子组件this.$refs.cpn.showMessage();
5.子访问父//通过$parent访问父组件console.log(this.$parent);
6.访问root组件//访问根组件:通过$rootconsole.log(this.$root);

2.9 vuex持久化的实现

要想实现vuex刷新后数据不丢失,一般使用localStorage来完成,也可以使用vuex-persist插件来完成,它不需要你手动存取storage二十将状态保存至localStorage中

三、js相关

3.1 axios的封装思路

/*
1.为什么要二次封装axios?1.提高网络请求模块的可维护性2.方便集中管理所有的api请求3.方便做同一的请求处理
2.方便不同的环境更换不同的请求地址
*/

3.2 async/await的使用

在异步的方法前定义async,然后使用awati等待返回一个promise对象

3.3 promise的使用场景(由来,怎么用,在项目中解决了什么问题)

1.回调地狱
2.代码的可阅读性
怎么用?1.all([数组]):当all中的所有异步方法执行完毕,返回一个统一的结果2.race([数组]):race是赛跑的意思,异步方法谁先完成,就先then回调谁,其它的异步方法随后执行then回调

3.4 JavaScript 中 call()、apply()、bind() 的用法

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。bind 除了返回是函数以外，它 的参数和 call 一样。当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

3.5 es6的新特性

1.箭头函数
2.解构赋值
3.函数参数默认值
4.模板字符串
5.对象属性简写
6.拓展运算符
7.let,const

3.6 跨域问题

发生的原因:跨域是由于浏览器同源策略而产生的,只要url的请求协议,端口,域名三者有一样不同即为发生了跨域
解决:1.jsonp:只能处理get请求2.代理proxy3.后端配置

3.7 js的数据类型有哪些?

基本数据类型:string,number,null,undefind,boolean,symbol
复杂数据类型:object(数组属于object)

四、css相关

4.1 纯css实现三角形

//实现思路:将div的宽高设为0,让它的边框撑起来三角形的面积,哪边为顶点,就不设哪边,然后不设那边的对边给颜色,其他边透明色
.triangle1{width: 0;height: 0;border-left: 100px solid red;border-top: 50px solid transparent;border-bottom: 50px solid transparent;
}

4.2 实现水平垂直居中

1.flexdisplay:flex;justyfi-content:center;aline-items:center;2.父相子绝-margin父盒子设定宽高和相对定位子盒子设定宽高和绝对定位,top:50%,left:50%,magin:-高度一半 0 0 -宽度一半;3.父相子绝-transform:translate(-50%,-50%);父盒子设定宽高和相对定位子盒子设定宽高和绝对定位,top:50%;left:50%;transform: translate(-50%,-50%);

五、兼容性问题和项目优化

5.1 项目优化

基础的 Web 技术层面的优化:
1.合理使用v-if和v-show
2.computed 和 watch 区分使用场景
3.v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
4.图片资源懒加载
5.路由懒加载
6.浏览器缓存
7.CDN的使用
8.前后端开启gzip压缩,前后端只需要简单配置webpac配置优化:
1.Webpack 对图片进行压缩
2.减少 ES6 转为 ES5 的冗余代码
3.提取公共代码

5.2 seo优化

title标签有利于关键字搜索
h标签(h1)
网站域名

5.3 移动端ios的键盘遮挡问题如何解决

获取设备系统版本,计算键盘遮挡面积,offset移动屏幕

5.4 移动端的齐刘海(刘海屏)如何优化(适配)

 padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);padding-left: constant(safe-area-inset-left);padding-left: env(safe-area-inset-left);padding-right: constant(safe-area-inset-right);padding-right: env(safe-area-inset-right);env()跟constant()需要同时存在，而且顺序不能换。<div id="app" @touchmove.prevent></div>

六、性能相关

6.1 回流和重绘

当请求到html和css后,html会被解析成dom树,css会被解析成样式结构体,然后dom树和样式结构体组合成渲染树,渲染树会计算dom节点的几何信息,这一计算的过程称为回流,而计算完成后,根据渲染树的计算结果完成重绘,所以回流必定重绘,重绘不一定回流,加载页面必定回流一次.
1.添加删除节点会引起回流
2.元素的几何信息(位置和大小)更改会发生回流
3.dom节点的内容发生更改会回流(文本)
4.浏览器的窗口大小发生更改会回流

七、算法题

7.1 给定一个字符串,实现判断字符串中括号是否匹配

匹配:'({[]}[])'不匹配:'{(]}'
思路:栈结构

八、浏览器相关

8.3 tcp的三次握手

tcp的握手其实就是客户端与服务器端建立可靠连接的过程,首先客户端向服务器发送一段tcp报文,服务器端接收并返回一短报文告诉客户端服务器已经收到,随后客户端再发送一段报文表示连接已经建立,三次发送报文的过程就是三次握手,四次挥手是断开连接的过程,原理大同小异.

8.2 从输入url访问服务器,到浏览器渲染完成,中有哪些步骤

步骤:
1.域名解析(DNS解析):将域名解析成ip地址,去寻找服务器
2.客户端向服务器发送消息会向建立TCP连接,需要完成tcp的三次握手,其实就是一个确认是否连接有效的过程
3.连接建立,就可以发送http请求啦
4.服务器收到请求,并返回http报文
5.浏览器接收报文,然后根据报文中的数据,解析生成dom树css树,俩树合成渲染树(rander树),rander树计算几何信息完成回流,随后根据几何信息完成重绘,页面就渲染出来了.

九、项目开发遇到的难点

9.1 移动端商品详情商品参数渲染

的过程,原理大同小异.


### 8.2 从输入url访问服务器,到浏览器渲染完成,中有哪些步骤

步骤:
1.域名解析(DNS解析):将域名解析成ip地址,去寻找服务器
2.客户端向服务器发送消息会向建立TCP连接,需要完成tcp的三次握手,其实就是一个确认是否连接有效的过程
3.连接建立,就可以发送http请求啦
4.服务器收到请求,并返回http报文
5.浏览器接收报文,然后根据报文中的数据,解析生成dom树css树,俩树合成渲染树(rander树),rander树计算几何信息完成回流,随后根据几何信息完成重绘,页面就渲染出来了.

## 九、项目开发遇到的难点9.1 移动端商品详情商品参数渲染9.2 展示商品参数弹出层的高度,需要动态计算

前端常见面试基础问题相关推荐

ajax请求后台报没有body_前端常见面试 - 请求篇
对于前端来说,请求是前端日常工作必备的,通过请求才能与后端进行数据交互,尤其在现在前后端分离的开发模式下,请求显得就更加重要.因此,对于前端开发者来说,掌握请求就很重要.下面将从 http 请求和常见 ...
全局变量、局部变量、静态全局变量、静态局部变量的区别（与常见面试基础题）
1.局部变量能否和全局变量重名? 答:能,局部会屏蔽全局.要用全局变量,需要使用 ":: " 局部变量可以与全局变量同名,在函数内引用这个变量时,会用到同名的局部变量,而不会用 ...
（一）导学（前端框架面试-聚焦Vue/React/Webpack）
导学全面高效学习前提前端常见面试流程知识点介绍 Vue框架部分 React框架部分工具部分项目设计讲解方式注意事项全面全面的知识体系大量的面试真题完整的技术面试流程高效直 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
Android开发面试经——2.常见Android基础笔试题
标签: androidAndroid基础Android面试题Android笔试题 2015-03-12 15:04 3361人阅读评论(3) 收藏举报分类: Android开发(29) 版 ...
【C++基础】常见面试问题（二）
1. 指针和引用的区别指针保存的是所指对象的地址,引用是所指对象的别名,指针需要通过解引用间接访问,而引用是直接访问指针可以改变地址,从而改变所指的对象,而引用必须从一而终: 引用在定义的时候必须 ...
记一次网易前端实习面试
记一次网易前端实习面试很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了hhhh~三点的面试,因为从来没去过那个中关村西北旺区,吃完饭早早就去了,想象中那里应该是繁华的地方hhhh,到了发现都在 ...
前端工作面试问题（下）
续 "前端工作面试问题(上)" JS相关问题: 解释下事件代理. 在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能 ...
三年前端，面试思考（二）
为什么还有(二) 没有想到上一篇 <三年前端,面试思考> 有这么多前端同学看到. 在评论区也有很多鼓励和质疑的声音,而且群里面交流的同学两天就达到了700人. 群里有同学问了很多问题,同时 ...