2022年web前端面试题

web前端面试题分为：html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面试题等等，那么在2022年，web前端面试题有哪些呢？

可以来小鹿线看看面试题视频<b>https://xuexiluxian.cn/</b>

第一章面试题基础篇

1.1 HTML面试题

面试题：行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

行内元素：span、img、input...
块级元素：div、footer、header、section、p、h1...h6...
空元素：br、hr...

元素之间的转换问题：
display: inline; 把某元素转换成了行内元素 ===>不独占一行的，并且不能设置宽高
display: inline-block; 把某元素转换成了行内块元素 ===>不独占一行的，可以设置宽高
display: block; 把某元素转换成了块元素 ===>独占一行，并且可以设置宽高
区别一：link先有，后有@import（兼容性link比@import兼容）；
区别二：加载顺序差别，浏览器先加载的标签link，后加载@import
title与h1的区别：

定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
title他是显示在网页标题上、h1是显示在网页内容上
title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
网站的logo都是用h1标签包裹的
b与strong的区别：

定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气的。
区别：
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用该用strong就行了。
i与em的区别：

定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）。
区别一：
title ：鼠标移入到图片显示的值
alt ：图片无法加载时显示的值
区别二：
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型：margin、content（ border + padding + content ）
通过CSS如何转换盒子模型：
box-sizing: content-box; /标准盒子模型/
box-sizing: border-box; /IE盒子模型/
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数行高）。
height是一个死值，就是这个盒子的高度。
CSS选择符：
通配（）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1...）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])

CSS属性哪些可以继承：
文字系列：font-size、color、line-height、text-align...
***不可继承属性：border、padding、margin...
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
CSS权重计算：
第一：内联样式（style）权重值:1000
第二：id选择器权重值:100
第三：类选择器权重值:10
第四：标签&伪元素选择器权重值:1
第五：通配、>、+ 权重值:0
用边框画（border）,例如：
{
width: 0;
height: 0;

border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid #ccc;

}
<div class='container'>
<div class='main'>main</div>
</div>

.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
background: red;
}
<div class='container'>
<div class='main'>main</div>
</div>

.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
none 隐藏元素
block 把某某元素转换成块元素
inline 把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1. 了解BFC ：块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell...
position的值为:absoute、fixed
1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both;
3. after方式
ul:after{
content: '';
display: block;
clear: both;
}
偶数 : 让文字在浏览器上表现更好看。

另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。
static [默认] 没有定位
fixed 固定定位，相对于浏览器窗口进行定位。
relative 相对于自身定位，不脱离文档流。
absolute 相对于第一个有relative的父元素，脱离文档流。

relative和absolute区别
1. relative不脱离文档流、absolute脱离文档流
2. relative相对于自身、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
absolute如果有left、right、top、bottom ==》left、right、top、bottom
双飞翼
reset.css 是一个css文件，用来重置css样式的。
normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。
1. 是什么
把多个小图标合并成一张大图片。
2. 优缺点
优点：减少了http请求的次数，提升了性能。
缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）
1. 占用位置的区别
display: none; 是不占用位置的
visibility: hidden; 虽然隐藏了，但是占用位置

2. 重绘和回流的问题

visibility: hidden; 、 display: none; 产生重绘
display: none; 还会产生一次回流

产生回流一定会造成重绘，但是重绘不一定会造成回流。

产生回流的情况：改变元素的位置(left、top...)、显示隐藏元素....
产生重绘的情况：样式改变、换皮肤
共同性：实现透明效果

1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别
opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。
延迟加载：async、defer
例如：<script defer type="text/javascript" src='script.js'></script>

defer : 等html全部解析完成，才会执行js代码，顺次执行js脚本。
async : async是和html解析同步的（一起的），不是顺次执行js脚本（谁先加载完谁先执行）。
基本类型：string、number、boolean、undefined、null、symbol、bigint
引用类型：object

