2021春招web遇到的面试题总结 --【持续完善】

 

html/css部分

为什么要清除浮动？清除浮动的方法？

元素浮动脱离文档流，如果没有其他元素，会造成父元素塌陷，也会影响后续元素的布局（会盖在后续元素上面）

清除浮动的方法：

1. 如果父元素高度是已知且固定的，可以设置父元素高度

2. 对周边元素clear:both

3. 利用BFC不影响周围盒子的特性触发父元素BFC，可以通过设置父元素overflow:hidden实现

4. 通用写法：

    .clearfix:before{
    display:block;
    content: '';
      visible: hidden;
      height: 0;
      clear: both;
    }
    .clearfix:after{
     *zoom: 1;
    }

什么是BFC？

盒模型，不影响周边布局

触发方式：

浮动，定位为absolte或者fixed，overflow不是visible

解释box-sizing属性

添加该属性的盒子，宽度等于内容物宽度加上padding和border，更加准确，不添加默认为content-box即盒子宽度等同于内容物的宽度

盒子垂直居中有哪几种方式？

1. flex布局

2. table-cell+vertical-align

3. absolute+transfrom

两栏布局，左侧定宽，右侧上下行，下方可滚动

 

HTML5新特性

canvas

语义化标签

新的缓存方式sessionStorage和LocalStorage【同cookie的区别】

对audio和video的支持

。。。

css3新特性

反思一下平时写css没有特意留意哪个是css3的内容，

过渡，旋转，动画，2D/3D，阴影，渐变

没怎么用过的：倒影

cookie、sessionStorage和localStorage的区别

大小区别，失效时间，是否会在客户端和服务器端传递等

设置cookie过期时间

expire

清空localStorage

 

写一个连续旋转的正方形

答得是transfrom:rotate(xdeg)搭配@keyframe写0%、25%、50%、75%的旋转。并且在渲染完后，使用setInterval继续调用动画，感觉对性能不友好

css写个三角形

先写正方形之后按要求的三角形朝向修改border

js及ES6题目

js如何获取页面上所有img标签src的值

先获取成数组，之后用getAttribute()获取src

写出你知道的js数组方法，根据是否改变原数组分成两类

pop、push、shift、unshift、splice()、Array.from()、Array.prototype.fill()、for...of、Array.of()、Array.prototype.find()、Array.prototype.findIndex()、Array.prototype.copyWithin()、Array.prototype.includes()。。。

正则表达式去掉字符串中所有空格

 

正则表达式使字符串中多有数字+1

 

代码题

 

什么是原型，什么是原型链

函数→prototype

对象→proto

原型链顶层是什么

答Object，最后答Object.prototype.proto，其实就是null

async/await

将一个方法封装为异步方法，返回一个Promise实例对象

什么是暂时性死区？

 

js垃圾回收机制

标记回收【常用】、计数回收

什么是闭包？

 

数组去重

 function getArr(arr){
 return Array.from([...new Map(arr)])
 }

js写个chunk

笔试时的写法，后来发现能正确切分但是数组内是一个个字符

 function setChunk(arr,num) {
     let result = []
     for(let i = 0; i < arr.length + num - arr.length % num; ){
         let tempArr = arr.join('')
         let temp = Array.from([...tempArr.substr(i,num)])
         result.push(temp)
         i+=num
    }
     return result
 }

let、const、var的区别

let

1️⃣ 只在声明的作用域里有效

2️⃣ 不存在变量提升

3️⃣ 不允许重复声明

4️⃣ 存在暂时性死区

const

声明常量，声明时就应该赋值，不存在变量提升，不会挂载成window的属性

 

对ES6有什么了解？哪些语法用的最熟练？

 

有没有了解过filter？运用场景

过滤器，常用于筛选出符合条件的属性

返回数组中重复超过一半的数字

 

对箭头函数的理解

this指向定义时的内容，没有this变化的风险

 

Vue

Vue中computed和watch有什么区别及运用场景

computed主要是数据涉及较为复杂的逻辑运算时，不适合直接在template上计算得到，不利于代码的理解，使用computed可以直接得到逻辑计算后的结果，代码结构更加清晰

watch是监听，一般用于数据依赖其他数据时，即数据经由其他数据拼接或逻辑运算等得到时监听依赖的数据变化，使用watch的好处在于只有依赖的数据改变时才重新更新数据。

Vue中路由的实现方式

hash和history，默认是hash

后端如何配置路由history

 

computed和watch哪个有缓存？

• 计算属性有缓存性，计算所得的值如果没有变化不会重复执行。

• 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况

Vue如何实现双向数据绑定？

当Vue实例作为js对象传入时，涉及的data数据会被Object.defineprotery属性遍历，即劫持其getter和setter方法，对数据进行监听，当数据发生变化时会实时将变化返回给侦听器，实现双向数据绑定

解释MVVM及同MVC的区别

MVVM实际是model+view+view model，model是数据层，view是视图层，view model是两方实现数据响应式更新的桥梁，VM使用数据绑定将model中的内容挂载到view，通过事件监听在view层数据发生变化的时候更新至model。

MVVM中的VM相当于MVC中的C-control，

Vue根组件和其他组件有什么区别？

 

父组件和子组件生命周期先后？

经由父组件，但还是子组件的生命周期先经历后才到父组件

有没有阅读过源码？

 

为什么要用虚拟DOM？

 

是否了解过diff算法？

 

组件间传值

父子组件传值

prop+$emit

兄弟组件传值

发布订阅者模式即bus

vuex

不同层组件传值

vuex

attr

inject

Vue、React和Angular的区别和优势

 

Vue3.x中使用proxy的优点是什么？

监听代理，参见ES6proxy的优点

SPA优缺点

优点

• 利于SEO

缺点

• 首屏时间长【因为加载内容多】

Vue中有哪些常用指令及其应用场景

 

如何挂载全局组件

 

是否有封装组件的经验，如何封装

 

小程序

说一下微信小程序授权登录的流程

 

常用API

 

同Vue以及uniapp的区别

 

生命周期

注意区分组件生命周期和页面生命周期

路由封装

 

如何打包？如何调试？

 

性能优化

如何减少页面载入时间

1. 减少重复的http请求

2. html中引入的样式表放在head，引入的js文件放在body尾部

3. pc端html页面可以使用spite

4. 组件按需加载，element-ui按需引入

5. 路由懒加载

如何做首屏优化

 

移动端适配

 

浏览器间兼容

前缀

 

其他

Sass和Less的区别

变量定义的方式以及引入方式有语法区别

 

 

浏览器内核

IE→trident

chrome→webkit

 

有没有尝试过前端向后端发送请求

这里个人认为想问的是webpack里面的内容

uniapp

网络请求如何封装？

 

从一个页面切到另一个页面如何判断？会触发什么生命周期吗？

 

网络

url输入到页面渲染出来发生了什么？

粗暴答法：域名解析→建立TCP连接→发送http网络请求→客户端自服务器端获取返回内容并解析→页面渲染→断开TCP连接

各种状态码表示什么意思

1xx、2xx、3xx、4xx、5xx参见博文总结

三次握手，四次挥手

 

如何实现跨域？

jsonp、CORS、webpack-dev-server等

CORS后端如何配置