2024年Web前端最新前端面试八股文【很经典很全面字字珠玑】【建议收藏+关 ...

嚴華 · 2024-7-11 05:49:52

文末

技术是没有尽头的，也是学不完的，最紧张的是活着、不秃。
零底子入门的时间看书还是看视频，我以为成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最紧张的是在自学的过程中，肯定不要眼高手低，要实战，把学到的技术投入到项目当中，解决题目，之后进一步锤炼本身的技术。
自学最怕的就是缺乏自驱力，肯定要自律，杜绝“三天捕鱼两天晒网”，到末了白忙活一场。
高度自律的同时，要保持耐烦，不扬弃不放弃，切勿自怨自艾，每天给本身一点点鼓励，学习的干劲就会很足，不轻易犯困。
技术学得手后，找工作的时间肯定要好好准备一份简历，不要无头苍蝇一样去海投简历，轻易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的拍门砖。
拿到面试邀请后，在面试的过程中肯定要大大方方，尽力把本身学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
开源分享：【大厂前端面试题解析+焦点总结学习笔记+真实项目实战+最新解说视频】

+ [9. CSS样式文件引入的方式有哪些? link和@import的区别是?](#9_CSS_linkimport_87)
+ [10.display属性有什么作用？它有哪些值？](#10display_95)
+ [11. 介绍一下页面元素定位中的绝对定位、相对定位、流动定位、浮动定位，并阐述他们的区别](#11__101)
+ [12.谈谈你见过的浏览器不兼容问题？如何使用IETest?](#12IETest_111)
+ [13.display:none和visibility:hidden的区别是](#13displaynonevisibilityhidden_123)
+ [14.html5有哪些新特性，如何处理html5对低版本的兼容问题](#14html5html5_128)

复制代码

Javascript 篇
- 1.浏览器加载文件(repaint/reflow)
  - 2.cookie、localstorage和sessionStorage的区别
  - 3.浏览器本地存储与服务器端存储之间的区别
  - 4. src和href的区别?
  - 5. bind函数的兼容性
  - 6. 解释下事件代理
  - 7.解释下js中this是怎么工作的?
  - 8.什么是闭包? 闭包有什么作用?
  - 9. 什么是伪数组？
  - 10.undefined和null的区别, 还有undeclared:
  - 11. 简述事件冒泡机制。
  - 12.解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?
  - 13. 请指出 document load 和 document ready 两个事件的区别。
  - 15.浏览器端的js包括哪几个部分?
  - 16.DOM包括哪些对象?
  - - 16.1 常用的DOM方法:
      - 16.2 常用的DOM属性
  - 17. js有哪些数据类型?
  - 18.根本类型与引用类型有什么区别?
  - 19. 关于js的垃圾回收
  - 20.动画有哪些实现方法?
  - 21.浅拷贝
  - 22.深拷贝
  - 23. 说一下原型链
  - 24. new 操纵符详细做了什么？
  - 25.script 标签里的 async 和 defer 有什么区别？
  - 26. setTimeout 最小执行时间是多少？
  - 27. promise 的内部原理是什么？它的优缺点是什么？
  - 28.promise 和 async await 的区别是什么？
  - 29.浏览器的存储方式有哪些？
  - 30.token 存在 sessionstorage 还是 loaclstorage？
  - 31. token 的登录流程。
  - 32.页面渲染的过程是怎样的？
  - 33.DOM 树和渲染树有什么区别？
  - 34.精灵图和 base64 的区别是什么？
  - 35.svg 格式了解多少？
  - 36.HTTP 协议规定的协议头和请求头有什么？
  - 37.说一下什么是“同源策略”？
  - 38.防抖和节流是什么？
  - 39.有没有做过无感登录？
  - 40.大文件上传是怎么做的？
Vue篇
- 1. 生命周期
  - - 1.1 有哪些生命周期
      - 1.2首次进入页面大概组件，会执行哪些生命周期
      - 1.3在哪个阶段产生$el，$data
      - 1.4 第n（n>1）次进入组件会执行哪些生命周期
  - 2.对keep-alive的理解
  - 3.v-if 和 v-show的区别
  - 4.v-if 和v-for优先级
  - 5.ref是什么
  - 6.nextTick是什么
  - 7.scoped 原理
  - 8.CSS样式穿透
  - 9.组件的传值
  - 10.computed,methods,watch有什么区别
  - 11.props 和data 优先级比力
  - 12.Vue设置代理
  - 13. Vue打包路径和路由模式
  - 14.代理和环境变量
  - 15.Vue路由
  - 16.SPA及SPA的缺点
  - 17.怎样理解 MVVM 的？
  - 18.v-for 中的 key 值的作用是什么？
  - 19.VUE路径传值
  - 20.vue 中遍历全局的方法有哪些？
  - 21. vue 的过滤器怎么使用？
  - 22.怎样封装一个组件？
  - 23.封装一个可复用的组件，需要满意什么条件？
  - 24.路由导航保卫有哪些
  - 25.Vue动态路由
Vuex相关
- 1.Vuex 有哪些属性
  - 2.Vuex的简单使用
  - - modules 的使用
  - 3. Vuex中的mutations和actions的区别
  - 4. Vuex是单向还是双向数据流
  - 5. Vuex怎样做持久化存储

CSS篇

1.说一下 CSS 的盒模型

在 HTML 页面中的所有元素都可以看成是一个盒子
盒子的组成：内容 content、内边距 padding、边框 border、外边距 margin
盒模型的类型：
尺度盒模型
margin + border + padding + content
IE 盒模型
margin + content(border + padding)
控制盒模型的模式：box-sizing:content-box（默认值，尺度盒模型）、border-box（IE
盒模型）;

2.CSS 选择器的优先级？

CSS 的特性：继承性、层叠性、优先级
优先级：当同一个元素同时有多个样式可以对其举行作用时，按优先级最高的来。优先级低的可以覆盖优先级高的没写过的样式，其并非不生效
标签、类/伪类/属性、全局选择器、行内样式、id、!important

!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

3.隐蔽元素的方法有哪些？

display:none;
元素在页面上消失，不占据空间
opacity:0;
设置了元素的透明度为 0，元素不可见，占据空间位置
visibility:hidden;
让元素消失，占据空间位置，一种不可见的状态
position:absolute;
使用绝对定位将元素定位到可视地区外，因为其已经脱离文档流，不影响其他dom布局和窗口布局
clip-path
裁切图片，可以将图片裁切得啥也不剩。

4.px 和 rem 的区别是什么？

px 是像素，显示器上给我们出现画面的像素，每个像素的巨细是一样，绝对单元
长度
rem是相对单元，相对于 html 根节点的 font-size 的值，给 html节点的添加属性font-size:62.5%;时，
1rem = 10px; （16px*62.5%=10px）

5.重绘重排有什么区别？

重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和巨细
重绘：计算好盒模型的位置、巨细和其他一些属性之后，浏览器就会根据每个盒模型的特性举行绘制
浏览器的渲染机制
对 DOM 的巨细、位置举行修改后，浏览器需要重新计算元素的这些多少属性，就叫重排
对 DOM 的样式举行修改，好比 color 和 background-color，浏览器不需要重新计算多少属性的时间，直接绘制了该元素的新样式，那么这里就只触发了重绘

6.让一个元素程度垂直居中的方式有哪些？

定位+margin
定位+transform
flex 布局
grid 布局
table 布局
display:fixed

7.CSS 的哪些属性哪些可以继承？哪些不可以继承？

CSS 的三大特性：继承、层叠、优先级
子元素可以继承父类元素的样式

字体的一些属性：font
文本的一些属性：line-height
元素的可见性：visibility:hidden
表格布局的属性：border-spacing
列表的属性：list-style
页面样式属性：page
声音的样式属性

8.有没有用过预处理器？

预处理语言增长了变量、函数、混入等强大的功能
SASS LESS

9. CSS样式文件引入的方式有哪些? link和@import的区别是?

link连接方式和import导入方式，两者区别如下：

link链接时，不用写
一般而言，链接的效率要高于导入（因为导入样式表相称于是将所有的样式规则原样复制到当前源文件中，增长了代码量，从而影响了加载的速率）

10.display属性有什么作用？它有哪些值？

display:none 隐蔽标签元素
display:inline 在同一行显示
display:block 以块状方式独占一行显示

11. 介绍一下页面元素定位中的绝对定位、相对定位、流动定位、浮动定位，并阐述他们的区别

流动定位：
保持在尺度文档流中原有的位置，元素是按从左往右，从上往下的顺序摆放， left,top等属性无效
相对定位：
相对定位是指相对于盒子元素原有的位置举行偏移，不会脱离尺度文档流，也不对其他元素产生任何影响。需设定垂直方向和程度向的偏移量，分别是left、top、right、bottom。
绝对定位：
绝对定位是以某一个点为基准举行偏移。绝对定位是以最近的一个已定位的父级元素为基准，假如父级元素没有定位或没有父级元素，则以浏览器窗口为基准；会脱离尺度文档流，不影响同一级的盒子元素位置。
浮动定位：只能设置程度方向上的定位，指内容停靠在容器的左边还是右边。垂直方向上不能设浮动定位。

12.谈谈你见过的浏览器不兼容题目？怎样使用IETest?

以火狐代表的浏览器不支持如下用法：
（1）document.all
（2）unload事件
（3）innerText属性
很多版本的浏览器不支持clear:both来扫除浮动
各浏览器默认的margin和padding不同。解决方法： *{margin:0;padding:0;}
对盒子的解析尺度不同

IETest安装之后，即可以使用，可用来查抄当前代码在不同浏览器版本中的兼容性

13.display:none和visibility:hidden的区别是

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐蔽等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
visibility:hidden和opacity:0 有雷同效果

14.html5有哪些新特性，怎样处理html5对低版本的兼容题目

新特性：

拖拽开释(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 恒久存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

Javascript 篇

1.浏览器加载文件(repaint/reflow)

浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此常常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速率。

reflow
在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比力好。因为假如JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
CSS文件虽然不影响js文件的加载，但是却会造成js执行的阻塞。因为js代码执行前，浏览器必须保证css文件已下载和解析完成。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。
repaint
repaint（重绘）和reflow相似，但是在元素改变样式的时间触发，这个比reflow造成的影响要小，所以能触发repaint解决的时间就不要触发reflow。

2.cookie、localstorage和sessionStorage的区别

一、存储的时间有用期不同

cookie的有用期是可以设置的，默认的情况下是关闭浏览器后失效
sessionStorage的有用期是仅保持在当前页面，关闭当前会话页大概浏览器后就会失效
localStorage的有用期是在不举行手动删除的情况下是不停有用的

二、存储的巨细不同

cookie的存储是5kb左右，存储量较小，一般页面最多存储20条左右信息
localStorage和sessionStorage的存储容量是5Mb(官方介绍，大概和浏览器有部分差异性)

三、与服务端的通信

cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

四、读写操纵程度

cookie操纵繁琐 localStorage和sessionStorage 更简单些

3.浏览器本地存储与服务器端存储之间的区别

服务器端保存数据占用服务器端的资源，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。
浏览器端一般只用来存储小数据，而服务器则可以存储大数据。
服务器存储数据安全性高，浏览器只得当存储对安全不敏感的一般数

4. src和href的区别?

src指向外部资源的位置, 用于替换当前元素, 好比js脚本, 图片等元素
href指向网络资源所在的位置, 用于在当前文档和引用资源间确定接洽, 好比加载css

5. bind函数的兼容性

用法:
bind()函数会创建一个新函数, 为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
一个绑定函数也能使用new操纵符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

6. 解释下事件代理

事件代理又称之为事件委托。是JavaScript中绑定事件的常用本领，“事件代理”便是把本来需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡

7.解释下js中this是怎么工作的?

this 在 JavaScript 中紧张有以下五种使用场景。

作为函数调用，this 绑定全局对象，浏览器环境全局对象为 window 。
内部函数的 this 也绑定全局对象，应该绑定到其外层函数对应的对象上，这是 JavaScript的缺陷，用that替换。
作为构造函数使用，this 绑定到新创建的对象。
作为对象方法使用，this 绑定到该对象。
使用apply或call调用 this 将会被显式设置为函数调用的第一个参数

8.什么是闭包? 闭包有什么作用?

闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
作用:

匿名自执行函数 (function (){ … })(); 创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被开释，关键是这种机制不会污染全局对象。
缓存, 可保留函数内部的值
实现封装
实现模板

9. 什么是伪数组？

具有length属性
按索引方式存储数据
不具有数组的方法
伪数组存在的意义，是可以让平凡的对象也能正常使用数组的很多算法

我们可以通过Array.prototype.slice.call(fakeArray)将伪数组变化为真正的Array对象: 返回新数组而不会修改原数组
Array.prototype.slice.call(“abc”) ==> [‘a’,‘b’,‘c’]

10.undefined和null的区别, 还有undeclared:

null表示没有对象, 即此处不应有此值. 典范用法:
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的尽头。
（3）null可以作为空指针，只要意在保存对象的值还没真正保存对象,就应该明白地让该对象保存null值.
undefined表示缺少值, 即此处应该有值, 但还未定义.
（1）变量被声明了，但没有赋值时，就即是undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数即是undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
undeclared即为被污染的命名, 访问没有被声明的变量, 则会抛出异常, 终止执行. 即undeclared是一种语法错误

11. 简述事件冒泡机制。

从目标元素开始，往顶层元素传播。途中假如有节点绑定了相应的事件处理函数，这些函数都会被一次触发。假如想阻止事件起泡，可以使用e.stopPropagation()（Firefox）大概e.cancelBubble=true（IE）来构造事件的冒泡传播。

12.解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?

以function关键字开头的语句会被解析为函数声明，而函数声明是不答应直接运行的。
只有当解析器把这句话解析为函数表达式，才华够直接运行

(function foo(){
// code..
})()

复制代码

13. 请指出 document load 和 document ready 两个事件的区别。

执行时间不同
eady，表示文档布局已经加载完成（不包含图片等非文字媒体文件）
onload，指示页面包含图片等文件在内的所有元素都加载完成
可以被执行的次数不同
ready()可以在JavaScript代码中出现多次
load()只能在JavaScript代码中出现一次
执行的效率不同
如要在dom的元素节点中添加onclick属性节点，这时用 ( d o c u m e n t ) . r e a d y ( ) 就要比用 (document).ready()就要比用 (document).ready()就要比用(window).load()的效率高

15.浏览器端的js包括哪几个部分?

焦点( ECMAScript) , 文档对象模型(DOM), 浏览器对象模型(BOM)

16.DOM包括哪些对象?

DOM是针对HTML和XML文档的一个API(应用步调编程接口). DOM描绘了一个层次化的节点树, 答应开辟职员添加, 移除和修改页面的某一部分.

Document对象
Node对象
NodeList对象
Element对象
attribute对象

16.1 常用的DOM方法:

getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()

16.2 常用的DOM属性

innerHTML 节点(元素)的文本值
parentNode 节点(元素)的父节点
childNodes
attributes 节点(元素)的属性节点

17. js有哪些数据类型?

原始数据类型：

number
bigint
boolean
symbol
string
undefined
null

引用数据类型：
Math,Date,Array…

18.根本类型与引用类型有什么区别?

存储
1.1 根本类型值在内存中占据固定巨细的空间,因此被保存在栈内存中
1.2 引用类型的值是对象, 保存在堆内存中. 包含引用类型的变量实际上包含的并不是对象本身, 而是一个指向改对象的指针
1.3 但是对象的变量名是保存在栈内存中，而变量名的值则是引用子堆内存
复制
2.1 从一个变量向另一个变量复制根本类型的值, 会创建这个值的一个副本
2.2 从一个变量向另一个变量复制引用类型的值, 复制的其实是指针,　因此两个变量最终都指向同一个对象
检测类型
3.1 确定一个值是哪种根本类型可以用typeof操纵符
3.2 确定一个值是哪种引用类型可以使用instanceof操纵符

19. 关于js的垃圾回收

js是一门具有自动垃圾回收机制的编程语言,开辟职员不必关心内存分配和回收题目

离开作用域的值将被自动标志为可以回收, 因此将在垃圾收集期间被删除
**“标志扫除”**是目前主流的垃圾收集算法, 这种算法的思路是给当前不使用的值加上标志, 然后再回收其内存
另一种垃圾收集算法是**“引用计数”,** 这种算法的思想是跟踪记录所有值被引用的次数. js引擎目前都不再使用这种算法, 但在IE中访问非原生JS对象(如DOM元素)时, 这种算法仍然大概会导致题目
今世码中存在循环引用征象时, “引用计数” 算法就会导致题目
排除变量的引用不仅有助于消除循环引用征象, 而且对垃圾收集也有利益. 为了确保有用地回收内存, 应该及时排除不再使用的全局对象、全局对象属性以及循环引用变量的引用

20.动画有哪些实现方法?

Js
setTimeout、setInterval、requestAnimationFrame
requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画
jQuery中动画也比力实用
css
animation
canvas元素联合JS
插件
例如 jQuery

21.浅拷贝

浅拷贝对原对象或副本的更改大概也会导致其他对象的更改。它实际上只拷贝了一层，并且只当数组和对象包的值是原始值时才会举行拷贝。

赋值运算符 =

let a=[1,2,3]
let b=a;
console.log(b==a)//true

复制代码

扩展运算符 …

let a=[1,2,3]
let b=[...a]//把数组a的内容挨个取出放到b数组中
console.log(b===a) //true

复制代码

slice方法

let a=[1,2,3]
let b=a.slice()
console.log(a===b) //false
a[0]=4;
console.log(a)//4 2 3
console.log(b) //1 2 3

复制代码

assign方法

let a=[1,2,3]
let b=[]
Object.assign(b,a);
a[0]=4
console.log(a)//4 2 3
console.log(b) //1 2 3

复制代码

Array.from

let a=[1,2,3]
let b=Array.from(a)
a[0]=4
console.log(a)//4 2 3
console.log(b) //1 2 3

复制代码

22.深拷贝

Javascript对象和数组假如深度嵌套，浅拷贝只能实现第一层的拷贝，但是深度的值依然和原对象共享引用。

let a=[ [1],[2], [3]]
let b=[...a] //浅拷贝
a[0][0]= 4
console.log(a) // [[4],[2],[3]]
consle.log(b) // [[4],[2],[3]] 对象b也被改变了这时浅拷贝的弊端体现出来了

复制代码

使用JSON

let a=[ [1],[2], [3]]
let b=JSON.parse(JSON.stringfy(a));
a[0][0]=4;
console.log(a) // [ [4],[2], [3]]
console.log(b) // [ [1],[2], [3]]

复制代码

structuredClone

let a=[ [1],[2], [3]]
let b=structuredClone(a);
a[0][0]=4;
console.log(a) // [ [4],[2], [3]]
console.log(b) // [ [1],[2], [3]]

复制代码

第三方库 lodasg、rfdc
自定义函数实现

const deepCopy=(obj)=>{
if(typeof obj !=='object' || obj == null){
return obj;
}
const newObj= Array.isArray(obj) ? []:{};
Object.keys(obj).forEach((key)=>{
newObj[key]=deepCopy(obj[key]);
})
return newObj;
}

复制代码

上述代码只能处理对象和数组的深度拷贝
留意理解深拷贝和浅拷贝的区别

23. 说一下原型链

原型就是一个平凡对象，它是为构造函数的实例共享属性和方法；所有实例中引用
的原型都是同一个对象
使用 prototype 可以把方法挂在原型上，内存值保存一份
__proto__可以理解为指针，实例对象中的属性，指向了构造函数的原型（prototype）

24. new 操纵符详细做了什么？

先创建一个空对象
把空对象和构造函数通过原型链举行链接
把构造函数的 this 绑定到新的空对象身上
根据构建函数返回的类型判断，假如是值类型，则返回对象，假如是引用类型，
就要返回这个引用类型

25.script 标签里的 async 和 defer 有什么区别？

当没有 async 和 defer 这两个属性的时间，浏览器会立刻加载并执行指定的脚本

有 async
加载和渲染背面元素的过程将和 script 的加载和执行并行举行（异步）
有 defer
加载和渲染背面元素的过程将和 script 的加载并行举行（异步），但是它的执行事件要等
所有元素解析完成之后才会执行

26. setTimeout 最小执行时间是多少？

HTML5 规定的内容：
setTimeout 最小执行时间是 4ms
setInterval 最小执行时间是 10ms

27. promise 的内部原理是什么？它的优缺点是什么？

Promise 对象，封装了一个异步操纵并且还可以获取成功或失败的结果
Promise 紧张就是解决回调地狱的题目，之前假如异步使命比力多，同时他们之间
有相互依赖的关系，就只能使用回调函数处理，这样就轻易形成回调地狱，代码的可读性差，可维护性也很差
有三种状态：pending 初始状态 fulfilled 成功状态 rejected 失败状态
状态改变只会有两种情况，
pending -> fulfilled; pending -> rejected 一旦发生，状态就会凝固，不会再变
起首就是我们无法取消 promise，一旦创建它就会立即执行，不能中途取消
假如不设置回调，promise 内部抛出的错误就无法反馈到外貌
若当前处于 pending 状态时，无法得知目前在哪个阶段。
原理：
构造一个 Promise 实例，实例需要通报函数的参数，这个函数有两个形参，分
别都是函数类型，一个是 resolve 一个是 reject
promise上还有then方法，这个方法就是来指定状态改变时的确定操纵，resolve
是执行第一个函数，reject 是执行第二个函数

28.promise 和 async await 的区别是什么？

都是处理异步请求的方式
promise 是 ES6，async await 是 ES7 的语法
async await 是基于 promise 实现的，他和 promise 都是非阻塞性的
优缺点：
promise 是返回对象我们要用 then，catch 方法去处理和捕获异常，并且书写方式
是链式，轻易造成代码重叠，不好维护，async await 是通过 tra catch 举行捕获异常
async await 最大的优点就是能让代码看起来像同步一样，只要碰到 await 就会立
刻返回结果，然后再执行背面的操纵
promise.then()的方式返回，会出现请求还没返回，就执行了背面的操纵

29.浏览器的存储方式有哪些？

cookies
H5 尺度前的本地存储方式
兼容性好，请求头自带 cookie
存储量小，资源浪费，使用麻烦（封装）
localstorage
H5 加入的以键值对为尺度的方式
操纵方便，永久存储，兼容性较好
保存值的类型被限定，浏览器在隐私模式下不可读取，不能被爬虫
sessionstorage
当前页面关闭后就会立刻清算，会话级别的存储方式
indexedDB
H5 尺度的存储方式，，他是以键值对举行存储，可以快速读取，得当 WEB 场
景

30.token 存在 sessionstorage 还是 loaclstorage？

token：验证身份的令牌，一般就是用户通过账号暗码登录后，服务端把这些凭证
通过加密等一系列操纵后得到的字符串

存 loaclstorage 里，后期每次请求接口都需要把它看成一个字段传给后台
存 cookie 中，会自动发送，缺点就是不能跨域
假如存在 localstorage 中，轻易被 XSS 攻击，但是假如做好了对应的措施，那么是
利大于弊
假如存在 cookie 中会有 CSRF 攻击

31. token 的登录流程。

客户端用账号暗码请求登录
服务端收到请求后，需要去验证账号暗码
验证成功之后，服务端会签发一个 token，把这个 token 发送给客户端
客户端收到 token 后保存起来，可以放在 cookie 也可以是 localstorage
客户端每次向服务端发送请求资源的时间，都需要携带这个 token
服务端收到请求，接着去验证客户端里的 token，验证成功才会返回客户端请求
的数据

32.页面渲染的过程是怎样的？

DNS 解析
建立 TCP 连接
发送 HTTP 请求
服务器处理请求
渲染页面
5.1 浏览器会获取 HTML 和 CSS 的资源，然后把 HTML 解析成 DOM 树
5.2 再把 CSS 解析成 CSSOM
5.3 把 DOM 和 CSSOM 合并为渲染树
5.4 布局
5.5 把渲染树的每个节点渲染到屏幕上（绘制）
断开 TCP 连接

33.DOM 树和渲染树有什么区别？

DOM 树是和 HTML 标签逐一对应的，包括 head 和隐蔽元素
渲染树是不包含 head 和隐蔽元素

34.精灵图和 base64 的区别是什么？

精灵图：把多张小图整合到一张大图上，使用定位的一些属性把小图显示在页面上，
当访问页面可以减少请求，进步加载速率
base64：传输 8Bit 字节代码的编码方式，把本来二进制情势转为 64 个字符的单元，
末了组成字符串
base64 是会和 html css 一起下载到浏览器中，减少请求，减少跨域题目，但是一些
低版本不支持，若 base64 体积比原图片大，不利于 css 的加载。

35.svg 格式了解多少？

基于 XML 语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG 是
属于对图像外形的形貌，本质是文本文件，体积小，并且不管放大多少倍都不会失真

SVG 可直接插入页面中，成为 DOM 一部分，然后用 JS 或 CSS 举行操纵
<svg></svg>
SVG 可作为文件被引入
<img src="pic.svg" />
SVG 可以转为 base64 引入页面

36.HTTP 协议规定的协议头和请求头有什么？

请求头信息：
Accept:浏览器告诉服务器所支持的数据类型
Host:浏览器告诉服务器我想访问服务器的哪台主机
Referer:浏览器告诉服务器我是从那里来的（防盗链）
User-Agent:浏览器类型、版本信息
Date:浏览器告诉服务器我是什么时间访问的
Connection:连接方式
Cookie
X-Request-With:请求方式
响应头信息：
Location:这个就是告诉浏览器你要去找谁
Server:告诉浏览器服务器的类型
Content-Type:告诉浏览器返回的数据类型
Refresh:控制了的定时刷新

37.说一下什么是“同源策略”？

http:// www. aaa.com:8080/index/vue.js
协议子域名主域名端口号资源
同源策略是浏览器的焦点，假如没有这个策略就会遭受网络攻击
紧张指的就是协议+域名+端口号三者一致，若此中一个不一样则不是同源，会产生
跨域
三个答应跨域加载资源的标签：img link script
跨域是可以发送请求，后端也会正常返回结果，只不过这个结果被浏览器拦截了！

JSONP
CORS
websocket
反向代理

38.防抖和节流是什么？

都是应对页面中频仍触发事件的优化方案

防抖:克制事件重复触发
使用场景:1.频仍和服务端交互 2.输入框的自动保存事件
节流:把频仍触发的事件减少,每隔一段时间执行
使用场景:scroll 事件

39.有没有做过无感登录？

在相应此中拦截，判断 token 返回过期后，调用刷新 token 的接口
后端返回过期时间，前端判断 token 的过期时间，去调用刷新 token 的接口
写定时器，定时刷新 token 接口
流程：
登录成功后保存 token 和 refresh_token
在响应拦截器中对 401 状态码引入刷新 token 的 api 方法调用
替换保存本地新的 token
把错误对象里的 token 替换
再次发送未完成的请求
假如 refresh_token 过期了，判断是否过期，过期了就清晰所有 token 重新登

40.大文件上传是怎么做的？

分片上传：
1.1把需要上传的文件按照肯定的规则，分割成相同巨细的数据块
1.2 初始化一个分片上传使命，返回本次分片上传的唯一标识
1.3 按照肯定的规则把各个数据块上传
1.4 发送完成后，服务端会判断数据上传的完备性，假如完备，那么就会把数据库合并成原始文件
断点续传：
服务端返回，从那里开始浏览器本身处理

Vue篇

1. 生命周期

1.1 有哪些生命周期

系统自带：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

假如给组件加上keep-alive，会额外多

activated
deactivated

1.2首次进入页面大概组件，会执行哪些生命周期

beforeCreate
created
beforeMount
mounted

若组件添加keep-alive属性

beforeCreate
created
beforeMount
mounted
acitivated

1.3在哪个阶段产生 e l ， el， el，data

$el (根节点dom) 产生阶段 : mounted
$data产生阶段：created

1.4 第n（n>1）次进入组件会执行哪些生命周期

平凡组件

beforeCreate
created
beforeMount
mounted

组件【添加keep-alive属性】

activated
若离开，则执行deactivated

2.对keep-alive的理解

是什么
Vue自带的一个组件
功能:用来缓存组件的【提升性能】
使用场景【只管减少发送网络请求与后端交互+反复访问的组件减少其创建次数】
缓存详情页【组件】->在详情页的activated方法中判断之前刷新的参数与当前接收的参数是否一致，假如一致就不刷新数据，否则就发送网络请求刷新数据

3.v-if 和 v-show的区别

dom元素的加载区别

v-if 是创建了一个dom节点假如值为true时值为false时不创建大概移除该节点
v-show 是直接创建 display:none 隐蔽了

使用场景不同

初次加载v-if比v-show好页面不会多加载dom盒子
频仍切换 v-show比v-if好创建和删除开销太大，显示和隐蔽开销小
假如都是值为true，首次加载v-if比v-show快，相同的节点v-show会多加一个display:none=的css属性

4.v-if 和v-for优先级

v-for 比 v-if 优先级更高 vue.js源码中可以看到 v-for 的分支在v-if之前

假如同一个组件既加了v-for 也加了 v-if 那么速率会降落很多，是先执行v-for渲染列表数据，然后再每个子项都举行v-if判断，增大开销。
假如需要判断v-if建立，再执行v-for渲染子项，那么可以使用template模板

<template v-if="condition">
<div v-for="item in list"></div>
</template>

复制代码

5.ref是什么

作用：用来快速获取dom的，而不用document.getElement*（）
使用示例：

<img ref="imgref" src="\*\*" id= "img" >

复制代码

原生js：
document.getElementById("img")
vue:
this.$refs.imgs

6.nextTick是什么

作用：获取更新后的dom内容
例如：
<div ref="box" @click="change">{{content}}</div>

...
data(){
return {
content:"old"
}
}
methods:{
change(){
this.str="new";
console.log(this.$refs.box.innerText);//输出old ref中的dom数据未来得及更新
this.$nextTick(()=>{
console.log(this.$refs.box.innerText);//输出new
### 文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)
第二阶段:移动端开发技术
![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)
第三阶段:前端常用框架
![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
* 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
* 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

2024年Web前端最新前端面试八股文【很经典很全面字字珠玑】【建议收藏+关 ...

0 个回复

快速回复

楼主热帖

标签云

2024年Web前端最新前端面试八股文【很经典 很全面 字字珠玑】【建议收藏+关 ...

0 个回复

快速回复

楼主热帖

标签云

2024年Web前端最新前端面试八股文【很经典很全面字字珠玑】【建议收藏+关 ...