NaN是一个数值类型，但是不是一个具体的数字。
console.log( true + 1 ); //2
console.log( 'name'+true ); //nametrue
console.log( undefined + 1 ); //NaN
console.log( typeof undefined ); //undefined
console.log( typeof(NaN) ); //number
console.log( typeof(null) ); //object
1. 作者在设计js的都是先设计的null（为什么设计了null：最初设计js的时候借鉴了java的语言）
2. null会被隐式转换成0，很不容易发现错误。
3. 先有null后有undefined，出来undefined是为了填补之前的坑。

具体区别：JavaScript的最初版本是这样区分的：null是一个表示"无"的对象（空对象指针），转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
== : 比较的是值

string == number || boolean || number ....都会隐式转换
通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。）

=== ：除了比较值，还比较类型
1. js是单线程的语言。
2. js代码执行流程：同步执行完==》事件循环
同步的任务都执行完了，才会执行事件循环的内容
进入事件循环：请求、定时器、事件....
3. 事件循环中包含：【微任务、宏任务】
微任务：promise.then
宏任务：setTimeout..

要执行宏任务的前提是清空了所有的微任务

流程：同步==》事件循环【微任务和宏任务】==》微任务==》宏任务=》微任务...

1. 除了函数外，js是没有块级作用域。
2. 作用域链：内部可以访问外部的变量，但是外部不能访问内部的变量。
注意：如果内部有，优先查找到内部，如果内部没有就查找外部的。
3. 注意声明变量是用var还是没有写（window.）
4. 注意：js有变量提升的机制【变量悬挂声明】
5. 优先级：声明变量 > 声明普通函数 > 参数 > 变量提升
1. 本层作用域有没有此变量【注意变量提升】
2. 注意：js除了函数外没有块级作用域
3. 普通声明函数是不看写函数的时候顺序
function c(){
var b = 1;
function a(){
console.log( b );
var b = 2;
console.log( b );
}
a();
console.log( b );
}
c();
var name = 'a';
(function(){
if( typeof name == 'undefined' ){
var name = 'b';
console.log('111'+name);
}else{
console.log('222'+name);
}
})()
function fun( a ){
var a = 10;
function a(){}
console.log( a );
}
fun( 100 );
1. 对象是通过new操作符构建出来的，所以对象之间不想等(除了引用外)；
2. 对象注意：引用类型(共同一个地址)；
3. 对象的key都是字符串类型；
4. 对象如何找属性|方法；
查找规则：先在对象本身找 ===> 构造函数中找 ===> 对象原型中找 ===> 构造函数原型中找 ===> 对象上一层原型查找
[1,2,3] === [1,2,3] //false
var obj1 = {
a:'hellow'
}
var obj2 = obj1;
obj2.a = 'world';
console.log(obj1); //{a:world}
(function(){
console.log(a); //undefined
var a = 1;
})();
var a = {}
var b = {
key:'a'
}
var c = {
key:'c'
}

a[b] = '123';
a[c] = '456';

console.log( a[b] ); // 456
function Foo(){
getName = function(){console.log(1)} //注意是全局的window.
return this;
}

