2022-03-22 前端高频面试题整理汇总(持续更新)

一.html和css

1.如何画一个三角形?

回答:使用canvas或者设置一个div的宽高为0,border设置为最大值,然后只显示其中一个方向
追问:如何控制只显示一边border?
回答:正常设置一个方向的边框的宽度样式和颜色,其他方向的边框设置transparent透明度

补充

方法一:使用canvas

    //html:<canvas></canvas>
    var canvas = document.querySelector("canvas");
    var cont = canvas.getContext("2d");
    cont.beginPath();
    cont.moveTo(100, 0);
    cont.lineTo(100, 100);
    cont.lineTo(0, 100);
    cont.closePath();
    cont.stroke();

方法二:使用边框

 p {
     width: 0;
     height: 0;
     border: 50px solid transparent;
     border-top: 50px solid red;
 }

2.如何画一条0.5px的直线?

方法一:设置meta name=viewport标签里面的一个scale,把它从1.0设置为0.5
方法二:使用transform:scale(0.5)
方法三:使用canvas设置它的lineWidth=0.5

3.说说px,em,rem,vm的区别?

px就是像素
em是相对父元素的这么一个相对元素
rem是相对根元素的一个相对元素,即body里面设置font-size为多少px,那么1rem就等于多少px
vm是把一个页面视窗宽度分成100份,1vm就是百分之一的视窗宽度

4.如何设置一个不固定宽高的盒子的水平垂直居中?

方法一:给盒子的父元素设置相对定位,子元素设置绝对定位,然后上下左右值设置为0,margin设置为auto;
方法二:父元素设置弹性盒,设置主轴和侧轴居中
方法三:父相子绝,子元素设置top和left值为50%,transform:translate(-50%,-50%);

