转行或实习生参加前端工作前要明白个道理:程序员解决的问题，大多不是程序问题

前言

很多人都说，程序员很辛苦，与这个角色联系在一起的词儿，通常是忙碌、加班、熬夜等。作为程序员，我们将其看作一个值得全情投入的职业，希望能够把精力放在设计算法、改进设计、优化系统这些具有创造性与成就感的本职工作上。

但现实情况却是，许多人因为一些“意外”，陷入了无休止的忙碌，比如：

• 你辛辛苦苦写的代码还没上线，产品经理就告诉你需求变了；
• 你拼命加班只因错估了工作量，自己造的“孽”，含着泪也要搞定；
• 你累死累活做出来的东西和要求不符，只能从头再来；
• 你大面积地修改代码只是因为设计糟糕，无法适应新的需求变化；
• ……
  诸如此类，不胜枚举。我们很辛苦，但耗费我们大量时间和精力去应付的工作，并不是技术工作，反而是这些看似很“不值当”的事儿。

为什么会这样？

在软件行业里有一本名著叫《人月神话》，其中提到两个非常重要的概念：本质复杂度（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 哦

结束语

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。

其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。