Foo.getName = function(){console.log(2)}
Foo.prototype.getName = function(){console.log(3)}
var getName = function(){console.log(4)}
function getName(){
console.log(5)
}

Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo().getName();//3
var o = {
a:10,
b:{
a:2,
fn:function(){
console.log( this.a ); // 2
console.log( this ); //代表b对象
}
}
}
o.b.fn();
window.name = 'ByteDance';
function A(){
this.name = 123;
}
A.prototype.getA = function(){
console.log( this );
return this.name + 1;
}
let a = new A();
let funcA = a.getA;
funcA(); //this代表window
var length = 10;
function fn(){
return this.length + 1;
}
var obj = {
length:5,
test1:function(){
return fn();
}
}
obj.test2 = fn;
console.log( obj.test1() ); //1
console.log( fn()===obj.test2() ); //false
console.log( obj.test1() == obj.test2() ); //false
var arr = [1,2,3];
console.log( Array.isArray( arr ) );
var arr = [1,2,3];
console.log( arr instanceof Array );
var arr = [1,2,3];
console.log( Object.prototype.toString.call(arr).indexOf('Array') > -1 );
var arr = [1,2,3];
console.log( Array.prototype.isPrototypeOf(arr) )
var arr = [1,2,3];
console.log( arr.constructor.toString().indexOf('Array') > -1 )
1. slice是来截取的
参数可以写slice(3)、slice(1,3)、slice(-3)
返回的是一个新的数组
2. splice 功能有：插入、删除、替换
返回：删除的元素
该方法会改变原数组
var arr1 = [1,2,3,2,4,1];
function unique(arr){
return [...new Set(arr)]
}
console.log( unique(arr1) );
var arr2 = [1,2,3,2,4,1];
function unique( arr ){
var brr = [];
for( var i=0;i<arr.length;i++){
if( brr.indexOf(arr[i]) == -1 ){
brr.push( arr[i] );
}
}
return brr;
}
console.log( unique(arr2) );
var arr3 = [1,2,3,2,4,1];
function unique( arr ){
arr = arr.sort();
var brr = [];
for(var i=0;i<arr.length;i++){
if( arr[i] !== arr[i-1]){
brr.push( arr[i] );
}
}
return brr;
}
console.log( unique(arr3) );
function fnArr(arr){
var newArr = [];
arr.forEach((item,index)=>{
newArr.push( Math.max(...item) )
})
return newArr;
}
console.log(fnArr([
[4,5,1,3],
[13,27,18,26],
[32,35,37,39],
[1000,1001,857,1]
]));
解答：
String.prototype.addPrefix = function(str){
return str + this;
}
console.log( 'world'.addPrefix('hello') )
var str = 'aaabbbbbccddddddddddx';
var obj = {};
for(var i=0;i<str.length;i++){
var char = str.charAt(i);
if( obj[char] ){
obj[char]++;
}else{
obj[char] = 1;
}
}
console.log( obj );
//统计出来最大值
var max = 0;
for( var key in obj ){
if( max < obj[key] ){
max = obj[key];
}
}
//拿最大值去对比
for( var key in obj ){
if( obj[key] == max ){
console.log('最多的字符是'+key);
console.log('出现的次数是'+max);
}
}
1. 创建了一个空的对象
2. 将空对象的原型，指向于构造函数的原型
3. 将空对象作为构造函数的上下文（改变this指向）
4. 对构造函数有返回值的处理判断
function Fun( age,name ){
this.age = age;
this.name = name;
}
function create( fn , ...args ){
//1. 创建了一个空的对象
var obj = {}; //var obj = Object.create({})
//2. 将空对象的原型，指向于构造函数的原型
Object.setPrototypeOf(obj,fn.prototype);
//3. 将空对象作为构造函数的上下文（改变this指向）
var result = fn.apply(obj,args);
//4. 对构造函数有返回值的处理判断
return result instanceof Object ? result : obj;
}
console.log( create(Fun,18,'张三') )
1. 闭包是什么
闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。
2. 闭包可以解决什么问题【闭包的优点】
2.1 内部函数可以访问到外部函数的局部变量
2.2 闭包可以解决的问题
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick = function(){
alert(i);
}
})(i)
}
3. 闭包的缺点
3.1 变量会驻留在内存中，造成内存损耗问题。
解决：把闭包的函数设置为null
3.2 内存泄漏【ie】 ==> 可说可不说，如果说一定要提到ie
1. 原型可以解决什么问题
对象共享属性和共享方法
2. 谁有原型
函数拥有：prototype
对象拥有：proto
3. 对象查找属性或者方法的顺序
先在对象本身查找 --> 构造函数中查找 --> 对象的原型 --> 构造函数的原型中 --> 当前原型的原型中查找
4. 原型链
4.1 是什么？：就是把原型串联起来
4.2 原型链的最顶端是null
class Parent{
constructor(){
this.age = 18;
}
}

class Child extends Parent{
constructor(){
super();
this.name = '张三';
}
}
let o1 = new Child();
console.log( o1,o1.name,o1.age );
function Parent(){
this.age = 20;
}
function Child(){
this.name = '张三'
}
Child.prototype = new Parent();
let o2 = new Child();
console.log( o2,o2.name,o2.age );
function Parent(){
this.age = 22;
}
function Child(){
this.name = '张三'
Parent.call(this);
}
let o3 = new Child();
console.log( o3,o3.name,o3.age );
function Parent(){
this.age = 100;
}
function Child(){
Parent.call(this);
this.name = '张三'
}
Child.prototype = new Parent();
let o4 = new Child();
console.log( o4,o4.name,o4.age );
可以改变this指向

