前端面试

204 阅读10分钟

浏览器事件循环

因为js是单线程,我们不可能让一些加载缓慢的资源进行同步操作,所以js执行任务队列分为同步与异步,异步任务会被注册在eventTable,当指定事件执行完成会被移送到eventqueue,执行任务队列会先将同步任务执行完成,再去eventqueue读取函数进入到任务队列执行,这个过程会不断重复,称为事件循环

vuex

vuex是一种页面交互的数据共享机制,实现页面间数据同步共享。 平时我们用户信息,及token之类的数据都可存储在vuex中。

微信小程序生命周期

app生命周期

onLaunch:小程序初始化完成时触发,全局只触发一次

onshow:小程序启动,或从后台进入前台显示时触发

onHide:小程序从前台进入后台时触发

页面生命周期

onLoad:页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数

onReady:页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

onShow:页面显示/切入前台时触发

onHide:页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面,小程序切入后台等

onUnload:页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时

vue刷新页面

可以使用provide和inject这种祖孙组件之间的通讯的方法对在app.vue中的router-view组件进行控制,从而达到刷新的效果

前端大量数据展示

这个项目中大量DOM展示是出现在表格中,我们可以对表格进行数量化展示,无需一次性向浏览器输出多个DOM,再则对原先elementui表格组件进行v-if改造,当滚动条到达指定高度时再预先加载对应的DOM元素

前端大量数据优化

一般大量数据需要,可以对一些循环一般采用for,for循环比较快捷

base64

首先将请求回来的文件进行buffer数据格式转换,接着bota这个内置方法将拼接好的buffer数据进行base64转换,然后直接赋给image的src属性上,即可得到图片

mvc mvvm

mvc 分为model层即业务层,view层即视图层,control层即控制层,通过control层对业务层和视图层进行控制操作

mvvm m即数据层,v即视图层,vm即数据和视图的交互层,通过vm实现数据双向绑定,即可跟高效率的进行前端工作。其中我们常用三大前端框架既是使用mvvm这种模式

前端防抖 节流

防抖就是限制A事件触发规定时间后,从而去触发B事件,如果在规定时间内再触发a事件,则重新计算时间去触发B事件,搜索就需要用到防抖 节流就是在规定时间内无论触发多少A事件只执行一次B事件。可以用于降低事件触发频率,提升性能

闭包

函数应用上一级作用域的变量,使得js垃圾回收机制回收时删除不了这个变量,导致内存泄漏,一般建议少用闭包,会影响程序性能,但是我们在搜索框做防抖函数时会应用闭包,我们需要在用完该变量把该值设为null进行回收

vue指令

原型

原型即prototype,是一个js为我们创建的对象,我们可以在原型上挂载一些方法,这些方法不需要内存。

原型链即原型与原型相链接称为原型链,可以互相访问

image.png

vue2生命周期

beforecreate data和method还没初始化好

created data和method初始化好了,一般我们可以页面一开始就是需要的请求的放在这个生命周期进行请求

beforemount 模板已经编译好了,还没挂载到页面上

mounted 模板已经挂载页面上,操作DOM元素可以这个生命周期进行操作

beforeupdate data上的数据是最新的,但还没重新渲染DOM,所以页面上没有更新的效果

updated DOM树重新渲染

beforedestroy 此时还没删除DOM元素等和数据

destroy 此时页面已经卸载了,该生命周期可以做一些变量的垃圾回收

v-if和v-show

v-if会将DOM进行创建和销毁,而v-show只是简单的修改display属性值进行隐藏与显示,不会重复渲染DOM元素。如果需要重复切换DOM的隐藏与显示,建议使用v-show,能提升性能,反之可以用v-if

computed和watch

computed默认会走缓存,只有数据变化才会重新进行计算

wacth则是对数据data进行监听,不会进行缓存,当监听data数据变化时,执行回调,在方法中传入newval,oldval值,如果你需要在某个数据变化,触发某一些事件可以考虑用watch

v-for使用key值

使用v-for渲染DOM元素时,采用重新复用,当列表数据改变时,会根据key值去判断某个数据是否改变,如果改变则重新渲染该项,从而达到不会全部重新渲染,起到提升性能作用 不建议使用index作为key值,容易导致重新渲染大部分DOM元素,建议使用数组中的唯一值作为key值

nextTick

在下次DOM更新后执行的延迟回调,需要使用在DOM更新完后执行的操作,可以使用nextTick进行操作

导航守卫

导航守卫一般我只需用到全局前置导航守卫beforeEach

全局前置导航守卫beforEach,我可以拿它来做页面跳转允许否,和页面跳转进度条。

性能优化

使用gzip压缩技术将一些代码进行压缩,还有可以利用图片压缩将性能损耗

