前言很多人说程序员很辛苦，和这个角色相关的词通常是忙，加班，熬夜等等.作为程序员，我们将其视为一份值得全身心投入的事业，希望专注于设计算法、改进设计、优化系统等富有创造性和成就感的工作。但现实是，很多人因为一些“意外”，陷入了无休止的忙碌之中。比如，产品经理告诉你，你辛苦写的代码还没上线，需求就变了；你因为失算而拼命加班你不得不面对自己犯下的“罪”，眼里含着泪水；辛辛苦苦做的事不符合要求，只好从头做起；你大面积修改代码只是因为设计不好，不能适应新的需求变化；……等等，不胜枚举。我们工作很努力，但是消耗我们大量时间和精力的工作并不是技术工作，而是这些看似“不值得”的事情。为什么？软件界有一本名著，叫做《人月神话》，里面提到了两个很重要的概念：EssentialComplexity和AccidentComplexity。简单来说，本质复杂就是解决问题时无论怎么做都必须要做的事情，而偶然复杂就是做事方法不对不得不做的事情。比如你要做一个网站，网站的内容无论如何都要写，这就是“本质复杂性”。而如果你今天还在用汇编写网站，效率是提不上去的，因为你选错了工具。这种因为选择了错误的方法或工具而导致的问题就是“偶然的复杂性”。这让我意识到，大多数程序员忙于解决的问题不是程序问题，而是偶然的复杂性导致的问题。也就是说，只要选择正确的做事方式，减少偶然的复杂性带来的工作量，即使是软件开发也可以有条不紊地进行。面试也是一样。薪资、工作内容等心里都有数，面试的问题却是一无所知。我们猜不到面试官的下一个问题是什么，所以我们会看更多的面试题。那么一道详细全面的面试题会让你事半功倍。小编分享的面试题涵盖：HTML、CSS、JS、JQuery、数据请求相关问题、ES6、Vue、React、微信小程序、IOS/Andriod浏览器适配问题、PC兼容问题、For项目题、笔试编程题等，点此获取完整版PDF前端综合面试题。HTMLDoctype的作用是什么？标准模式和怪异模式的区别：什么是行内元素/块级元素/空元素？谈谈你对浏览器内核的理解？常用浏览器的内核有哪些？浏览器如何管理和加载HTML5离线存储资源？描述一下cookies/sessionStorage和localStorage的区别？HTML5有哪些新特性？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5？请简要描述您对HTML语义的理解？如何使用HTML5离线缓存？你能解释一下它是如何工作的吗？在页面上导入样式时使用link和@import有什么区别？iframe有什么缺点？标签的作用是什么？如何使用它？如何关闭HTML5表单的自动补全功能？如何在浏览器中实现多个标签之间的通信？页面可见性的用途是什么？(visibilityAPI)如何在页面上实现一个圆形的可点击区域？CSS☆浏览器框模型？☆如何清除浮动CSS选择器有哪些？哪些属性可以被继承？::after/:after和::before/:before的区别？CSS样式优先级计算方法：☆CSS3的新特性和伪类有哪些？少一些优点。如何让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如何实现水平滚动和垂直滚动？如何设置滚动条样式？视差效果是如何实现的？你怎么理解行高？JSJS是一种什么样的语言？什么是JS数据类型？JS中的内置对象有哪些？栈和堆的区别？js中作用域和变量声明提升是如何转换类型的？什么是面向对象编程和面向过程编程，它们的异同、优缺点？面向对象编程思想如何解释this在js中的作用？js中this的用法（经典）：☆说说JS原型和原型链如何准确判断一个变量是否为数组类型？☆call和apply的区别和作用是什么？继承方式有哪些？☆什么是闭包？闭包有什么作用？事件代理（eventdelegation）：事件的各个阶段☆newoperator在创建实例时经历了哪些阶段如何实现异步编程如何熟悉原生JSjs懒加载有哪些方法？数组从小到大排序？从大到小排序，可以先将数组从大到小排序，然后添加reverse()方法将数组的顺序倒过来。jQuery：您认为jQuery或zepto源代码中有哪些好的地方？this指的是jQuery.fn的init方法返回的什么对象？为什么要退货？jQuery.extend和jQuery.fn.extend有什么区别？jQuery的属性复制（扩展）的实现原理是什么，深复制又是如何实现的？JQuery的队列是如何实现的？队列可以用在什么地方？jQuery中的bind()、live()、delegate()和on()有什么区别？一个jQuery对象如何同时绑定多个事件？jQuery数据请求相关问题htt的优化方法p请求方法是什么？http的状态码是什么？下面分别说说它们的含义。请描述get和post之间的区别。http和https有什么区别？如何灵活运用？什么是AJax？为什么要使用Ajax？简述Ajax的过程Ajax的优缺点？XMLHttpRequest常用属性和方法ajax请求跨域接口，发送多少个请求？几种跨域方法Web应用主动从服务器向大客户端推送数据？如何实现浏览器中多个标签页之间的通信？（阿里巴巴）webSocket如何兼容低级浏览器？（阿里）fetch、ajax、axios的详细区别和优缺点：为什么要用axios？什么是公理？如何使用？描述一下使用它实现登录功能的过程？xml和json的区别？ES6列出常用的ES6特性：箭头函数需要注意什么？箭头函数与普通函数的区别Let、const、var展开：var方式定义的变量有哪些bug？this指向的箭头函数。手写的ES6类继承。ES5继承和ES6继承有什么区别？ES6classnewinstance和ES5newinstance有什么区别？Generator生成器函数：什么是async/await，它是如何工作的？Promise和asyncawait以及它们之间的区别：async函数的基本用法：async和generator的区别？async/await中async函数的简单实现有没有用到promise？请写下以下代码的执行结果，写下你对Reactreact的优势和特点的理解。React中props和state的使用。React组件如何通信？为什么虚拟DOM会提高性能？React生命周期函数：React性能优化的是哪个循环函数？您应该在生命周期的什么时候发出AJAX请求？概述REact中的事件处理逻辑如何告诉React它应该编译生产版本？调用setState后会发生什么？react中setState的原理和用法为什么setState是异步的？传入setState函数的第二个参数的作用是什么？shouldComponentUpdate的作用是什么，为什么如此重要？createElement和cloneElement有什么区别？为什么我们需要使用React提供的ChildrenAPI而不是JS的map呢？React中的元素和组件有什么区别？在什么情况下你更愿意使用classComponent而不是functionalCompositeReact中refs的作用是什么？React中键的作用是什么？差异算法？React性能优化方案？react如何从虚拟dom中取出真实dom其他知识点面试题Node的应用场景谈谈你对webpack的看法什么是gulp？常见web安全及防护原理XSS原理及防范方法CSRF原理及防御XSS和CSRF两种跨站攻击common.jsAMDCMD区别ES6模块与CommonJS模块区别什么是安全问题？webpack的原理。webpack的loader和plugin的区别？如何使用webpack优化项目？防抖、节流浏览器缓存机制描述二叉树，解释二叉树的几种遍历方式？限于篇幅，还有Vue、微信小程序、IOS/Andriod浏览器适配题、项目题、笔试编程题等面试题就不一一列举了。需要完整版PDF前端综合面试题材的朋友，请点击这里获取资料。结语对于面试，多说几句个人观点面试，归根结底是一种测试。正如我们一直批评应试教育脱离了教育的本质一样，为了面试而学习技术也脱离了技术的初衷。但考试选拔人才的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，你还是要乖乖准备面试。这也不妨碍你在通过面试后按照自己的方式学习。其实在面试准备阶段，我收获很多，我也觉得这是一个很好的学习途径。首先，面试的问题大多是基础性的和深度性的，这些都是日常工作的基础。就好像我们以前不明白学习中文的意义，但它的意义就在日常会话中。所谓面试造火箭，工作变螺丝。面试往往有更高的要求，这也迫使我们更专心、更深入地学习一些知识，这并不是什么好事。