语法：函数.call()、函数.apply()、函数.bind()
1. call、apply可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。
2. 参数不同：apply第二个参数是数组。call和bind有多个参数需要挨个写。
1. 用apply的情况
var arr1 = [1,2,4,5,7,3,321];
console.log( Math.max.apply(null,arr1) )

2. 用bind的情况
var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = function(){
console.log( this.id );
}.bind(h1s)
V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort，数量小于10的数组使用 InsertionSort，比10大的数组则使用 QuickSort。

之前的版本是：插入排序和快排，现在是冒泡

原理实现链接：https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js

710行代码开始
共同点：复制

1. 浅拷贝：只复制引用，而未复制真正的值。
var arr1 = ['a','b','c','d'];
var arr2 = arr1;

var obj1 = {a:1,b:2}
var obj2 = Object.assign(obj1);

2. 深拷贝：是复制真正的值（不同引用）
var obj3 = {
a:1,
b:2
}
var obj4 = JSON.parse(JSON.stringify( obj3 ));

//递归的形式
function copyObj( obj ){
if( Array.isArray(obj) ){
var newObj = [];
}else{
var newObj = {};
}
for( var key in obj ){
if( typeof obj[key] == 'object' ){
newObj[key] = copyObj(obj[key]);
}else{
newObj[key] = obj[key];
}
}
return newObj;
}
console.log( copyObj(obj5) );
公共点：在客户端存放数据
区别：
1. 数据存放有效期
sessionStorage : 仅在当前浏览器窗口关闭之前有效。【关闭浏览器就没了】
localStorage : 始终有效，窗口或者浏览器关闭也一直保存，所以叫持久化存储。
cookie : 只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效。
2. localStorage、sessionStorage不可以设置过期时间
cookie 有过期时间，可以设置过期（把时间调整到之前的时间，就过期了）
3. 存储大小的限制
cookie存储量不能超过4k
localStorage、sessionStorage不能超过5M

****根据不同的浏览器存储的大小是不同的。
1. 易读性和维护性更好。
2. seo成分会更好，蜘蛛抓取更好。
3. IE8不兼容HTML5标签的。解决：可以通过html5shiv.js去处理。
1. 区别
:是伪类、::伪元素 ===》是为了做区分

2.是什么？作用
元素before之前、元素after之后
作用：清除浮动、样式布局上也有作用
<input type="text" autocapitalize='off'>
Chrome默认字体大小是：16px
**每个浏览器默认字体大小可能都不一样

em针对于父元素的font-size
rem针对于根(html)元素的font-size
<style>
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<style type="text/css">
input::-webkit-input-placeholder{
color:red;
}
</style>
禁止ios 长按时触发系统的菜单，禁止ios&android长按时下载图片
html,body{
touch-callout: none;
-webkit-touch-callout: none;

user-select:none;
-webkit-user-select:none;
}
html,body{
user-select:none;
-webkit-user-select:none;
}
淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem
1. 是什么？
一个URL可以响应多端
2. 语法结构
@media only screen and (max-width: 1000px){
ul li:last-child{
display: none;
}
}

only : 可以排除不支持媒体查询的浏览器
screen ：设备类型
max-width | max-height
min-width | min-height
3. 响应式图片【性能优化】
<picture>
<source srcset="1.jpg" media='(min-width:1000px)'>
<source srcset="2.jpg" media='(min-width:700px)'>
<img srcset="3.jpg">
</picture>
一、什么情况下采用响应式布局

数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局

例如：公司的官网、专题页面

特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。

二、pc + 移动端应该做什么样的布局方案
注意：访问量还可以或者比较大，类似于淘宝网。

pc是一套，会加入一点点响应式。
移动端是一套，会使用自适应的布局方式。

三、pc的设计图

ui：1980
笔记本电脑：1280
ui图的宽度和电脑的宽度不对应该怎么办？
1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸
2. 换1980的电脑

四、移动端的设计图

