Web前端面试技术点

常规问题：

一般来说会问如下几方面的问题：

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

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

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

---

技术点沟通：

HTML+CSS

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

---

Javascript

1、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）
2、常用的浏览器内核。
3、常用的DOM操作，新建、添加、删除、移动、查找等。
4、String于Array常用方法。
5、设备与平台监测。
6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）。
8、JS变量提升、匿名函数、原型继承、作用域、闭包机制等。
9、对HTTP协议的理解。
10、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. 辅助问题几乎是我个人必备的问题：为什么做前端，学习前端过程。

1、跟什么人在一起工作
2、过去项目的挑战
3、自学的途径

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：大部分人对自己没有一个明确的态度和规划。说白了就是还没从学校里出来，什么都等着别人来安排。

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