Web前端面试技术点

常规问题：

通常来讲会问以下几方面的问题：

1. 作过最满意的项目是什么？
2. 项目背景
3. 为何要作这件事情？
4. 最终达到什么效果？
5. 你处于什么样的角色，起到了什么方面的做用？
6. 在项目中遇到什么技术问题？具体是如何解决的？
7. 若是再作这个项目，你会在哪些方面进行改善？

技术二面主要判断技术深度及广度

1. 你最擅长的技术是什么？
2. 你以为你在这个技术上的水平到什么程度了？你以为最高级别应该是怎样的？
3. 浏览器及性能
4. 一个页面从输入 URL 到页面加载完的过程当中都发生了什么事情？越详细越好
   （这个问既考察技术深度又考察技术广度，其实要答好是至关难的，注意越详细越好）
5. 谈一下你所知道的页面性能优化方法？
6. 这些优化方法背后的原理是什么？
7. 除了这些常规的，你还了解什么最新的方法么？
8. 如何分析页面性能？
9. 其它
10. 除了前端之外还了解什么其它技术么？
11. 对计算机基础的了解状况，好比常见数据结构、编译原理等

---

技术点沟通：

HTML+CSS

一、盒子模型，块级元素和行内元素特性与区别。
二、行内块的使用，兼容性解决。
三、清除浮动的方式以及各自的优劣。
四、文档流的概念、定位的理解以及z-index计算规则&浏览器差别性。
五、CSS选择器以及优先级计算。
六、经常使用的CSS hack。
七、遇到的兼容性问题与解决方法。
八、垂直水平居中的实现方式。
九、经常使用布局的实现（两列布局、三列适应布局，两列等高适应布局等）。

---

Javascript

一、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）
二、经常使用的浏览器内核。
三、经常使用的DOM操做，新建、添加、删除、移动、查找等。
四、String于Array经常使用方法。
五、设备与平台监测。
六、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
七、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不一样）。
八、JS变量提高、匿名函数、原型继承、做用域、闭包机制等。
九、对HTTP协议的理解。
十、Ajax的经常使用操做，JS跨域的实现原理。

---

HTML:

1. 语义标签
2. 语义化

---

CSS:

1. 动态居中
2. 动画
3. Bootstrap 样式类
4. Preprocessor
5. 兼容性 Hack与特征检测
6. CSS3属性与性能

---

JS:

1. Name hoisting
2. Prototype
3. Closure
4. Main loop
5. Promise
6. Delegation
7. Cross domain

---

Mobile:

1. 渐进加强
2. 移动端交互
3. 兼容性问题
4. Debug工具 方法

---

1. 主体是看简历发挥，对方写什么就问什么为主：框架、库、浏览器工做原理、NLP、算法、HTTP... 
2. 辅助问题几乎是我我的必备的问题：为何作前端，学习前端过程。

一、跟什么人在一块儿工做
二、过去项目的挑战
三、自学的途径

3个问题基本上就知道这我的的能力水平和瓶颈了，人的不少局限都是被环境限制的，经过闲聊中夹杂的不经意的问题，候选人的画像就已经很鲜明了。处于当前的环境多长时间，有没有突破环境限制的行动，就能评估出潜力和眼界。

什么浏览器兼容、做用域、框架等等的东西不会，不记得均可以学，要不了多长时间，关键仍是有没有潜力、有没有好的习惯。

---

在能力方面：

1. 对 HTML / CSS / JavaScript 具备专家级别的知识；
2. 有较熟练使用 AngularJS / Ember.js / jQuery 或者其它类库的经验；
3. 较熟悉第三方组件（插件）生态环境及具体案例；
4. 有较熟练使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的经验；
5. 有较熟练使用 SASS 或者其它 CSS 预处理器的经验；
6. 有较熟练使用 CoffeeScript 的经验；
7. 对 CSS / JavaScript 设计模式有很好的认识及应用；
8. 对经常使用数据结构和算法熟悉；
9. 有使用 GruntJS / GulpJS 任务运行器的经验；
10. 有使用 Yeoman 生成器的经验；
11. 有诸如 Bower / Volo / JSPM 等前端静态资源包管理器使用经验；
12. 熟悉本地及远程（甄姬）调试操做；
13. 有 Git 的使用经验；

---

Q：简单介绍下 React / Vue 的生命周期

A：几个钩子函数基本能报出来（若是不讲究按顺序、按挂载/更新区分、能把单词用英文念出来而且念对的话），稍微深刻一点问下各个阶段都作了什么，一半以上就“不太清楚”了。更有甚者我问
React，对方回答 created、mounted，提醒以后还以为本身没错的。

Q：【React】定义一个组件时候，如何决定要用 Functional 仍是 Class？

A：简单的用 Function，复杂的用 Class。（不能算错吧……但也不能算答到点子上）追问怎么界定“复杂”，答不上来。

Q：【React】HOC、（非）受控组件、shouldComponentUpdate、React 16 的变化

A：不清楚、没接触过。

Q：【Vue】介绍一下计算属性，和 data、methods、watch 的异同

A：基本都能巴拉一些，说的大部分都对，但就是说不到最关键的“当且仅当计算属性依赖的 data 改变时才会自动计算”。

Q：【Vue】为何 SFC 里的 data 必须是一个函数返回的对象，而不能就只是一个对象？

A：我认可这个问题有点小难，有必定的区分度，不是每一个人都有关注过，可是官方文档有说明这一点，但凡看过的确定有印象。即使没完整看过文档，在初次学习的过程当中难道就不以为奇怪吗？“学而不思”的人和“学而思”的人，区别仍是挺大的。

Q：CSS 选择器的权重

A：经典问题了吧？背都能背出来吧？伪类、伪元素分不清楚，只知道内联、!important、ID、Class
之间的顺序，加上其它的就懵了，并且只说谁大于谁，讲不出具体的计算方法。单层选择器比较还行，几个叠加起来就迷糊了。

Q：JS 有哪几种原始类型

A：基础题，能说上来几个，答不全，主要问题集中在 null 和 undefined 没考虑进去、对象和数组算不算原始类型、以及 Symbol
不少人不知道。

Q：ES 2015+ 有哪些新特性

A：这题能够说的不少，根据应聘者的回答去展开，能够很容易地看出应聘者有没有系统地学习过这方面的东西，以及有没有持续地去跟进语言标准的发展。但这一题能回答的比较好的，寥寥无几，大部分是遇到问题而后零零散散现学的，不够全面、也不够深刻，简单用过，但稍微问点细节就只有“尴尬而不失礼仪的微笑”了。

Q：工程化工具的使用（Webpack、ESLint、Yarn、Git、……）

A：基本都有所接触，但只是“用过”，算不上“会用”，一切顺利还好，真遇到问题了，立马就懵。

Q：Node.js

A：写过 Demo 的水平。（比较初级）

Q：将来 1~2 年的职业规划、下一步最想学的技术、最但愿往什么方向发展、怎么看待XXX技术

A：大部分人对本身没有一个明确的态度和规划。说白了就是还没从学校里出来，什么都等着别人来安排。

通用技能有哪些（请看以下图）？