前言
很多人都说，程序员很辛苦，与这个角色联系在一起的词儿，通常是忙碌、加班、熬夜等。作为程序员，我们将其看作一个值得全情投入的职业，希望能够把精力放在设计算法、改进设计、优化系统这些具有创造性与成就感的本职工作上。
但现实情况却是，许多人因为一些“意外”，陷入了无休止的忙碌，比如：
- 你辛辛苦苦写的代码还没上线，产品经理就告诉你需求变了；
- 你拼命加班只因错估了工作量，自己造的“孽”，含着泪也要搞定；
- 你累死累活做出来的东西和要求不符，只能从头再来；
- 你大面积地修改代码只是因为设计糟糕，无法适应新的需求变化；
- ……
诸如此类，不胜枚举。我们很辛苦，但耗费我们大量时间和精力去应付的工作，并不是技术工作，反而是这些看似很“不值当”的事儿。
为什么会这样？
在软件行业里有一本名著叫《人月神话》，其中提到两个非常重要的概念：本质复杂度（Essential Complexity）和偶然复杂度（Accident Complexity）。
简单来说，本质复杂度就是解决一个问题时，无论怎么做都必须要做的事，而偶然复杂度是因为选用的做事方法不当，而导致要多做的事。
比如你要做一个网站，网站的内容是你无论如何都要写的，这就是“本质复杂度”。而如果今天你还在用汇编写一个网站，效率是不可能高起来的，因为你选错了工具。这类选错方法或工具而引发的问题就是“偶然复杂度”。
这以至于我意识到一个事实：大部分程序员忙碌解决的问题，都不是程序问题，而是由偶然复杂度导致的问题。 换句话说，只要选择了正确的做事方法，减少偶然复杂度带来的工作量，就算是软件开发是可以有条不紊进行的。
不管是想转行做前端亦或者是毕业参加前端工作的小伙伴们，除了技术上的掌握，这方面的业务能力、问题解决能力也要加强。当然我们只有先面试通过了再去考虑这些问题，所以小编分享一份详细又全面的面试题，让你事半功倍。
小编分享的这个面试题资料涵盖了：HTML、CSS、JS、JQuery、数据请求相关问题、ES6、Vue、React、微信小程序、IOS/Andriod浏览器适配问题整理、Pc端兼容性问题、项目类问题、笔试编程题等，点击这就可以领取完整版PDF前端全面面试题资料喔。
HTML
- Doctype的作用？
- 标准模式和怪异模式的区别：
- 行内元素/块级元素/空元素有哪些？
- 介绍一下你对浏览器内核的理解?
- 常用浏览器的内核有哪些？
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的？
- 描述一下cookies/sessionStorage和localStorage的区别?
- HTML5新特性有哪些？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5？
- 简述一下你对HTML语义化的理解?
- HTML5离线缓存怎么使用，工作原理能不能解释一下？
- 页面导入样式时,使用link和@import有什么区别?
- Iframe有哪些缺点?
- Label的作用是什么?怎么用?
- HTML5的form如何关闭自动完成功能?
- 如何实现浏览器内多个标签之间的通信?
- 页面可见性有哪些用途?(visibility API)
- 如何在页面上实现一个圆形的可点击区域?
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]属性是干嘛的?
- 外边距合并是指的什么意思?
- 移动端的布局用过媒体查询吗?
- 响应式页面?
- CSS预处理器(sass和less)用过吗?
- 使用CSS预处理的优缺点分别是什么？
- CSS优化/提高性能的方法有哪些?
- 浏览器是怎么解析CSS选择器的?
- Margin与padding的区别?
- Css如何实现横向滚动与竖向滚动?
- 如何设置滚动条样式?
- 视觉差效果是如何实现的?
- 你对line-height如何理解?
JS
- 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请求传参长度的误区
- http和https有何区别？如何灵活使用？
- 什么是AJax?为什么使用Ajax?
- 简述ajax的过程。
- Ajax优缺点？
- XMLHttpRequest通用属性和方法
- Ajax请求跨域接口，发送了几次请求？
- 跨域的几种方式
- web应用从服务器端主动推送data大客户端有哪些方式?
- 如何实现浏览器内多个标签页之间的通信? (阿里)
- webSocket如何兼容低浏览器？(阿里)
- fetch、ajax、axios之间的详细区别以及优缺点：
- 为什么要用axios？
- axios是什么？怎么使用？描述使用它实现登录功能的流程？
- xml和json的区别？
ES6
- 列举常用的ES6特性：
- 箭头函数需要注意哪些地方？
- 箭头函数和普通函数之间的区别
- let、const、var
- 拓展：var方式定义的变量有什么样的bug？
- 箭头函数this的指向。
- 手写ES6 class继承。
- ES5的继承和ES6的继承有什么区别?
- ES6 class 的new实例和ES5的new实例有什么区别?
- generator生成器函数:
- 什么是async/await及其如何工作?
- Promise和async await以及它们之间的区别:
- async函数的基本用法:
- async与generator的区别?
- 简单实现async/await中的async函数
- 有用过promise吗？请写出下列代码的执行结果，并写出你的理解思路
React
- 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的作用是什么？
- React中keys的作用是什么？
- diff算法？
- React性能优化方案？
- react怎么从虚拟dom中拿出真实dom
其他知识点面试题
- Node的应用场景
- 谈谈你对webpack的看法
- gulp是什么？
- 常见的web安全及防护原理
- XSS原理及防范方法
- CSRF的原理及防御
- XSS与CSRF两种跨站攻击
- common.js AMD CMD的区别
- ES6模块有CommonJS模块的差异
- 网页验证码是干嘛的，是为了解决什么安全问题
- webpack的原理
- webpack的loader和plugin的区别？
- 怎么使用webpack对项目进行优化?
- 防抖、节流
- 浏览器的缓存机制
- 描述一下二叉树, 并说明二叉树的几种遍历方式?
篇幅有限原因，还有Vue、微信小程序、IOS/Andriod浏览器适配问题整理、项目类问题、笔试编程题等面试题没有列举出来，需要完整版PDF前端全面面试题资料的小伙伴们，请直接点击这里领取资料哦。
结束语
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
转载：https://blog.csdn.net/Kepler_II/article/details/117083044