前端常见面试基础问题_前端齐刘海问题

一、自我介绍

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，但浏览器不会立即向后端发送请求。
1
2
3
4
5

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:为了方便模块化管理,可以在这定义模块,每个模块有自己的状态,在使用时需要加上模块名
1
2
3
4
5
6

2.3 computed和watch的区别

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

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)
1
2

2.5 v-model的实现原理

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

2.6 路由懒加载

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

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

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

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组件
	//访问根组件:通过$root
	console.log(this.$root);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.9 vuex持久化的实现

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

三、js相关

3.1 axios的封装思路

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

3.2 async/await的使用

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

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

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

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 等等！
1
2
3
4
5
6
7
8
9

3.5 es6的新特性

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

3.6 跨域问题

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

3.7 js的数据类型有哪些?

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

四、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;
}
1
2
3
4
5
6
7
8

4.2 实现水平垂直居中

1.flex
    display: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%);
1
2
3
4
5
6
7
8
9
10
11
12

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

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.提取公共代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.2 seo优化

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

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12

六、性能相关

6.1 回流和重绘

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

七、算法题

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

匹配:'({[]}[])'

不匹配:'{(]}'
思路:栈结构
1
2
3
4

八、浏览器相关

8.3 tcp的三次握手

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

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

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

九、项目开发遇到的难点

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

的过程,原理大同小异.

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

1
2
3

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

## 九、项目开发遇到的难点

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



9.2 展示商品参数弹出层的高度,需要动态计算
1
2
3
4
5
6
7
8
9
10