H5C3面试题
1.你移动端是怎么适配的？
我移动端适配是用 flex自适应布局+rem单位进行适配的
2.说说px/em/rem/vh/vw的区别?
px是绝对单位,在前端开发的视口中,水平和垂直方向是由很多小方格组成的,一个小方格就是一个px
em是相对单位,它的值不固定,会随着父元素字体大小变化而变化
rem也是相对单位,会随着根元素字体大小变化而变化
vh/vw是相对单位,会随着视口的大小变化而变化
3.你是怎么做数据存储的?
我目前用的有三个 他们都是保存在浏览器端 而且是同源的
1.cookies 会在每个请求里自动携带cookies数据,只能保存4kb大小的数据,在设置过期时间之前都有效,算是半永久吧
2.localStorage 会持久保存数据,大小有5M左右
3.sessionStorage 功能和localStorage差不多,但是只要关闭窗口或者浏览器,数据就没了
4.谈谈盒模型吧?
盒模型都是由四个部分组成的,分别是margin,padding,border,content
标准盒模型的width和height属性只包含了content
IE盒模型的width和height属性范围包含了bordre,padding,margin
5.flex常用的属性有哪些?
flex-direction属性决定主轴的方向
flex-wrap属性 如果一条轴线排不下,如何换行
justify-content属性决定成员在主轴上对齐的方式
align-items属性决定在交叉轴上怎么对齐
align-content属性决定多轴的对齐方式
6.怎么让一个盒子水平垂直居中?
使用flex布局 通过align-items center 和 justify-content certer设置容器的垂直和水平方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中
也可以利用绝对定位,先将元素的左上角通过top50%和left50%定位到页面的中心,然后再通过tranlate来调整元素的中心点到页面的中心
7.H5新特性有哪些你知道吗?
1.语义化标签
2.媒体标签
3.表单
4.DOM查询操作
5.web存储
6.拖拽 等等
8.C3新特性有哪些你知道吗?
1.圆角
2.多列布局
3.阴影和反射
4.文字特效
5.文字渲染
6.线性渐变
7.旋转
9.谈谈你对BFC的理解?
BFC 就是块级格式化上下文
就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
10.你对媒体查询的理解是怎么样的?
根据不同的屏幕尺寸,显示不同的效果(就是设置盒子的样式嘛)
JS面试题
1.var/let/const有什么区别?
var能变量提升,可以先使用.后声明
let有块级作用域,不能变量提升,而且不能重复声明
const有块级作用域,定义的常量不允许修改,但只是针对地址,不保证数据不变
2.你是怎么检测JS的数据类型的?
typeof 只能检测基本数据类型
instanceof 可以检测引用数据类型
Object.prototype.toString.call() 可以明确判断值的类型
3.能简单说说垃圾回收机制吗?
垃圾回收机制核心思想就是如何判断内存是否已经不再使用了,如果是,就释放掉,它采用了两个方法
引用计数 就是看一个对象是否有指向它的引用,如果没有变量指向它,说明该对象不需要了 (它会有循环引用的缺陷,会导致内存泄露)
标记清除法 就是从全局对象出发扫描内存中的对象,凡是能扫描到的 都是还需要使用的 没扫描到的会被标记,稍后进行回收
4.谈谈你对作用域和作用域链的理解?
作用域就是负责收集所有声明的变量,并且实施一套非常严格的规定,确定当前执行的代码对这些变量的访问权限
作用域链就是函数内部可以访问外部作用域变量,而外部函数还可以访问到全局作用域的变量,这样的变量作用域访问的链式结构,就叫作用域链
5.什么是原型对象和原型链??
就是在JS里面,除去一部分的内建函数,绝大多数的函数都会包含有一个叫做prototype的属性,指向原型对象
基于构造函数创建出来的实例,都可以共享访问原型对象的属性
而在每一个对象中,都会有一个—proto—属性,这个属性指向当前对象的构造函数的原型,原型也是对象,也会有—proto—属性指向它的原型,以此类推,形成的链式结构就叫原型链 原型链的顶层就是null
6.什么是闭包? 闭包是用来解决什么问题?
内存函数 引用外层函数上的变量,就可以形成闭包
闭包最大的作用就是 变量私有, 防止全局变量污染
7.什么是EventLoop?
JS是单线程,所有的同步任务都在主线程上执行,形成一个执行站,主线程之外,还存在一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件
一旦执行站中所有的同步任务执行完成之后,系统就会读取任务队列之中,看看有哪些事件,哪些对应的异步任务,然后结束等待,进入执行站,开始执行,主线程不断重复的这个过程,运行的这个机制就是EventLoop
8.什么是跨域?你平时是怎么解决跨域的问题?
跨域指的是浏览器不能执行其他网站的脚本,他是由浏览器的同源策略造成的,是浏览器施加的安全限制
当一个请求url的协议,域名,端口三者之间任意一个与当前url不同就会产生跨域
可以使用JSONP 利用script标签的src属性,去请求一个接口,因为src属性不受跨域影响
可以使用CORS通过服务器设置响应头来实现跨域 前端正常发送ajax就可以
还可以使用代理转发 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题,所以可以直接发送请求
代理服务和后端服务之间并不通过浏览器 没有同源策略的限制
9.说说浅拷贝和深拷贝,他们有什么区别?
浅拷贝在拷贝数据的时候只拷贝一层,更深层次的数据只拷贝地址,原对象和拷贝的对象会相互影响
深拷贝就是无限层级的拷贝,更深层次的数据也不是只拷贝地址,会将整个拷贝,在堆内存中开辟一个新的地址,深拷贝的原对象和拷贝的对象不会相互影响
10.什么是数组扁平化?你是怎么实现数组扁平化的?
数组扁平化就是一个嵌套多层的数组转换为只有一层的数组
使用扩展运算符 可以将二维数组变为一维
利用reduce函数迭代进行数组扁平化
递归实现扁平化 递归遍历每一项 若为数组则继续遍历,否则concat
11.说说new这个关键字做了什么?
它创建了一个空对象,然后this指向了这个对象,然后给这个对象赋值,再返回这个对象
12.说一下ES6的新特性?
新增了symbol类型 表示独一无二的值 用来定义独一无二的对象属性名
const/let 用来声明变量的 不可重复声明 具有块级作用域 没有变量提升
变量的解构赋值(包含了数组,对象,字符串,数字,布尔,函数参数)和剩余运算符
模版字符串${}
扩展运算符
箭头函数
set和map数据结构
proxy
promise 解决异步回调
13.什么是递归?它有哪些应用场景?
递归就是函数自己调用自己
它的优点是,结构清晰,可读性强
它的缺点是 只递不归的话会导致程序崩溃,为了避免崩溃,递归函数中一定要包含条件语句,在合适的时候终止递归
14.什么是防抖和节流?它们有什么区别?
防抖就是事件在n秒内只会执行最后一次 如果n秒内再次触发,则重新计算
节流就是事件在n秒内只执行一次
他们的区别是 防抖是将多次执行变为最后一次执行,节流就是就多次执行变成每隔一段时间执行
15.说说ajax的工作流程和原理?
ajax的核心是XMLHttpRequest对象
它的工作原理就是设置请求报文的过程 分五步
实例化一个ajax对象
设置请求方法和地址
设置请求头
发送请求
注册回调函数
16.数组的push/pop/map等方法的返回值是什么?
map是一个映射操作,可以把数组中的值,做一些修改,在映射给新的数组,它的返回值是一个新的数组
pop它会删除数组最后一个元素,返回删除的元素
push它会将元素加到数组的末尾,会返回一个新数组,长度会改变
17.JS常用数组方法
不改变原数组 : concat(连接多个数组的方法) indexOf(查找元素在数组中的位置,如果没找到就返回 -1 (负一)) forEach(遍历数组,没有返回值) filter(过滤出满足条件的新数组) some(有返回值,如果有一个满足条件就返回true,不会再继续执行) every(如果有一个不满足条件就返回false,不会再继续执行)
Vue面试题
1.你了解Vue的生命周期钩子吗?能说一下都有哪些?
Vue它在创建到销毁过程中会主动执行的一些回调函数就叫生命周期钩子
- beforeCreate
- created
- beforeMount
- Mounted
- beforeupdate
- updated
- beforeDestroy
- destroyed
它有四个阶段 初始化阶段 挂载阶段 更新阶段 销毁阶段
2.为什么数据要放在created钩子中?
因为他在实例创建之后,挂载之前,这样做的好处就是能更快的获取服务端的数据,性能更高
3.Vue中有哪些通讯方式?
父向子传值 props
子向父传值 $emit
全局数据共享 vuex
插槽 slot
4.兄弟组件怎么传值?
主要通过event事件来传值
传值的组件使用$emit发送事件
接收值的组件通过$on绑定事件接受
5.你能简单说一下vue.js双向数据绑定的原理吗?
它的核心方法就是 object.defineproperty 来实现属性拦截,以达到监听数据的目的
vue双向数据绑定的原理就是通过数据劫持订阅者和发布者模式去实现的,它是通过ES5的object.defineproperty去劫持各属性的getter,setter,当监听的属性产生变化时,它会通知订阅者,是否更新,如果更新的话,就会去执行对应的更新函数
6.computed 和 watch 的区别是什么?
computed是计算属性,它可以监听多个属性,只要计算属性内部数据变化就会触发,它有缓存机制
watch更多的是起到观察的作用,主要用于观察props和data的值,当这些值发生变化时,就会执行处理操作,它是没有缓存机制的
7.v-for中key的作用?
key 的作用就是快速查找到节点,减少渲染次数,提升渲染性能,可以高效的更新虚拟DOM
它的底层有一个diff算法,会把新旧DOM做对比
8.v-if和v-for的优先级哪个更高?
v-for的优先级是高于v-if的,如果两个同时出现的话,那每次循环都会执行v-if,可以在外面包一个template标签,在template标签上使用v-if
9.Vue 组件 data 为什么必须是函数?
因为组件是要在多个地方使用的,如果data是一个对象,对象是引用类型,一旦某个地方修改,就会全部修改
data是一个函数的话,每一次复用组件的时候就会从这个函数返回一个新的对象,这样组件在复用的使用就会做到数据互不干扰
10.谈谈你对async和await的理解?
async和await是ES7里新出的语法,它的作用就是async用于声明一个function是一个异步的,而await用于等待一个异步方法执行完成
它可以替代promise中的then
async函数返回一个promise对象,可以使用then方法添加回调函数,当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句
11.简单介绍一下promise 它解决了什么问题?
promise 是一个 构造函数 用于创建promise对象 promise对象可以理解为一个处理异步操作的容器
promise它解决了回调地狱 在ES5之前没有promise 异步函数回调会形成回调地狱,ES6之后出现了 promise 它解决了异步回调,层层嵌套。它在执行的过程中有三个状态 一个是pending(进行中)、fulfilled(已成功)、rejected(已失败)
它的本质不是控制异步代码的执行顺序 而是控制异步代码结果处理顺序。
12.输入一个URL到页面,这个过程会发生什么?
首先输入一个地址，然后浏览器会先在缓存中查找，如果有，就显示这个地址的页面，如果没有，浏览器就向DNS服务器发起请求，解析这个URL中域名对应的IP地址，解析出IP地址后，根据IP地址和默认端口，和服务器建立TCP链接，然后浏览器发起读取文件的HTTP请求，这个请求报文会在三次握手的时候当做第三次数据发送给服务器，然后服务器对浏览器请求响应，并把对应的HTML文件发送给浏览器，再然后通过四次挥手释放TCP连接，然后浏览器开始解析HTML内容并且渲染出来，
13.Vue2和Vue3有哪些区别
.Vue3的体积更小，性能更高，而且Vue3的底层是基于TS写的 所以对TS的支持更友好
.从选项式 API 转换成组合式 API Vue3为了兼容旧版 保留了选项式 API
.vue2使用的是 object.defineproperty数据劫持，只能劫持单个属性，如果要劫持多个，就需要递归，造成速度的缓慢
.vue3是使用proxy代理实现的，不需要递归，使用速度会快很多
.vue3加了新的响应式API，像reactive，ref，这些都可以返回一个响应式的代理数据proxy
14.什么是虚拟DOM?为什么需要虚拟DOM?
虚拟DOM本质就是一个JS对象,保存DOM关键信息
提高DOM更新的性能,不频繁操作真实DOM,在内存中找到变化部分,更新真实DOM
15.谈谈你对keep-alive的理解?
keep-alive是Vue的内置组件,它自身不会渲染成一个DOM元素,也不会出现在父组件链中
它是在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提升用户体验
16.$nextTick是什么?
我们可以理解成,Vue在更新DOM时是异步执行的,当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有的数据变化完成之后,再统一进行更新
如果没有 nextTick机制,只需要更新一次,所以$nextTick本质是一种优化策略
17.vue-router是怎么传参的?
id 传参
query 传参
pramas 传参
18.vue-router路由模式有几种?
hash 使用URL hash值来做路由,支持所有浏览器
history 依赖HTML5 history API和服务器的配置
abstract 支持所有JS运行环境 像node.js服务端
HTTP协议面试题
1.http有哪些方法?
get post put patch delete
get / delete 参数是在请求头里传递的
put / post / patch 参数是在请求体传递的
2.get和post方法有什么区别?
数据传输方式 get通过 url 传输数据(地址栏拼接) post通过请求体传输
数据安全 get数据暴露在url中 可以通过缓存很容易查到数据信息 post在请求体内 有一定的安全性
数据类型 只允许ASCII字符串 post没有限制
get刷新后退等操作是无害的 post可能会引起重复提交表单
get是安全且幂等(就是指一个请求执行多次或者执行一次效果是一样的) post非安全也非幂等(可能会引起服务器端的变化)
3.HTTP请求报文是什么样的?
请求报文是由 请求行 请求头 (空行) 请求体 组成的
4.你了解的HTTP状态码有哪些?
200 响应成功
201 请求已被实现
202 请求已经接收 但不保证能完成
301 永久重定向
302 临时重定向
304 协商缓存
400 请求报文语法错误(传参格式不对)
401 权限没通过
403 服务器禁止访问
404 在服务器上没有找到资源
500 服务端错误(也有可能是前端传参错误)
5.谈谈你平时都用哪些方法进行性能优化?
减少http请求,打包压缩上线代码,使用懒加载,使用雪碧图,移除生产环境的控制台打印,动态渲染组件
