2024年最全【117页】前端面试题大全！（包含 HTML、CSS(3)，斗鱼前端开发二面被刷

总结

前端资料汇总

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

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

前端面试题大全

• • • 前言
      • HTML相关
      • CSS相关
      • JavaScript相关
      • JQuery相关
      • 数据请求相关
      • ES6相关
      • Vue相关
      • React相关
      • 微信小程序
      • 更多

HTML相关

• Doctype 的作用？
• 标准模式和怪异模式的区别：
• 行内元素/块级元素/空元素有哪些？
• 介绍一下你对浏览器内核的理解?
• 常用浏览器的内核有哪些？
• 浏览器是怎么对HTML5 的离线储存资源进行管理和加载的？
• 描述一下 cookies/sessionStorage 和localStorage 的区别?
• HTML5 新特性有哪些？如何处理 HTML5 新标签的兼容性问题？如何区分HTML 和 HTML5？
• 简述一下你对HTML 语义化的理解?
• HTML5 离线缓存怎么使用，工作原理能不能解释一下？
• 页面导入样式时,使用 link 和@import 有什么区别?
• Iframe 有哪些缺点?
• Label 的作用是什么？怎么用？
• HTML5 的 form 如何关闭自动完成功能?
• 如何实现浏览器内多个标签之间的通信?
• 页面可见性有哪些用途?
• …

CSS相关

• 浏览器盒模型?
• 清除浮动的方式
• CSS 选择器有哪些?
• 伪类选择器和伪元素的区别:
• ::after/:after 与::before/:before 的区别?
• CSS 样式优先级计算法:
• CSS3 新特性和伪类有哪些?
• less 的一些优势。
• 如何居中 div?
• Display 有哪些哪些值？说明他们的作用
• Position 的值?
• flex 布局以及常用属性
• 请解释一下 CSS3 的flexbox(弹性盒布局模型),以及适用场景?
• CSS 打造三角形?
• 满屏品字布局?
• li 与 li 之间有看不见的空白间隙是什么原因引起来的?
• 为什么要初始化css 样式?
• CSS 中的 visibility 属性的 collapse 属性是干嘛的?
• 外边距合并是指的什么意思?
• 移动端的布局用过媒体查询吗?
• 响应式页面?
• CSS 媒体查询的原理是什么？
• 使用CSS 预处理的优缺点分别是什么？
• CSS 优化/提高性能的方法有哪些?
• 浏览器是怎么解析CSS 选择器的?
• Margin 与 padding 的区别?
• CSS 如何实现横向滚动与竖向滚动?
• …

JavaScript相关

• JS 是一种什么样的语言?
• JS 数据类型有哪些?
• 介绍JS 有哪些内置对象？
• 栈与堆的区别?
• js 中的作用域与变量声明提升
• console.log（a）何时会打印 1？
• 如何转化类型?
• 什么是面向对象编程及面向过程编程，他们的异同和优缺点
• 面向对象编程思想
• 如何解释 this 在js 中起的作用?
• js 中 this 的用法
• 说说JS 原型和原型链
• call 和 apply 的区别和作用?
• 继承的方法有哪些？
• 什么是闭包？闭包有什么作用？
• 事件代理（事件委托）:
• 事件的各个阶段
• new 操作符在创建实例的时候经历了哪几个阶段
• 异步编程的实现方式
• 对原生JS 了解程度
• js 延迟加载的方法有哪些？
• 数组从小到大排序？
• 如何实现数组的随机排序？
• 图片懒加载
• js 中常见的内存泄漏：
• 深拷贝和浅拷贝的问题：
• 显示转换与隐式转换
• …

JQuery相关

• jQuery 或 zepto 源码有哪些写的好的地方
• jQuery 的实现原理？
• jQuery.fn 的init 方法返回的这指的是什么对象？为什么要返回这个？
• jQuery.extend 与jQuery.fn.extend 的区别？
• jQuery 的属性拷贝（extend）的实现原理是什么，如何实现深拷贝？
• JQuery 的队列是如何实现的？队列可以用在哪些地方?
• …

数据请求相关

• http 请求方式有哪些？
• http 的状态码有哪些？分别说下它们的含义
• 请描述一下 get 与 post 的区别
• get 请求传参长度的误区
• get 和post 请求在缓存方面的区别
• http 和https 有何区别？如何灵活使用？
• 什么是AJax?为什么使用Ajax?
• 简述ajax 的过程
• Ajax 优缺点？
• XMLHttpRequest 通用属性和方法
• Ajax 请求跨域接口，发送了几次请求？
• web 应用从服务器端主动推送data 大客户端有哪些方式?
• 如何实现浏览器内多个标签页之间的通信?
• webSocket 如何兼容低浏览器？
• fetch、ajax、axios 之间的详细区别以及优缺点：
• …

ES6相关

• 列举常用的 ES6 特性：
• 箭头函数需要注意哪些地方？
• 箭头函数和普通函数之间的区别
• let、const、var
• var 方式定义的变量有什么样的 bug？
• Set 数据结构
• 数组去重的方法
• 箭头函数 this 的指向
• 手写ES6 class 继承
• ES5 的继承和 ES6 的继承有什么区别?
• ES6 class 的new 实例和ES5 的new 实例有什么区别?
• generator 生成器函数
• 什么是async/await 及其如何工作?
• Promise 和async await 以及它们之间的区别:
• async 函数的基本用法:
• async 与 generator 的区别?
• 简单实现 async/await 中的 async 函数

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。