Web前端最全2024年前端大厂面试秘籍，为你保驾护航金九银十，直通大厂(1)，前端中高级岗面试为何越来越难

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

• ie9 之前版本通过 createElement 创建 html5 新标签

• 引入 html5shiv.js

3. svg 和 canvas 的区别？

• canvas 时 h5 提供的新的绘图方法 ；svg 已经有了十多年的历史

• canvas 画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg 基于图形，用 html 标签描绘形状，放大缩小不会失真

• canvas 需要在js中绘制 ；svg 在 html 绘制

• canvas 支持颜色比 svg 多

• canvas 无法对已经绘制的图像进行修改、操作 ；svg 可以获取到标签进行操作

4. 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

5. 如何处理 HTML5 新标签的浏览器兼容问题？

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架。

6. 说说 title 和 alt 属性

• 两个属性都是当鼠标滑动到元素上的时候显示

• alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。

• title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签，是对 dom 元素的一种类似注释说明

7. HTML 全局属性(global attribute)有哪些

• class :为元素设置类标识

• data-*: 为元素增加自定义属性

• draggable : 设置元素是否可拖拽

• id : 元素 id ，文档内唯一

• lang : 元素内容的的语言

• style: 行内 css 样式

• title : 元素相关的建议信息

---

（2）CSS 相关

• 让一个元素水平垂直居中，到底有多少种方案？

• 浮动布局的优点？有什么缺点？清除浮动有哪些方式？

• 使用 display:inline-block 会产生什么问题？解决方法？

• 布局题：div 垂直居中，左右10px，高度始终为宽度一半

• 盒模型

• CSS 如何进行品字布局

• CSS 如何进行圣杯布局

• CSS 如何实现双飞翼布局？

• 什么是 BFC？

• 触发条件

• BFC 渲染规则

• …

（3）JavaScript 相关

• JS 原始数据类型有哪些？引用数据类型有哪些？

• null 是对象吗？为什么？

• '1'.toString() 为什么可以调用？

• 0.1+0.2 为什么不等于 0.3？

• 什么是 BigInt? 为什么需要 BigInt?

• 如何创建并使用 BigInt？

• typeof 是否能正确判断类型？

• instanceof 能否判断基本数据类型？

• 能不能手动实现一下 instanceof 的功能？

• Object.is 和===的区别？

• [] == ![] 结果是什么？为什么？

• JS 中类型转换有哪几种？

• == 和 ===有什么区别？

对象转原始类型是根据什么流程运行的？

• 如何让 if(a == 1 && a == 2) 条件成立？

• 什么是闭包？

• 闭包产生的原因?

• 闭包有哪些表现形式?

• 如何解决下面的循环输出问题？

• 原型对象和构造函数有何关系？

• 能不能描述一下原型链？

• JS 如何实现继承？

• 函数的 arguments 为什么不是数组？如何转化成数组？

• forEach 中 return 有效果吗？如何中断 forEach 循环？

• JS 判断数组中是否包含某个值

• JS 中 flat—数组扁平化

• 什么是高阶函数

• 数组中的高阶函数

• 实现数组 map 方法

• 实现数组 reduce 方法

• 实现数组 push、pop 方法

• 实现数组 filter 方法

• 实现数组 splice 方法

• 实现数组 sort 方法

• 模拟实现一个 new 的效果

• 模拟实现一个 bind 的效果

• 实现一个 call / apply 函数

• 谈谈你对 JS 中 this 的理解

• JS 中浅拷贝的手段有哪些？

• 写一个完整的深拷贝

• 数据是如何存储的？

• V8 引擎如何进行垃圾内存的回收？

• 描述一下 V8 执行一段 JS 代码的过程？

• 宏任务 (MacroTask) 引入

• 微任务 (MicroTask) 引入

• 理解 EventLoop：浏览器

• 理解 EventLoop：nodejs

• nodejs 和浏览器关于 eventLoop 的主要区别

• 关于 process.nextTick 的一点说明

• nodejs 中的异步、非阻塞I/O是如何实现的？

• JS 异步编程有哪些方案？

• 能不能简单实现一下 node 中回调函数的机制？

• Promise 凭借什么消灭了回调地狱？

• …

二，计算机网络部分

（1）HTTP 协议

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

• 传统 RSA 握手

• RSA 和 ECDHE 握手过程的区别

• …

（2）TCP 协议

• 能不能说一说 TCP 和 UDP 的区别？

• 说说 TCP 三次握手的过程？

• 为什么是三次而不是两次、四次？

• 三次握手过程中可以携带数据么？

• 说说 TCP 四次挥手的过程

• 为什么是四次挥手而不是三次？

• 说说半连接队列和 SYN Flood 攻击的关系

• 如何应对 SYN Flood 攻击？

• 介绍一下 TCP 报文头部的字段

• 说说 TCP 快速打开的原理(TFO)

• 能不能说说TCP报文中时间戳的作用？

• TCP 的超时重传时间是如何计算的？

• 能不能说一说 TCP 的流量控制？

• …

（3）浏览器

• 说一说浏览器缓存?

• 说一说浏览器的本地存储？各自优劣如何？

• 说一说从输入URL到页面呈现发生了什么？（网络）

• 谈谈你对重绘和回流的理解

• 能不能说一说 XSS 攻击？

• HTTPS 为什么让数据传输更安全？

• …

三，前端框架部分

（1）Vue 框架

• 什么是 MVVM？

• mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-lBidFIo7-1715850086336)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】