补充

        .wrap {
            width: 500px;
            height: 500px;
            background: yellow;
            position: relative;
        }        
        p {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            /*方法三*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

5.对于网页性能优化你有哪些方法?

减少http请求次数
限制cookie的大小
使用精灵图
图片懒加载
在头部引入css文件
在底部引入js文件
使用cdn

6.什么是BFC?

BFC就是块级+格式+上下文,是页面的一个独立容器,
特点是容器里面的标签不会影响到容器外部的标签,
BFC可以看成是一个块级元素,研垂直方向排列

7.说说你对盒模型的理解

盒模型分成标准盒模型和怪异盒模型
盒模型由内容,内边距,边框和外边距构成,
标准盒模型的总宽高=width/height+padding+border+margin
怪异盒模型的总宽高=width/height+margin
也就是说,怪异盒模型的width/height包含了内容的宽高+边框+内边距
通过box-sizing可以设置盒模型是标准盒还是怪异盒,
默认值content-box是标准盒,border-box是怪异盒

8.CSS有哪些选择器?它们的优先级顺序是什么?CSS3新增了哪些选择器?CSS可以被继承的属性有哪些?

8.1.CSS的选择器

常用的有:id,class,标签,后代选择器(空格),父子选择器(>),群组选择器(,),兄弟选择器(+)
还有伪类选择器,比如有:hover,:active这些
伪元素选择器,比如有:before,:after这些
属性选择器:[attribute=value]

8.2.选择器的优先级

!Important>内联选择器>id选择器>class选择器>标签选择器

8.3.CSS新增的选择器

nth-child(n),first-child(),last-child(),only-child()
nth-of-type(n),first-of-type(),last-of-type(),only-of-type()
:not()
:emtpy()
新增的属性选择器:
[attribute*=value]:选择有attribute属性的元素中,所有属性值为value的元素
[attribute^=value]:选择有attribute属性的元素中,开头属性值为value的元素
[attribute&=value]:选择有attribute属性的元素中,结尾属性值为value的元素

8.4.可以被继承的属性

可以被继承的属性有:
font系列,text系列(行高,颜色,缩进等),table表格布局的相关属性系列
list-style-type
不可以继承的属性有:
display
定位和浮动
盒模型的宽高边框内外边距
a标签的字体颜色,h1到h6的字体大小
背景属性:背景图片,颜色等

9.说说你对重绘和回流的理解

当渲染树发生属性的改变,而这些属性的改变仅仅在元素的外观和风格上发生改变时,这样的操作成为重绘
于此相对的,如果元素发生了大小尺寸,布局,显示和隐藏等这些结构上的改变,导致渲染树的部分或者全部元素需要重新构建的时候,这样的操作成为回流
显然,重绘不一定会触发回流,回流一定会触发重绘

10.什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式布局是指通过网页设计布局让不同尺寸的设备都有一套对应的布局
它的常见特点有:

• 可以适应PC+平板+手持设备
• 当视口接近手持设备的时候,导航栏变成抽屉式的
• 网站的布局会根据视口来调整模块的大小和位置

常见的响应式布局方法有:媒体查询,百分比,rem,vw和vh

11.如何实现左盒子固定宽度,右盒子占满剩余宽度的布局

方法一:右盒子设置:calc(100% - 100px)或者calc(100vw - 100px);
方法二:父盒子设置display:flex;右盒子设置:flex-grow:1;

补充

• calc()函数中"-"号前后必须要有空格,否则该函数不会生效
• 100%会使右盒子占满父盒子的剩余宽度,100vw则会占满视口宽度的剩余宽度
• flex:1这个复合属性是

flex:grow:1;//父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比
flex-shrink:1;//对超出部分进行缩小的取值比例
flex-basis:0%;//这个属性和width同时存在时width会失效,

的缩写,效果是:
在每个子元素中使用时,让这些子元素平分父元素的宽度
只对右盒子使用时,右盒子占满父元素剩余宽度

12. transparent,opacity:0,display:none,visibility:hidden的区别

transparent是属性值,是颜色的一种,表示"透明的颜色",跟red和green这些颜色属性值类似

二.javascript和nodejs

1.eval()的用法是什么?

eval()函数计算javascript字符串,并把它作为脚本代码来执行
eval的参数:如果是表达式就运行表达式,如果是javascript语句就运行javascript语句

补充

console.log(eval(1+3));//4
eval("console.log( 'hello') ");//hello
eval("console.log( 1+3) ");//4

2.数组去重的方法有哪些?

用的比较多的是ex6的SET方法,还有就是利用对象属性的唯一性,如果存在就push进一个空数组,还可以写两层for循环,如果arr[i]==arr[j],就用splice把arr[j]删掉

3.网页状态码401,403,404分别代表什么?

4是浏览器出现问题,5是服务器出现问题,
其中,403是forbid,进制访问,404 是not found 是页面不存在
401是未授权,需要进一步验证用户信息

4.如何去除字符串的前后空格?

可以用字符串的trim()方法,
或者用正则表达式,先匹配到字符串的前后空格,然后用’'去replace它

补充

var str = "   hello  world    ";
var regExp = /^\s+||\s+$/ig;
console.log(str);
console.log(str.trim());
console.log(str.replace(regExp, ''));//用''替代正则匹配到的空格

5.new一个对象的过程中发生了什么?

创建一个新的空对象
让this指向这个新对象
执行构造函数里面的代码,给新对象添加属性和方法
返回这个新对象

6.ajax的工作原理和优缺点?

工作原理:

在用户和服务器之间加一个中间层(AJAX引擎),
用XMLHTTPRequest对象向服务器端发起异步请求,从服务器端获取数据
用javascript来操作DOM,从而更新页面,实现用户操作和服务器响应的异步化

优缺点:

优点:
异步交互,增强了交互体验
局部渲染,节约lの服务器性能
缺点:
增加请求服务器的次数,是服务器增加压力
不能适用所有场景
ajax是用javascript在浏览器中完成的,需要考虑浏览器的兼容性问题

6.解释一下javascript的this是如何工作的?

谁调用this,this就指向谁

this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者） 
如果有 new 关键字， this 指向 new 出来的那个对象 
在事件中， this 指向触发这个事件的对象

7.在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

DOM2级事件使用addEventListener绑定事件,第三个参数为false绑定的是冒泡事件,true绑定的是捕获事件,点击这个DOM,先输出的是这个DOM的所有从根元素DOM=>此DOM的捕获事件,再输出此DOM=>根元素DOM的冒泡事件

补充

<div id="s1">s1
    <div id="s2">s2
        <div id="s3">s3</div>
    </div>
</div>
<script>
    s1.addEventListener("click", function(e) {
        console.log("s1的事件冒泡");
    }, false);
    s1.addEventListener("click", function(e) {
        console.log("s1的事件捕获");
    }, true);
    s2.addEventListener("click", function(e) {
        console.log("s2的事件冒泡");
    }, false);
    s2.addEventListener("click", function(e) {
        console.log("s2的事件捕获");
    }, true);
    s3.addEventListener("click", function(e) {
        console.log("s3的事件冒泡");
    }, false);
    s3.addEventListener("click", function(e) {
        console.log("s3的事件捕获");
    }, true);
</script>

点击s3,输出

s1的事件捕获
s2的事件捕获
s3的事件捕获
s3的事件冒泡
s2的事件冒泡
s1的事件冒泡

8.说说你对事件循环的理解?

8.1.同步和异步

同步任务:立即执行的任务,直接进入主线程中执行
异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时器

8.2.什么是事件循环?

同步任务进入主线程,异步任务进入任务队列,
主线程中的同步任务执行完后,读取任务队列上的异步任务,推入主线程中执行
这个过程就叫做事件循环

8.3.宏任务和微任务

微任务是一个需要异步执行的函数,是在主任务执行结束后执行的
常见的微任务有:Promise.then(),MutationObsever,node中的process.nectTick等等
常见的宏任务有:script中的同步代码,定时器延时器,UI rendering
宏任务&微任务流程:
执行宏任务,如果微任务就执行微任务,如果没有或者已经执行完,就执行新的宏任务

8.4.async和await

async就是异步的意思,await可以理解成是async wait,即
async是声明一个异步方法,await是等待一个异步方法的执行

async会返回一个Promise对象,
await后面如果是Promise对象就返回该对象的结果,如果不是就直接返回对应的值
但是不管await后面是什么,都会阻塞后面的代码

三.vue

1.v-if和v-show的区别?

两者都能控制标签的显示和隐藏,v-show是在css层面上控制display:none/block来实现的而v-if是通过创建和销毁节点来实现的
一般推荐使用v-show来控制标签的显示和隐藏,这样比较节约性能

2.v-for为什么要加上key?

减少循环次数,节约性能

3.vue实现双向数据绑定的原理

vue2是通过数据劫持,结合"订阅者-发布者"模式,通过Object.defineProperty()来劫持每一个vue实例的getter和setter,
当发生数据变化时,发布消息给订阅者,触发响应的监听回调来渲染页面,vue3是通过proxy来进行数据的响应处理的

4.v-for的key用数组的索引表示会造成什么后果?

一旦删除或者添加一个数据,这个数据之后的所有数据的下标都会改变
导致之前的数据和重新渲染的数据无法简历正确的联系

5.vue有哪些提高性能的方法?

• v-for加上唯一属性值key
• 使用keep-alive包裹路由,让数据保存在内存不被释放
• 使用v-lazy让图片懒加载
• data的层级不要太深
• 尽量使用v-show,减少使用v-if
• 使用ES6的import引入组件, 引入的时候按需引入,而不是全部引入
• 减少全局变量的使用,使用后的全局变量及时销毁

6.父组件和子组件生命周期钩子函数的执行顺序是什么?

加载渲染过程中:

父beforeCreate>父created>父beforeMount>
子create>子beforeMount>
子mounted>父mounted

子组件更新过程中:

父beforeUpdate>子beforeUpdate>子updated>父updated

父组件更新过程中:

父beforeUpdate>父updated

销毁过程中:

父beforeDestroy>子beforeDestroy>子destroyed>父destroyed

7.SPA首屏加载慢如何解决

安装动态懒加载所需插件；使用CDN资源。

8.第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

9.vue获取数据在一般在哪个周期函数

created
beforeMount
mounted

10.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

11.vue生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。