2021前端面试及答案----（全部涉及）
更新中…
小编从四月十九号开始了面试之旅也是成功蹭到了五一带薪假，线下面试面了五家全过，（牛马？）过程中被问到的问题和面试前小编自己刷过 感觉重要的题跟大家分享一下希望对大家有所帮助，没有更完（上班划水之余写的要下班了）会持续更新的，如果大家感觉有帮助的话点个关注么么哒~
2021面试题–HTML篇
1、的title和alt有什么区别?
1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要
2、 html5有哪些新特性、移除了那些元素？
（1）新增特性
a、新增标签
article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、
hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section
b、新增localStorage、sessionStorage
c、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）
d、Geolocation 地理定位
（2）移除特性
<basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，<u> 下划线，<big> 大字体
<strike> 中横线，<tt> 文本等宽
3、WEB标准以及W3C标准是什么?
1、标签闭合
2、标签小写
3、嵌套正确
4、外部链接css和js
5、提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）
4、xhtml和html有什么区别?
1、XHTML 元素必须被正确地嵌套。
2、XHTML 元素必须被关闭。
3、标签名必须用小写字母。
4、XHTML 文档必须拥有根元素。
5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行
块级元素
1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行
7、HTML全局属性(global attribute)有哪些
html属性赋予元素意义和语境，可以用于任何的html元素
1、class：为元素设置类标识
2、data-*：为元素增加自定义属性
3、id：元素id，文档内唯一
4、lang：元素内容的语言
5、style：行内css样式
6、title：元素相关的建议信息
7、dir：规定元素中内容的文本方向（ltr：从左到右， rtl：从右到左）
8、contenteditable：html新增属性，设置true后可编辑元素
9、hidden：隐藏一个html元素
8、Canvas和SVG有什么区别？
Canvas
1、可伸缩矢量图形
2、放大缩小不会失真
SVG
1、HTML5新加的元素
2、使用XML描述2D图形的语言
9、HTML5 为什么只需要写 DOCTYPE HTML？
<!DOCTYPE HTML> 是文档类型声明，它声明了文档类型为html5，告诉浏览器和其他开发者，该文档使用的是html5标准
2021前端面试题–CSS篇
1、实现一个div在不同分辨率下的水平垂直居中
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
2、左右固定，中间自适应样式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、阐述清楚浮动的几种方式（常见问题）
1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示
2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
4、解释css sprites ，如何使用？
1、什么是精灵图
将一些小图标放在一张图上
2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗
3、精灵图的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一个数是x轴， 第二个数是y轴
5、box-sizing常用的属性有哪些？分别有什么作用？
（1）content-box
宽高是元素本身的宽高 不包含border+padding
（2）border-box
元素的宽高已经包含了border+padding
（3）inherit
从父元素继承box-sizing属性
6、CSS样式覆盖规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
7、请简要描述margin重合问题，及解决方式
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin
解决：（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block
8、对标签有什么理解
1、meta是html文档头部的一个标签，这个标签对用户不可见，是给搜索引擎看的。
2、meta标签属性用法分成两大类(详情看主页)
3、<meta charset="UTF-8"> 使用的编码格式，大部分是utf-8!
9、display none visibility hidden区别？
10、重绘和回流（哪些情况重绘，哪些回流）
1、回流：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
2、重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
触发回流或重绘的情况：
• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
11、说说你对语义化的理解？
1、去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
12、为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
13、移动端适配1px问题
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
14、居中为什么要使用transform（为什么不使用marginLeft/Top）
transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些
top/left属于布局属性，会引起页面layout回流和repaint重绘
15、介绍css3中position:sticky
16、上下固定，中间滚动布局如何实现
17、css实现border渐变
18、纯css实现一个高宽比为1：3的盒子 列举几种方式
19、 css实现一个旋转的圆
20、BFC，IFC，FFC的区别
21、css3有哪些新特性
22、CSS3新增伪类有那些？
23、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
24、display:inline-block 什么时候不会显示间隙？
25、行内元素float:left后是否变为块级元素？
26、在网页中的应该使用奇数还是偶数的字体？为什么呢？
27、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
28、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
29、CSS3动画（简单动画的实现，如旋转等）
30、base64的原理及优缺点
31、流体布局、圣杯布局、双飞翼布局
32、stylus/sass/less区别
33、postcss的作用
34、垂直塌陷及解决方法
2021面试题–javaScript篇(ES6)
1、es6的新特性
const let
模板字符串
箭头函数
函数的参数默认值
对象和数组解构
for...of 和 for...in
2、promise的使用，怎么用es5实现promise
3、if有作用域吗
只有函数有作用域，if是没有作用域的。
但是有一种情况会让if看上去有作用域，就是在if {}语句中，使用const、let，他们会有块级作用域。
4、原型链和作用域链的区别
（1）原型链
当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，
直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object
5、js判断类型
1、typeof
检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型
2、instanceof
不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系
3、constructor
null、undefined没有construstor方法，因此constructor不能判断undefined和null。
但是contructor的指向是可以被改变，所以不安全
4、Object.prototype.toString.call
全类型都可以判断
6、数据类型怎么检测
1、typeof
例：console.log(typeof true) // boolean
2、instanceof
例：console.log([1,2] instanceof Array) // true
3、constructor
例： console.log([1, 2].constructor === Array) // ture
4、Object.prototype.toString.call
例：Object.prototype.toString.call([1, 2]) // [object Array]
7、普通函数和箭头函数的区别
1、普通函数
可以通过bind、call、apply改变this指向
可以使用new
2、箭头函数
本身没有this指向，
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时，this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错，因为箭头函数没有constructor
8、如何用原生js给一个按钮绑定两个onclick事件？
var btn = document.getElementById('btn')
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)
function fn1 () {
console.log('我是方法1')
}
function fn2 () {
console.log('我是方法2')
}
9、document.write和innerHTML的区别
document.write 将内容写入页面，清空替换掉原来的内容，会导致重绘
document.innerHTML 将内容写入某个Dom节点，不会重绘
10、栈和堆的区别
1、堆
动态分配内存，内存大小不一，也不会自动释放
2、栈
自动分配相对固定大小的内存空间，并由系统自动释放
3、基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。
4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据
11、undefined 和 null 区别
1、null
什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）
2、undefined
没有设置值的变量，会自动赋值undefined
3、区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
12、eval()的作用
eval(string) 函数计算 JavaScript 字符串，并把它作为脚本代码来执行
如果参数是一个表达式，eval() 函数将执行表达式；
如果参数是Javascript语句，eval()将执行 Javascript 语句；
如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数。
特殊：eval("{b:2}") // 声明一个对象
eval("（{b:2}）") // 返回对象{b:2}
13、JS哪些操作会造成内存泄露
内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
1、意外的全局变量
2、闭包
3、没有清理的dom元素
dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调
14、谈谈垃圾回收机制方式及内存管理
JavaScript 在定义变量时就完成了内存分配。当不在使用变量了就会被回收，因为其开销比较大，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
（1）垃圾回收
标记清除法
当变量进入环境时，将这个变量标记为'进入环境'。当标记离开环境时，标记为‘离开环境’。离开环境的变量会被回收
引用技计数法
跟踪记录每个值被引用的次数，如果没有被引用，就会回收
（2）内存管理
内存分配=》内存使用=》内存回收
15、什么是闭包，如何使用它，为什么要使用它？
（1）闭包就是能够读取其它函数内部变量的函数
（2）使用方法：在一个函数内部创建另一个函数
（3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
（4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）
16、请解释JSONP的工作原理，以及它为什么不是真正的AJAX
JSONP 是一种非正式传输协议，允许用户传递一个callback给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。
它们的实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
jsonp只支持get请求，ajax支持get和post请求
17、请解释一下JavaScript的同源策略
同源指协议，域名，端口相同，
同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。
18、关于JS事件冒泡与JS事件代理（事件委托）
（1）事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window，过程就像冒泡泡 。如果在某一层想要中止冒泡，使用 event.stopPropagation() 。
但是当大量标签大量事件的时候先然不可能为每个元素都加上事件，（事件绑定占用事件，浏览器要跟踪每个事件，占用更多内存。而且并不是所有事件都会被用户使用到）。所以需要事件委托来解决这个问题。
（2）事件委托
将事件给最外层的元素，自己不实现逻辑，由最外层元素来代理。（判断事件源，做不同处理）
19、new操作符到底到了什么
（1）var obj = new Fun() 做了三件事
var obj = {} // 创建一个空对象
obj.__proto__ = Fun.prototype //空对象的__proto__指向构造函数的原型对象
Fun.call(obj) // 构造函数this指向替换成obj
（2）实现一个new
function _new(fn, ...arg) {
const obj = Object.create(fn.prototype);
const ret = fn.apply(obj, arg);
// 根据规范，返回 null 和 undefined 不处理，依然返回obj，不能使用
// typeof result === 'object' ? result : obj
return ret instanceof Object ? ret : obj;
}
20、js延迟加载的方式有哪些？
（1）defer属性
<script src="test.js" defer="defer"></script>
立即下载，但是会等到整个页面都解析完成之后再执行
（2）async属性
<script src="test.js" async></script>
不让页面等待脚本下载和执行（异步下载），但是无法控制加载的顺序
（3）动态创建script标签
（4）使用定时器延迟
（5）让js最后加载
21、promise、async有什么区别
1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。
2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解
区别，async/await让代码更像同步，进一步优化了代码
22、== 和 = = =的区别，什么情况下用相等= =
”==” 是判断转换后的值是否相等,
”===” 是判断值及类型是否完全相等
不需要判断类型时可以使用==
23、bind、call、apply的区别
var a = {
user:"渔老板",
fn: function(arg1, arg2) {
console.log(this.user) // 渔老板
console.log(arg1+ arg2) // 2
}
}
var b = a.fn
1、bind
var c = b.bind(a) // 返回一个已经切换this指向的新函数
c(1,1)
2、apply
b.apply(a, [1, 1]) // 将b添加到a环境中
第一个参数是this指向的新环境
第二个参数是要传递给新环境的参数
注意： 第一个参数为null时表示指向window
3、call
b.call(a, 1, 1) // 将b添加到a环境中
第一个参数是this指向的新环境
第二、三...个参数是传递给新环境的参数
注意： 第一个参数为null时表示指向window
小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向
24、如何判断链表是否有环
25、介绍暂时性死区
在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。
26、两个对象如何比较
有思路即可，步骤：
（1）判断两个类型是否对象
（2）判断两个对象key的长度是否一致
（3）判断属性value值的数据类型，根据不同数据类型做比较
a、是对象，重复这个步骤
b、是数组，转字符串比较
c、是基本类型，直接判断
27、介绍各种异步方案
（1）回调函数
（2）promise
（3）async/awai
28、Promise和Async处理失败的时候有什么区别
（1）Promise错误可以在构造体里面被捕获，而async/await返回的是promise,可以通过catch直接捕获错误。
（2）await 后接的Promise.reject都必须被捕获，否则会中断执行
29、JS为什么要区分微任务和宏任务
（1）js是单线程的，但是分同步异步
（2）微任务和宏任务皆为异步任务，它们都属于一个队列
（3）宏任务一般是：script，setTimeout，setInterval、setImmediate
（4）微任务：原生Promise
（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务
30、Promise和setTimeout执行先后的区别
Promise是微任务，setTimeout是宏任务，先执行微任务，如有还有微任务执行完微任务再执行下一个宏任务
31、单例、工厂、观察者项目中实际场景
32、添加原生事件不移除为什么会内存泄露
比如以下代码：
var button = document.getElementById('button');
function onClick(event) {
button.innerHTML = 'text';
}
button.addEventListener('click', onClick);
给元素button添加了一个事件处理器onClick, 而处理器里面使用了button的引用。而老版本的 IE 是无法检测 DOM 节点与 JavaScript 代码之间的循环引用，因此会导致内存泄漏。
如今，现代的浏览器（包括 IE 和 Microsoft Edge）使用了更先进的垃圾回收算法，已经可以正确检测和处理循环引用了。换言之，回收节点内存时，不必非要调用 removeEventListener 了。
33、setTimeout(0)和setTimeout(2)之间的区别
定时器表面意思是过指定时间后执行，但是真正的含义是每过指定时间后，会有fn进入事件队列
(1)setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行
(2)setTimeout(fn,1) 1毫秒后执行，但是因为要先执行前面的宏任务，所以不一定就是在一毫秒后执行，取决于队列里任务执行的速度
34、for…in 和 object.keys的区别
Object.keys不会遍历继承的原型属性
for...in 会遍历继承的原型属性
35、XML和JSON的区别？
1，xml是重量级的，json是轻量级的。
2，xml在传输过程中比较占带宽，json占带宽少，易于压缩。
3，xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。
36、说说你对AMD和Commonjs的理解
两者都是为了实现模块化编程而出现的
（1）commonjs
通常被应用于服务器，在服务器端，模块的加载和执行都在本地完成，因此，CommonJS并不要求模块加载的异步化。
核心思想：
一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。
（2）AMD
可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定
（3）CMD
懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
37、js的涉及模式
单例模式、策略模式、代理模式、迭代器模式...等等等等（了解更多自行百度）
38、[“1”, “2”, “3”].map(parseInt) 答案是多少？
这题看到的时候都懵逼了，还是太菜了 qaq
（1）map用法：
arr.map(function(el, index, arr) {
return el
})
map方法接收一个函数参数，并且这个函数可以接收三个参数
el：遍历过程中的当前项，
index：遍历过程中的当前下标
arr: 原数组
（2）parseInt用法：
parseInt(str, num)
根据num解析str，并返回一个整数。
str: 要解析的字符串，如果字符第一个数不能被转换，返回NaN。
num: 基数，介于 2 ~ 36 之间，如果传0，则默认用10计算。num不在区间内，返回NaN
（3）所以这道题，关键点就在num
el和index 相当于 str 和 num 带入一下
parseInt('1', 0) // '1' 用基数10算 为1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN
39、常见兼容性问题？
（1）事件对象兼容
e = e || window.event;
（2）阻止事件冒泡兼容
event.stopPropagation? event.stopPropagation():event.cancelBubble=true;
（3）阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
（4）事件监听兼容
addEventListener ? addEventListener : attachEvent()
removeEventListener() ? removeEventListener() : detachEvent()
（5）事件目标对象兼容
var src = event.target || event.srcElement;
40、说说你对promise的了解
（1）promise是为解决异步处理回调金字塔问题而产生的
（2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变
（3）then接收resolve()，catch接收reject()
41、模块化开发怎么做？
42、介绍js有哪些内置对象？
String对象、Array对象、Object对象、Number对象
Math对象、Date对象、Boolean对象
43、说几条写JavaScript的基本规范？
1、不要在同一行声明多个变量
2、使用 === 和 !== 来比较
3、不要使用全局函数
4、变量在使用之前的位置声明（减少变量提升干扰）
5、if用花括号包起来即使只有一行
6、写注释
44、JavaScript有几种类型的值？，你能画一下他们的内存图吗？
栈：原始数据类型（Undefined Null Boolean Number String）
堆：引用数据类型（对象、数组、函数）
内存图求求你自己百度
45、href="#"与href=“javascript:void(0)的区别”？
1、# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
2、javascript:void(0), 仅仅表示一个死链接。
如果你要定义一个死链接请使用 javascript:void(0)
46、对this的理解
1、单独使用，this表示全局对象
2、在函数中，this表示全局对象
3、在对象的一个函数方法中，this表示这个对象
4、可以通过apply、bind来更改this的指向
ps： this永远指向的是最后调用它的对象，仅当它在对象的一个函数方法中时会有差异
47、promise.all 返回什么
如果没有报错，返回执行结果[res1, res2,...]
如果报错，则返回第一个报错的promise的结果
48、多个await的执行顺序，如果要同步执行如何实现？
使用Promise.all
promise.all是等所有异步操作都完成之后返回结果，相当于让这些异步同步了
–累-死-了-休-息一-分-钟
2021年前端面试题–http浏览器篇
1、浏览器缓存有哪些，通常缓存有哪几种
2、谷歌浏览器的核心是？
3、打开谷歌会有四个进程，为什么？
4、前端怎么解决跨域
5、cookies sessionStorage和localstorage区别
6、http 和 https 有何区别？如何灵活使用？
7、常见的HTTP状态码
8、优雅降级和渐进增强
求你打开我的主页看，如果我没记错是有的
9、浏览器是如何渲染页面的？
10、从输入url到显示页面，都经历了什么
11、离线缓存
12、浏览器事件流向
13、Http报文的请求会有几个部分
14、cookie和token都存放在header里面，为什么只劫持前者
15、如何设计一个localStorage，保证数据的实效性
16、http缓存控制
17、xsrf跨域攻击的安全性问题怎么防范
18、EventLoop的理解
19、浏览器渲染触发在EventLoop的哪个阶段，触发机制是怎么样的
20、HTTP的几种请求方法用途
21、介绍一下你对浏览器内核的理解？
22、HTML5的离线储存怎么使用，工作原理能不能解释一下？
23、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
24、iframe有那些缺点？
25、ajax原理
26、模块化开发怎么做？
27、web开发中会话跟踪的方法有哪些
28、强缓存和协商缓存的过程
以后慢慢更，先进入VUE篇吧!
2021前端面试题–vue篇
1、多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块？
（1）公共的数据部分可以提升至和他们最近的父组件，由父组件派发
（2）公共数据可以放到vuex中统一管理，各组件分别获取
2、key主要是解决哪一类的问题，为什么不建议用索引index（重绘）
（1）key的作用主要是为了高效的更新虚拟DOM
（2）当以index为key值时，如果数组长度发生变化，会导致key的变化，比如删除其中某一项，那么index会相应变化。
所以用index作为key和不加index没有什么区别，都不能提升性能。一般用每项数据的唯一值来作为key，就算数组长度变化，也不会影响到这个key
3、介绍虚拟DOM`
（1）让我们不用直接操作DOM元素，只操作数据便可以重新渲染页面
（2）虚拟dom
虚拟dom是为了解决浏览器性能问题而被设计出来的
当操作数据时，将改变的dom元素缓存起来，都计算完后再通过比较映射到真实的dom树上
（3）diff算法比较新旧虚拟dom
如果节点类型相同，则比较数据，修改数据
如果节点不同，直接干掉节点及所有子节点，插入新的节点
如果给每个节点都设置了唯一的key，就可以准确的找到需要改变的内容，否则就会出现修改一个地方导致其他地方都改变的情况。
比如A-B-C-D, 我要插入新节点A-B-M-C-D,实际上改变的了C和D。但是设置了key，就可以准确的找到B C并插入
4、介绍高阶组件
？？？？？别问，问就是自己百度算我求你了！
5、如何解决props层级过深的问题
(1)使用vuex
(2)传递数据，使用以下接收（均不含被props接收的数据）
this.$attrs 接收属性
this.$listeners 接收事件（不含被 .native 修饰符的事件）
6、vue中如何编写可复用的组件
（1）以组件功能命名
（2）只负责ui的展示和交互动画，不要在组件里与服务器打交道（获取异步数据等）
（3）可复用组件不会因组件使用的位置、场景而变化。尽量减少对外部条件的依赖。
7、vue中对象更改检测的注意事项
懂？
8、解决非工程化项目初始化页面闪动问题
vue页面在加载的时候闪烁花括号{{}}，使用v-cloak，隐藏未编译时候的标签
//css样式
[v-cloak] {
display: none;
}
//html代码
<div v-cloak>
<ul>
<li >{{ text }}</li>
</ul>
</div>
9、十个常用的自定义过滤器
（1）去除空格
（2）时间转换
（3）大小写转换
（4）字符串替换
（5）金额字符转金额/数字转金额字符
（6）保留两位小数
（7）判断字符串长度并省略
...
根据自己常用的来说（不然容易尬住，你懂得hhhhhh）
10、vue弹窗后如何禁止滚动条滚动？
methods : {
//禁止滚动
stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滑动限制***/
move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);
}
11、完整的 vue-router 导航解析流程
12、vue-router的几种实例方法以及参数传递
字太多了自己百度
13、vue-router如何定义嵌套路由？
baidu
14、vue-router如何实现路由懒加载（ 动态加载路由 ）
我是真滴懒，我保证下一个题会有答案不然一辈子没头发
15、vue-router路由的两种模式
vue-router中默认使用的是hash模式
（1）hash模式
http://localhost:8080/#/pageA
hash 的值为 #/pageA
改变hash，浏览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联起来了。
（2）history模式
http://localhost:8080/ 正常的而路径，并没有#
16、vuex的核心概念
state => 基本数据
getters => 从基本数据派生的数据
mutations => 修改数据，同步
actions => 修改数据，异步
modules => 模块化Vuex
17、vue如何优化首屏加载速度？
（1）按需加载组件，不一次性加载所有组件
（2）减少打包js，如果打包后的js文件过大，会阻塞加载。如下：
A、在index.html文件中：
<script src="/static/common/js/vue.min.js"></script>
B、在vue.config.js文件中配置:
config.externals({
vue: 'Vue',
})
配置两个步骤，不打包vue
（3）关闭sourcemap，开启压缩代码
vue.config.js文件中配置：productionSourceMap: false,
（4）加个好看的loading效果
18、Vue.js 全局运行机制
19、响应式系统的基本原理
百度一下你就知道
20、怎么注册插件
使用全局方法Vue.use()
Vue.use( MyPlugin )
com.js中
import com from './xx.vue'
let test = {}
test.install = function(Vue,options){
Vueponent(panel.name, panel) // 注册全局组件
}
export default com
main.js中
import com from './com.js'
Vue.use(com)
所有vue文件中都可以调用组件<com></com>
21、如何编译template 模板？
compile编译会有三个过程
（1）parse 根据正则进行字符串解析，得到指令、class、style等数据，形成语法树（AST）
（2）对 parse 生成的 AST 进行静态内容的优化，标记静态节点（和数据没有关系不需要每次都刷新的内容），标记静态根节点。
（3）generate 生成 render
生成 render 的 generate 函数的输入也是 AST，它递归了 AST 树，为不同的 AST 节点创建了不同的内部调用方法，等待后面的调用。
看不懂的给你们直通车：https://segmentfault/a/1190000012922342
22、diff算法
diff算法比较新旧虚拟dom
如果节点类型相同，则比较数据，修改数据
如果节点不同，直接干掉节点及所有子节点，插入新的节点
如果给每个节点都设置了唯一的key，就可以准确的找到需要改变的内容，否则就会出现修改一个地方导致其他地方都改变的情况。比如A-B-C-D, 我要插入新节点A-B-M-C-D,实际上改变的了C和D。但是设置了key，就可以准确的找到B C并插入
23、批量异步更新策略及 nextTick 原理？
（1）批量异步策略
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
（2）nextTick
在下一次DOM更新循环结束之后执行延迟回调
24、vue中proxy代理？
百度一下吧
25、vue开发命令 npm run dev 输入后的执行过程
（1）npm run dev是执行配置在package.json中的脚本
（2）调用了webpack配置文件
（3）配置文件中调用了main.js
（4）main.js用到了一个html元素#app，引用路由等开始vue的模板编译
26、devDependencies和dependencies的区别
（1）devDependencies
用于本地开发，打包时生产环境不会打包这些依赖
（2）dependencies
开发环境能用，生产环境也能用。生产环境会被打包
27、依赖版本~和^的区别
（1）~
会匹配最近的小版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0
（2）^
会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0
28、插件机制
我劝你去百度了解一下，爱去不去
29、router的meta有什么用
在meta对象中可以设置一些状态，通常设置标题或是否需要缓存。$route.meta.keepAlive/$route.meta.title
{
path:"/test",
name:"test",
component:()=>import("@/components/test"),
meta:{
title:"测试页面", //配置title
keepAlive: true //是否缓存
}
}
30、如果子组件直接修改父组件的值会发生什么？怎么解决，要修改多个数据怎么办？
如果修改的不是引用类型的值时会报错，告诉我们不能直接修改父组件的值。
(1)可以使用.sync修饰符来修改值，对一个 prop 进行“双向绑定”。（注意.sync 修饰符的 v-bind 不能和表达式一起使用）
(2)父组件将改变值的方法传递给子组件
2021前端面试题–webpack篇
1、webpack里面的插件是怎么实现的
2、dev-server是怎么跑起来
3、使用过webpack里面哪些plugin和loader
4、webpack整个生命周期，loader和plugin有什么区别
5、webpack打包的整个过程
6、一般怎么组织CSS（Webpack）
7、如何配置把js、css、html单独打包成一个文件
8、webpack和gulp的优缺点
9、使用webpack构建时有无做一些自定义操作
10、webpack的热更新是如何做到的？说明其原理？
（下次再更！）
2021年前端面试题-通信/编程/原理篇
为什么会有这个篇章呢？
这些都是计算机或编程方面的一些知识点啦爱记不记！
一、原理篇
1、介绍观察者模式
2、介绍中介者模式
3、观察者和订阅-发布的区别，各自用在哪里
4、介绍事件代理以及优缺点
5、tcp3次握手
6、tcp属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(ip)-> 4 传输层(tcp) -> 5 应用层(http)）
7、前端开发中用到哪些设计模式
8、介绍下数字签名的原理
8、Promise.all实现原理
二、算法/编程篇
1、介绍AST（Abstract Syntax Tree）抽象语法树
2、柯里化函数两端的参数具体是什么东西
3、介绍二叉搜索树的特点
4、[1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]
5、如何找0-5的随机数，95-99呢
6、手写数组扁平化函数
7、写一个倒计时函数
8、写一个函数，给定一棵树，输出这棵树的深度
9、写一个函数，给定一个url和最大深度maxdeep，输出抓取当前url及其子链接深度范围内的所有图片
10、写一个函数，给定nodes=[]，每一个节点拥有id,name,parentid，输出一个属性列表的展示(涉及dom操作)
11、"123456789876543212345678987654321…"的第n位是什么？
三、测试篇
1、前端怎么做单元测试
2、pm2怎么做进程管理，进程挂掉怎么处理
3、不用pm2怎么做进程管理
四、了解篇
1、对PWA有什么了解
2、RESTful常用的Method
3、base64为什么能提升性能，缺点
4、介绍webp这个图片文件格式
5、介绍DNS解析
6、介绍SSL和TLS
7、介绍异步方案
8、对无状态组件的理解
9、介绍快速排序
10、介绍下DFS深度优先
五、通信篇
1、ajax如何处理跨域
2、Ajax发生跨域要设置什么（前端）
3、跨域jsonp方案需要服务端怎么配合
4、Async里面有多个await请求，可以怎么优化（请求是否有依赖）
5、ajax的步骤
6、CORS如何设置
7、jsonp为什么不支持post方法
8、axios有什么特点？
六、优化及语义
1、前端需要注意哪些SEO
2、如何进行网站性能优化
3、语义化的理解
4、CSS在性能优化方面的实践
更多推荐
2021前端面试及答案---（全部涉及比较全）
发布评论