宽度：750
因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。
var、let、const 共同点都是可以声明变量的

区别一：
var 具有变量提升的机制
let和const没有变量提升的机制
区别二：
var 可以多次声明同一个变量
let和const不可以多次声明同一个变量
区别三：
var、let声明变量的
const声明常量

var和let声明的变量可以再次赋值，但是const不可以再次赋值了。
区别四：
var声明的变量没有自身作用域
let和const声明的变量有自身的作用域
console.log( str );//undefined
var str = '你好';

console.log( num );//报错
let num = 10;
function demo(){
var n = 2;
if( true ){
var n = 1;
}
console.log( n );//1
}
demo();

function demo(){
let n = 2;
if( true ){
let n = 1;
}
console.log( n );//2
}
demo();
const obj = {
a:1
}
obj.a = 11111;
console.log( obj )

const arr = ['a','b','c'];
arr[0]= 'aaaaa';
console.log( arr );
const a = {a:1,b:4};
const b = {b:2,c:3};

</pre>

8.2 SEO

token是后端生成的

token + cookie : 前端判断是否过期
token + localStorage : 后端判断是否过期给前端返回code码，前端判断code码等于多少

</pre>

8.1 token

第八章其他类面试题

7.3 接口安全

用户输入的文本框中不可以有特殊符号（引号、空格）

</pre>

7.2 SQL注入

用户输入的文本框，需要替换某些特殊字符（ <> ... ）

</pre>

7.1 XSS攻击

第七章 WEB安全篇

1. 端口不同

http ：80端口
https ：443端口

2. https比http更加安全

***https就是证书

</pre>

6.2 http和https的区别？

前端：jsonp、vue的项目可以设置代理（打包后无效。解决：.ENV文件）
后端：CORS

</pre>

6.1 跨域面试题

第六章面试题网络请求篇

1. 在ios键盘中首字母大写的问题?
<input type="text" autocapitalize='off'>
2. ios日期转换NAN问题
具体就是，new Date('2020-11-12 00:00:00')在ios中会为NAN
解决方案：用new Date('2020/11/12 00:00:00')的日期格式，或者写个正则转换
3. 在移动端使用click事件有300ms延迟的问题
禁止双击缩放===》meta:user-scalabel=no
4. 移动端touch事件有穿透（点透）的问题，怎么解决？
4.1 阻止默认行为 : e.preventDefault();
4.2 fastclick.js
5. 安卓部分版本input的placeholder偏上
input{
line-height:normal;
}

</pre>

5.1 页面样式兼容

第五章面试题兼容篇

1. keep-alive 缓存组件
2. 路由懒加载
3. 内容使用
v-if和v-show
computed、watch、methods
4. Object.freeze ：冻结对象
纯展示类的接口数据，冻结就可以了
5. 使用ui组件按需引入

</pre>

4.5 vue优化

1. 长列表
2. 项目的html文件、css文件、图片、js文件压缩打包

</pre>

4.4 首屏优化

1. 减少重绘和回流
2. 改变位置使用transform
3. 动画尽量用requestAnimationFrame，不要用定时器

</pre>

4.3 渲染优化

1. 图片懒加载
2. 响应式图片
3. webp代替其他格式
4. 小图标可以改用字体图标

</pre>

4.2 图片优化

1. http请求
能不能减少（能不能合并）
2. 图片的雪碧图
3. script标签位置
4. link标签（css引入）

</pre>

4.1 加载优化

第四章面试题性能优化篇

在工具中，打if出现的条件编译

例如：

<h1>这是h5端</h1>

</pre>

面试题：条件编译

应用生命周期、页面生命周期、组件生命周期

</pre>

面试题：生命周期

3.3 uni-app面试题

工具==》详情==》本地设置==》不校验合法域名：项目上线前URL一定要请求到（不勾选也可以请求到数据）

</pre>

面试题：不校验URL

app.json进行配置

"window":{
"navigationStyle":"custom",
}

</pre>

面试题：如何自定义头部？

3.2 微信小程序面试题

M就是data的model层
V就是view视图层
VM就是理解为v-model原理实现，通过view更新model

</pre>

面试题：讲一下MVVM

