15个方面解析面试官问的那些前端面试题，好家伙整理完有立刻想找大厂对线的冲动

Posted 2021-06-28 蛋黄酥要不要来一口阿

前言

从html、CSS、JS、JQuery、数据请求相关问题、ES6、Vue、React、React Native、微信小程序、ios/Andriod浏览器适配问题整理、Pc端兼容性问题、其他知识点面试题、项目类问题、笔试编程题15个方面来讲前端面试题，题目答案文档里有，篇幅原因就只列举了部分题目，完整版的可以点击这看看噢。

前端掌握的知识内容概要

HTML/CSS

对web保准的理解（结构/表现/行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系、常用属性、布局、选择器、盒模型、Hack、CSS预处理器、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线&储存&history、多媒体、webGL、SVG、Cavas）

javascript

数据类型、运算、对象、继承、闭包、作用域、事件、prototype、RegExp、JAON、Ajax、DOM、内存泄露、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、Nodejs、HTTP

其他

主流MVVM、Hybrid App\\React Native\\Weex、TypeScript、前端工程化、依赖管理、性能优化、重构、SEO、UED、前端技术选型等

前端面试题掌握

HTML

• Doctype的作用？
• 标准模式和怪异模式的区别：
• 行内元素/块级元素/空元素有哪些？
• 介绍一下你对浏览器内核的理解?
• 常用浏览器的内核有哪些？
• 浏览器是怎么对HTML5的离线储存资源进行管理和加载的？
• 描述一下cookies/sessionStorage和localStorage的区别?
• HTML5新特性有哪些？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5？
• 简述一下你对HTML语义化的理解?
• HTML5离线缓存怎么使用，工作原理能不能解释一下？
  …

CSS

• 浏览器盒模型?
• 清除浮动的方式
• CSS选择器有哪些?哪些属性可以继承?
• after/:after与::before/:before的区别?
• CSS样式优先级计算法:
• CSS3新特性和伪类有哪些?
• less的一些优势。
• 如何居中div?
• Display有哪些哪些值?说明他们的作用
• Position的值?
• flex布局以及常用属性
• 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
• CSS打造三角形?
• 满屏品字布局?
• li与li之间有看不见的空白间隙是什么原因引起来的?
• 为什么要初始化css样式?
• CSS中的visibility属性的collapse[kə’læps]属性是干嘛的?
• 外边距合并是指的什么意思?
  …

JS

• JS数据类型有哪些?
• 介绍JS有哪些内置对象？
• 栈与堆的区别?
• js中的作用域与变量声明提升
• 如何转化类型?
• 什么是面向对象编程及面向过程编程，他们的异同和优缺点
• 面向对象编程思想
• 如何解释this在js中起的作用?
• js中this的用法（经典）：
• 说说JS原型和原型链
• 如何准确判断一个变量是数组类型?
• call和apply的区别和作用?
• 继承的方法有哪些？
• 什么是闭包？闭包有什么作用？
• 事件代理（事件委托）:
• 事件的各个阶段
• new操作符在创建实例的时候经历了哪几个阶段
• 异步编程的实现方式
• 对原生JS了解程度
• js延迟加载的方法有哪些？
• 数组从小到大排序？
• 求从大到小排序可以先使数组从大到小排序,然后添加reverse()方法，使数组顺序颠倒
  …

JQuery:

• 你觉得jQuery或zepto源码有哪些写的好的地方
• jQuery的实现原理？
• jQuery.fn的init方法返回的这指的是什么对象？为什么要返回这个？
• jQuery.extend与jQuery.fn.extend的区别？
• jQuery的属性拷贝（extend）的实现原理是什么，如何实现深拷贝？
• JQuery的队列是如何实现的？队列可以用在哪些地方?
• jQuery中的bind（），live（），delegate（），on（）的区别？
• jQuery一个对象可以同时绑定多个事件，这是如何实现的？
• 针对jQuery的优化方法？
  …

数据请求相关问题

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

Vue

• 什么是MVVM?
• mvvm和mvc的区别？它和其他框架（JQuery）的区别是什么？哪些场景适合？
• Vue.js的两个核心是什么?
• Vue组件之间的传值
• Vue-cli中怎么使用自定义组件，又遇到过哪些问题吗?
• Vue如何实现按需加载配合webpack设置
• v-show和v-if指令的共同点和不同点
• 如何让CSS只在当前组件中起作用
• 的作用是什么？
• 聊聊Keep-alive的实现原理和缓存策略
• Vue中引入组件的步骤
• Vue常用的修饰符？
• 什么是Vue的计算属性?
• Vue等单页面应用及其优缺点？
• 指令v-el的作用是什么?
• 在Vue中使用插件的步骤
• active-class是哪个组件的属性？
• 说出至少4中vue当中的指令和它的用法？
  …

React

• React中的props和state的用法
• react组件之间如何通信？
• 为什么虚拟DOM会提高性能？
• react生命周期函数：
• react性能优化是哪个周期函数？
• 在生命周期中的哪一步你应该发起AJAX请求？
• 概述一下REact中的事件处理逻辑
• 如何告诉React它应该编译生产环境版本？
• 调用setState之后发生了什么？
• react的setState的原理及用法
• setState为什么是异步的?
• 传入setState函数的第二个参数的作用是什么?
• shouldComponentUpdate的作用是啥以及为何它这么重要？
• createElement与cloneElement的区别是什么？
• 为什么我们需要使用React提供的Children API而不是JS的map？
• React中的Element与Component的区别是？
• 在什么情况下你会优先选择使用class Component而不是functional Compone
• React中refs的作用是什么？
• diff算法？
  …

微信小程序

• 简单描述一下微信小程序的相关文件类型?
• 你是怎么封装微信小程序的数据请求？
• 有哪些参数传值的方法？
• 你使用过哪些方法，来提高微信小程序的应用速度？
• 小程序和原生App哪个好？
• 简述微信小程序原理？
• 分析微信小程序的优劣势
• 微信小程序与H5的区别？
• 怎么解决小程序的异步请求问题？
• 小程序的双向绑定和vue哪里不一样
• 小程序的wxss和css有哪些不一样的地方?
• 小程序关联微信公众号如何确定用户的唯一性？
• 使用webview直接加载要注意哪些事项？
• 小程序调用后台接口遇到哪些问题？
• 小程序写自定义的组件，要考虑什么？
• 小程序怎么获取用户授权信息？
• 在页面中加入一个 button 按钮，并将 open-type 属性设置为 getUserInfo.
• 小程序如何分享卡片信息？
  …
  
  

小编整理完后真的有那么一瞬间想去投简历哈哈哈哈（莫名的自信），完整版的前端全面面试题解析PDF【直接点击这里获取噢】，加油，让我们都拥有与大厂对线的能力！