大数据计算的条件下使用for代替其他循环机制

提取一些代码公共化,例如组件化,模块化

第三方插件按需插入

ajax

主要实现无刷新更新数据,前台能异步与后台进行通信等

实现跨域使用cors,对后台进行配置可跨域域名

三次握手和四次挥手

三次握手主要是通过双方互相发送报文,进行确定接受能力与发送能力是否正常,从而再建立数据输送

四次挥手是解除双方数据输送

小程序下拉刷新

通过小程序钩子函数 onPullDownRefresh 调用时进行重新请求页面 请求返回后使用stopPullDownRefresh进行停止下拉刷新

小程序页面参数传值

将需要的值放在跳转页面url上,另一个页面则是通过onLoad回调函数参数进行获取

小程序登录流程

通过wx.login获取code传给后台服务器获取标识openid和会话密钥session_key,将session_key存在本地,每次需要session发给后端

小程序支付流程

通过wx.login获取code向服务器换取opndid,等用户将商品id,数量,及openid发送给服务器,获取到支付参数prepay_id,再调用wx.requestPayment进行支付

em 与 rem 区别

em是以父元素的font-size来设置大小 rem则是以html标签font-size来设置大小

深拷贝与浅拷贝

浅拷贝:拷贝的是内存地址,该变其中一个数据的值,则会影响其他数据的值 深拷贝:则是开辟一块新的内存,将值放在这其中,数据间互不影响 如果引用类型数据中没null和undefined可以用JSON.stringify和JSON.parse进行深拷贝,如果存在null和undefined则需要通过递归方法进行深拷贝

前端缓存

在响应头设置对应的字段,就是规定一个时间内重复的请求无需向后端发送请求,减少后台压力

分为强缓存和协商缓存

强缓存不会向后台发送任何请求,直接从本地获取缓存数据

协商缓存会向后台发送请求,后台根据请求头一些参数检查是否命中协商缓存,命中的话则返回304状态码并且带上新的响应头通知浏览器在缓存中读取资源

组件通讯方式

1.props和emit

2.通过parentparent和children获取父子组件里面数据或触发方法

3.通过provide和inject

4.vuex

5.事件总线

vue双向数据绑定原理

通过数据劫持和发布订阅模式实现的

数据劫持是通过object.property中set方法进行数据劫持,并发送订阅器信号

父子组件加载生命周期顺序

  • 加载渲染过程

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

  • 子组件更新过程

父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

  • 父组件更新过程

父 beforeUpdate->父 updated

  • 销毁过程

父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed

vuex丢失数据

需要做vuex数据持久化,也就是将vuex数据存储本地,可以使用插件vue-persist进行存储localstroge或者cokie

es6常用

let const命名变量

promise

async await

箭头函数

解构赋值

模板字符串

小程序跳转

navigateTo 直接跳转

redirectTo重定向,关闭当前页面跳转

relaunch 关闭页面栈保存的页面,再跳转

swtichTab 跳转,会关闭所有非tabbar页面再跳转

navigateback 关闭当前页面,返回上级或者多级页面

axios封装

响应时间 请求拦截加上为请求加上token 响应拦截为做一些判断进行相应的反应

new vue()发生了什么

会调用初始化函数init,初始化init的过程,会初始化生命周期函数,事件,props,methods,data等,其中最重要的是通过object.defineProperty设置setter与getter函数来实现双向数据绑定,初始化完毕会调用$mount挂载组件

Vue中的组件的data 为什么是一个函数

如果不是一个函数的话,我们引用data里面的属性值,会出现浅拷贝的问题。

Proxy 与 Object.defineProperty 优劣对比?

Object.defineProperty:无法监听数组的变化,必须遍历对象的每个属性,兼容性好

Proxy:IE兼容性差,可以监听数据变化,数据劫持方法较多

css选择器优先级

id选择器 100

classname选择器 伪类选择器 属性选择器 10

标签选择器 伪元素选择器 1

盒子模型

标准盒子模型:

image.png

IE盒子模型:

image.png

keep—alive

是vue的内置组件,可以使被包含的组件保留状态,避免重复渲染

v-model原理

实际上是input事件跟value的语法糖

async await promise的区别

1 promise是ES6,async/await是ES7

2 async/await相对于promise来讲,写法更加优雅

3 reject状态:

1)promise错误可以通过catch来捕捉,建议尾部捕获错误,

2async/await既可以用.then又可以用try-catch捕捉

浏览器地址中输入url地址

首先dns服务器将域名解析成ip地址,建立tcp连接,首先判断是否https,如果是就进行加密处理,通过三次握手建立tcp连接,发送http或https请求,构建DOM树,渲染css样式,显示页面,执行js脚本