利用diff算法可以更多提升dom之间对比的性能（采用虚拟dom数据进行对比）。

</pre>

面试题：diff算法

其实就是数据，把dom变成数据结构。

</pre>

面试题：什么是虚拟DOM

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
通过Object.defineProperty()来实现数据劫持的。

1.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

2.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

3.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

</pre>

面试题：双向绑定原理

场景：详情页(文章、商品)
router.js配置：
{
path: "/list",
name: "List",
children:[
{
path:"/list/:id",
name:'Details',
component: () =>
import("../views/Details.vue"),
}
],
component: () =>
import("../views/List.vue"),
},

</pre>

面试题：Vue动态路由

全局、路由独享、组件内

1. 全局
beforeEach、beforeResolve、afterEach
2. 路由独享
beforeEnter
3. 组件内
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

使用场景：判断是否登录，如果登录就next否则就跳转到登录页面

</pre>

面试题：路由导航守卫有哪些

1. 显式
http://localhost:8080/about?a=1
1.1 传：this. $router.push({ path:'/about', query:{ a:1 } }) 1.2 接：this.$ route.query.a

2. 隐式
http://localhost:8080/about
2.1 传：this. $router.push({ name:'About', params:{ a:1 } }) 2.2 接：this.$ route.params.a

</pre>

面试题：Vue路径传值

SPA是什么？单页面应用
缺点：
1. SEO优化不好
2. 性能不是特别好

</pre>

面试题：介绍一下SPA以及SPA有什么缺点

路由模式有俩种：history、hash
区别：
1. 表现形态不同
history:http://localhost:8080/about
hash:http://localhost:8080/#/about
2. 跳转请求
history : http://localhost:8080/id ===>发送请求
hash : 不会发送请求
3. 打包后前端自测要使用hash，如果使用history会出现空白页

</pre>

面试题：Vue路由模式

1. 自测==>修改路由模式
2. 代理不生效，使用ENV
3. 修改路径

</pre>

面试题：Vue项目打包上线

module.exports = {
publicPath:'./',
devServer: {
proxy: 'http://localhost:3000'
}
}

</pre>

vue.config.js

面试题：Vue设置代理

Vuex本身不是持久化存储

1. 使用localStorage自己写
2. 使用vuex-persist插件

</pre>

面试题：Vuex如何做持久化存储

mutaitons : 都是同步事物
actions : 可以包含任意异步操作

***在调试中就看出来

</pre>

面试题：Vuex中的mutaitons和actions区别

Vuex是单向数据流

</pre>

面试题：Vuex是单向数据流还是双向数据流？

state、getters、mutations、actions、modules

state 类似于组件中data，存放数据
getters 类型于组件中computed
mutations 类似于组件中methods
actions 提交mutations的
modules 把以上4个属性再细分，让仓库更好管理

</pre>

面试题：Vuex有哪些属性？

props ===> methods ===> data ===> computed ===>watch

</pre>

面试题：props和data优先级谁高？

1. computed vs methods区别
computed是有缓存的
methods没有缓存
2. computed vs watch区别
watch是监听，数据或者路由发生了改变才可以响应（执行）
computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
watch是当前监听到数据改变了，才会执行内部代码

</pre>

面试题：computed、methods、watch有什么区别？

父组件-->子组件：

1\. 父组件：
    <user-detail :myName="name" />

export default {
    components: {
        UserDetail
    }
    ......
}

2. 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。
export default {
props: ['myName']
}

子组件-->父组件：

    1\. 子组件
  <button @click="changeParentName">改变父组件的name</button>
  export default {
      methods: {
          //子组件的事件
          changeParentName: function() {
              this.$emit('handleChange', 'Jack')
          }
      }
  }
2\. 父组件
  <child @handleChange="changeName"></child>

  methods: {
      changeName(name) {  
          this.name = name
      }
  }

兄弟组件之间：bus.js

</pre>

面试题：Vue组件传值

stylus样式穿透使用：>>>
sass和less使用：/deep/
通用使用： :v-deep

</pre>

面试题：Vue中如何做样式穿透

1. 作用：让样式在本组件中生效，不影响其他组件。
2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

</pre>

面试题：scoped原理

