ToB企服应用市场:ToB评测及商务社交产业平台

标题: 2024年Web前端最新前端面试八股文【很经典 很全面 字字珠玑】【建议收藏+关 [打印本页]
作者: 嚴華    时间: 2024-7-11 05:49
标题: 2024年Web前端最新前端面试八股文【很经典 很全面 字字珠玑】【建议收藏+关
文末

技术是没有尽头的，也是学不完的，最紧张的是活着、不秃。
零底子入门的时间看书还是看视频，我以为成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最紧张的是在自学的过程中，肯定不要眼高手低，要实战，把学到的技术投入到项目当中，解决题目，之后进一步锤炼本身的技术。
自学最怕的就是缺乏自驱力，肯定要自律，杜绝“三天捕鱼两天晒网”，到末了白忙活一场。
高度自律的同时，要保持耐烦，不扬弃不放弃，切勿自怨自艾，每天给本身一点点鼓励，学习的干劲就会很足，不轻易犯困。
技术学得手后，找工作的时间肯定要好好准备一份简历，不要无头苍蝇一样去海投简历，轻易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的拍门砖。
拿到面试邀请后，在面试的过程中肯定要大大方方，尽力把本身学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
开源分享：【大厂前端面试题解析+焦点总结学习笔记+真实项目实战+最新解说视频】
  1. + [9. CSS样式文件引入的方式有哪些? link和@import的区别是?](#9_CSS_linkimport_87)
  2. + [10.display属性有什么作用？它有哪些值？](#10display_95)
  3. + [11. 介绍一下页面元素定位中的绝对定位、相对定位、流动定位、浮动定位，并阐述他们的区别](#11__101)
  4. + [12.谈谈你见过的浏览器不兼容问题？如何使用IETest?](#12IETest_111)
  5. + [13.display:none和visibility:hidden的区别是](#13displaynonevisibilityhidden_123)
  6. + [14.html5有哪些新特性，如何处理html5对低版本的兼容问题](#14html5html5_128)
复制代码

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 选择器的优先级？

!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器
3.隐蔽元素的方法有哪些？

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

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

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

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

CSS 的三大特性：继承、层叠、优先级
子元素可以继承父类元素的样式
8.有没有用过预处理器？

预处理语言增长了变量、函数、混入等强大的功能
SASS LESS
9. CSS样式文件引入的方式有哪些? link和@import的区别是?

link连接方式和import导入方式，两者区别如下：
10.display属性有什么作用？它有哪些值？

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

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

IETest安装之后，即可以使用，可用来查抄当前代码在不同浏览器版本中的兼容性
13.display:none和visibility:hidden的区别是

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

新特性：
Javascript 篇

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

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

一、存储的时间有用期不同
二、存储的巨细不同
三、与服务端的通信
四、读写操纵程度
3.浏览器本地存储与服务器端存储之间的区别

4. src和href的区别?

5. bind函数的兼容性

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

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

this 在 JavaScript 中紧张有以下五种使用场景。
8.什么是闭包? 闭包有什么作用?

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

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

11. 简述事件冒泡机制。

从目标元素开始，往顶层元素传播。途中假如有节点绑定了相应的事件处理函数，这些函数都会被一次触发。假如想阻止事件起泡，可以使用e.stopPropagation()（Firefox）大概e.cancelBubble=true（IE）来构造事件的冒泡传播。
12.解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?

以function关键字开头的语句会被解析为函数声明，而函数声明是不答应直接运行的。
只有当解析器把这句话解析为函数表达式，才华够直接运行
  1. (function foo(){
  2.     // code..
  3. })()
复制代码
13. 请指出 document load 和 document ready 两个事件的区别。

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

焦点( ECMAScript) , 文档对象模型(DOM), 浏览器对象模型(BOM)
16.DOM包括哪些对象?

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

16.2 常用的DOM属性

17. js有哪些数据类型?

原始数据类型：
引用数据类型：
Math,Date,Array…
18.根本类型与引用类型有什么区别?

19. 关于js的垃圾回收

js是一门具有自动垃圾回收机制的编程语言,开辟职员不必关心内存分配和回收题目
20.动画有哪些实现方法?

21.浅拷贝

浅拷贝对原对象或副本的更改大概也会导致其他对象的更改。它实际上只拷贝了一层，并且只当数组和对象包的值是原始值时才会举行拷贝。
  1.         let a=[1,2,3]
  2.         let b=a;
  3.         console.log(b==a)//true
复制代码
  1.         let a=[1,2,3]
  2.         let b=[...a]//把数组a的内容 挨个取出 放到b数组中
  3.         console.log(b===a) //true
复制代码
  1.         let a=[1,2,3]
  2.         let b=a.slice()
  3.         console.log(a===b) //false
  4.         a[0]=4;
  5.         console.log(a)//4 2 3
  6.         console.log(b) //1 2 3
复制代码
  1. let a=[1,2,3]
  2. let b=[]
  3. Object.assign(b,a);
  4. a[0]=4
  5. console.log(a)//4 2 3
  6. console.log(b) //1 2 3
复制代码
  1. let a=[1,2,3]
  2. let b=Array.from(a)
  3. a[0]=4
  4. console.log(a)//4 2 3
  5. console.log(b) //1 2 3
复制代码
22.深拷贝

Javascript对象和数组假如深度嵌套，浅拷贝只能实现第一层的拷贝，但是深度的值依然和原对象共享引用。
  1. let a=[ [1],[2], [3]]
  2. let b=[...a] //浅拷贝
  4. a[0][0]= 4
  5. console.log(a) // [[4],[2],[3]]
  6. consle.log(b) // [[4],[2],[3]] 对象b也被改变了 这时浅拷贝的弊端体现出来了
复制代码
  1. let a=[ [1],[2], [3]]
  2. let b=JSON.parse(JSON.stringfy(a));
  3. a[0][0]=4;
  4. console.log(a) // [ [4],[2], [3]]
  5. console.log(b) // [ [1],[2], [3]]
复制代码
  1. let a=[ [1],[2], [3]]
  2. let b=structuredClone(a);
  3. a[0][0]=4;
  4. console.log(a) // [ [4],[2], [3]]
  5. console.log(b) // [ [1],[2], [3]]
复制代码
  1. const deepCopy=(obj)=>{
  2.         if(typeof obj !=='object' || obj == null){
  3.                 return obj;
  4.         }
  5.         const newObj= Array.isArray(obj) ? []:{};
  6.         Object.keys(obj).forEach((key)=>{
  7.                 newObj[key]=deepCopy(obj[key]);
  8.         })
  9.         return newObj;
  10. }
复制代码
上述代码只能处理对象和数组的深度拷贝
留意理解深拷贝和浅拷贝的区别
23. 说一下原型链

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

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

当没有 async 和 defer 这两个属性的时间，浏览器会立刻加载并执行指定的脚本
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 的区别是什么？

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

30.token 存在 sessionstorage 还是 loaclstorage？

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

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

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

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

35.svg 格式了解多少？

基于 XML 语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG 是
属于对图像外形的形貌，本质是文本文件，体积小，并且不管放大多少倍都不会失真
36.HTTP 协议规定的协议头和请求头有什么？

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

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

都是应对页面中频仍触发事件的优化方案
39.有没有做过无感登录？

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

Vue篇

1. 生命周期

1.1 有哪些生命周期

系统自带：
     假如给组件加上keep-alive，会额外多
     
1.2首次进入页面大概组件，会执行哪些生命周期

     若组件添加keep-alive属性
     
1.3在哪个阶段产生                                   e                         l                         ，                              el，                  el，data

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

平凡组件
     组件【添加keep-alive属性】
     
2.对keep-alive的理解

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

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

v-for 比 v-if 优先级更高 vue.js源码中可以看到 v-for 的分支在v-if之前
   
  1. <template v-if="condition">
  2.         <div v-for="item in list"></div>
  3. </template>
复制代码
5.ref是什么

   
  1. <img ref="imgref"  src="\*\*"  id= "img" >
复制代码
原生js：
document.getElementById("img")
vue:
this.$refs.imgs
  
6.nextTick是什么

   
  1. ...
  2. data(){
  3.         return {
  4.                 content:"old"
  5.         }
  6. }
  7. methods:{
  8.         change(){
  9.                 this.str="new";
  10.                 console.log(this.$refs.box.innerText);//输出old ref中的dom数据未来得及更新
  11.                 this.$nextTick(()=>{
  12.                         console.log(this.$refs.box.innerText);//输出new
  15. ### 文末
  17. 从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
  21. 个人将这段时间所学的知识，分为三个阶段：
  23. 第一阶段：HTML&CSS&JavaScript基础
  25. ![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)
  29. 第二阶段:移动端开发技术
  31. ![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)
  33. 第三阶段:前端常用框架
  35. ![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)
  39. **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
  41. *   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
  43. *   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4