获取更新后的dom内容

</pre>

面试题：nextTick是什么?

来获取dom的

</pre>

面试题：ref是什么？

v-for的优先级要比v-if高
***是在源码中体现的：function genElement

</pre>

面试题：v-if和v-for优先级

1. 展示形式不同
v-if是创建一个dom节点
v-show 是display:none 、 block

2. 使用场景不同
初次加载v-if要比v-show好，页面不会做加载盒子
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

</pre>

面试题：v-if和v-show区别

面试题：谈谈你对keep-alive的了解

面试题：Vue2.x 生命周期

3.1 Vue面试题

第三章面试题框架篇

面试题：GitFlow

面试题：解决冲突

面试题：git常用命令

2.3 Git面试题

面试题：webpack插件

2.2 webpack面试题

面试题：some和every的区别

面试题：find和filter的区别

面试题：Promise有几种状态

面试题：箭头函数和普通函数有什么区别？

方式三：自己封装方法

方式二：...

方式一：Object.assign

面试题：将下列对象进行合并

考题三：可以修改

考题二：

考题一：let和const没有变量提升性

面试题：作用域考题

面试题：var、let、const区别

2.1 ES6面试题

第二章面试题进阶篇

布局方案

面试题：响应式

面试题：自适应

面试题：禁止ios和android用户选中文字

面试题：禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：rem和em区别

面试题：怎么让Chrome支持小于12px 的文字？

面试题：如何关闭IOS键盘首字母自动大写

面试题：::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

面试题：什么是语义化标签

1.4 H5/C3面试题

面试题：localStorage、sessionStorage、cookie的区别

面试题：深拷贝和浅拷贝

面试题：sort背后原理是什么？

场景：

区别：

共同点：功能一致

面试题：说一下call、apply、bind区别

方式四：组合式继承

方式三：借用构造函数继承

方式二：原型链继承

方式一：ES6

面试题： JS继承有哪些方式

面试题：原型链

面试题：闭包

面试题：new操作符具体做了什么

面试题：找出字符串出现最多次数的字符以及次数

console.log( 'world'.addPrefix('hello') ) 控制台会输出helloworld

给字符串对象定义一个addPrefix函数，当传入一个字符串str时，它会返回新的带有指定前缀的字符串，例如：

面试题：给字符串新增方法实现功能

面试题：找出多维数组最大值

方式三：sort

方式二：indexOf

方式一：new set

面试题：JS数组去重

面试题：slice是干嘛的、splice是否会改变原数组

方式五：constructor

方式四：isPrototypeOf()

方式三：原型prototype

方式二：instanceof 【可写,可不写】

方式一：isArray

面试题：JS判断变量是不是数组，你能写出哪些方法？

考题四：

考题三：

考题二：

考题一：

面试题：JS作用域+this指向+原型的考题

考题三：

考题二：

考题一：

JS对象注意点：

面试题：JS对象考题

考题三：

考题二：

考题一：

面试的时候怎么看：

面试题：JS作用域考题

面试题：JS微任务和宏任务

面试题：==和===有什么不同？

面试题：null和undefined的区别

考题二：

考题一：

面试题：JS数据类型考题

面试题：JS数据类型有哪些？

面试题：延迟加载JS有哪些方式？

1.3 JavaScript基础面试题

面试题：opacity 和 rgba区别

面试题：display: none;与visibility: hidden;的区别

面试题：css sprite是什么,有什么优缺点

面试题：什么是CSS reset？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：position有哪些值？分别是根据什么定位的？

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

面试题：清除浮动有哪些方式？

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：display有哪些值？说明他们的作用。

方式二：

方式一：

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：用CSS画一个三角形

面试题：CSS优先级算法如何计算？

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：line-height和heigh区别【大厂】

面试题：介绍一下CSS的盒子模型

1.2 CSS面试题

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

面试题：img标签的title和alt有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：页面导入样式时，使用link和@import有什么区别？

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,390评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,821评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,632评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,170评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,033评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,098评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,511评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,204评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,479评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,572评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,341评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,893评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,171评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,486评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,676评论 2赞 335

2022年web前端面试题

推荐阅读更多精彩内容