前端面试题总结

工作中总结的一些比较重要的前端技能，觉得在面试中比较合适提问，即能查看出面试者的技术功底，又能考察其知识体系的广度。适用于应届生和工作年限两年下的同学，掌握下面的知识基本满足工作需求了。更高年限的开发工程师则应该更注重架构能力而不是具体的技术细节。

HTML5

1. 语义化标签，meta元数据标签，考察其对语义化的理解。
2. draggale属性的api，dragstart, drop, dataTransfer等内容，考察其对新技术的使用。

CSS3

1. BFC是什么，有什么作用和影响？
   BFC(Block Formatting Context，块格式化上下文)，是Web页面可视化渲染过程中盒子模型布局和交互的规范和实体，主要体现在浮动和定位元素的处理。一个BFC实例在渲染上包含它内部元素的所有内容，浮动效果、清除浮动、外边距折叠只会影响在同一个BFC内。常用的创建BFC的方法包括：

   1. 根元素
   2. 浮动元素：float != none
   3. 绝对定位：position = absolute | fixed
   4. 布局元素，行内块元素，表格元素：display: flex | grid | flow-root | inline-block | table-cell
   5. 多列布局：column-count != auto | column-span = all

2. 盒子模型是什么，怎么计算的？
   盒子模型指的是浏览器将文档流从视觉上渲染为不同矩形框的组合，每个元素都被渲染为一个矩形框，包含内容区域（文本、图片等真实内容的区域）和可选的margin/border/padding三个区域，中文名为外边距、边框和填充。包含关系为margin > border > padding > content。

   计算方式为自上而下，4个盒子区域的宽度和高度都支持固定值进行设置，同时margin/padding支持百分比，计算的高度和宽度值都依据父元素的content区域宽度，content区域也支持百分比，不过高度和宽度分别对应父元素content区域的高度和宽度，border不支持百分比。content区域的默认宽高由盒子类型和是否包含有其他盒子来进行计算，其余区域均为0。

3. 盒子模型包含几种类型，怎么转换。

4. 盒子模型相关的一些DOM属性offsetHeight/offsetTop/scrollHeight/clientHeight分别指什么？

   offsetHeight: 包含border、padding和content区域的高度总和。
   offsetTop: 元素border上边界到父元素content上边界的距离。
   scrollHeight: 没有滚动条的情况下，元素的offsetHeight总高度。
   clientHeight: 浏览器视口的高度。

5. 选择器实现原理以及其权重和最右匹配的概念。
6. 圣杯布局（大屏幕分为顶部、底部和中间三个纵向容器，小屏幕时横列为5项）的几种实现方式(同时考察@media媒体查询)。
7. bootstrap框架的响应式布局实现原理，考察viewport视口，媒体查询的边界条件。
8. 垂直居中对齐的方式，考察元素的文字基线。
9. bootstrap输入框组怎么实现，考察:first-child等伪元素和垂直居中对齐。

Javascript

1. Js包含的基础类型，null/undefined/boolean/number/string/object/Symbol。array, function, object实例和原型链对应关系。
2. 数组的常用函数，如unshift/slice/map/forEach/filter/some/every/reduce，同时考察哪些返回新的，哪些修改了原数组。

3. 尝试给数组添加一个通用方法makeIndexObj，使得可以根据某个参数作为key值重构为新对象。

   Object.defineProperty(Array.prototype, 'makeIndexObj', {
       value: function (key) {
           let result = {};
           this.forEach(item => {
            // 这里借用了jQuery的深度复制，可以考察其具体的实
            result[item[key]] = $.extend(true, {}, item);
           });
           return result;
       }
   });

   考察对象的属性以及其特征，包括defineProperty和属性访问器定义属性的区别，以及属性的enumerable, configurable, writable, value, get, set特征，同时考察深度复制和功能体边界检测（支持多key值，输入的是一个数组或字符串）。

4. 浅拷贝和深度拷贝的实现，考察Object.assign(), for in遍历, $.extend()等。
5. let, var, const的区别和优劣，考察变量提升，常量实现方式，同时深入考察如何实现真正的不可修改的对象。
6. cookie，localstorage, sessionstorage的区别，考察空间限制，哪些和服务器交互，常见应用场景。
7. es6箭头函数 => 的简化写法和作用，考察对参数的要求和自动返回值以及this强制绑定运行环境。
8. 事件捕获和冒泡的方式，考察addEventListener和attachEvent事件，以及jQuery on/bind/off/die/live等常用方法的区别和关系。
9. 兄弟元素内容互相覆盖，事件如何触发。考察与冒泡的混淆，以及元素碰撞检测。
10. AJAX的原理以及跨域原理和方法，可以考察浏览器和服务端HTTP通信。
11. Promise异步编程，考察其基本用法，常用race/all方法，异常捕获方式。
12. 异步编程Generator的考察，其关键字yield的使用，与Promise的关系，同时可以深入考察js总共有几种异步编程的方式。
13. this对象的绑定方式，总共包含有默认绑定、隐含绑定、明确绑定、new绑定，每种的应用场景阐述和内部原理。
14. 闭包，闭包如何产生以及其作用和副作用。
15. 并发模型与事件循环机制
    JS的并发模型基于时间循环。

Vue MVVM框架

1. MVVM框架解决了什么问题，带来了什么问题。考察Vue的特性，如双向数据绑定、模块化、组件化、模板语言等优势，隐藏实现细节、不利于问题追查、过度封装影响性能的弊端。是否使用过官方vue devtools开发工具调试。
2. 双向数据绑定如何实现，考察es5 getter/setter方法，以及其对数组对象等完全重写，深入考察设计模式的观察者模式和订阅者模式的方式以及区别。
3. 如何追踪数据变化，数组的哪些改变方式不能被检测到，如直接改变length，元素索引修改，同时还有对象的属性修改。为什么这些不能被检测到，因为现有js语言层面不支持，只能对既有方法进行重写。
4. nextTick的使用场景，为什么会使用nextTick，事件驱动，同一个执行周期内去重回调事件提高效率减少资源消耗。
5. 组件的优势，模块封装有什么优劣，组件如何进行模块化：props down, events up。
6. 单页面复杂应用应该new多少个vue对象，不同vue对象数据如何传递，公有函数如何声明。考察模块的封装和耦合以及其取舍，引入vuex.js。
7. vuex和vue-router是否使用过，都解决了什么问题。不深究第三方库，只考察广度和技术栈以及其理解程度。

综合知识

1. url从输入到返回都经历了什么过程？考察范围非常广泛：

   1. 浏览器读取最近浏览，自动推荐网址.
   2. 拿到url，尝试读取缓存。
   3. 缓存不存在，构建响应头，发起请求。其中包括dns解析，tcp建连，发起http请求。
   4. 服务器接收到客户端请求，解析并处理返回数据。
   5. 浏览器接收到响应头，读取状态码等信息，进行缓存或读取缓存或再次发起请求。
   6. 读取响应体，检测数据类型，进行解析。
   7. 渲染页面。

   在这些过程中，每一个都可以深入询问，如：

   1. 网络通信方向dns解析的过程，一共分为几次，根域名服务器、权威服务器、代理服务器等概念。
   2. tcp建连的过程，三次握手，`syn, ack+syn, ack`，以及断开连接的`wait time state`的作用。
   3. 如何进行缓存和格式的控制，请求头和响应头的主体参数的作用。
   4. 常见的状态码的含义，如200、304、404、500等，不同分段指向什么错误。
   5. 浏览器的请求控制，对同一个域名下最多保持6个请求，如何复用连接，keep-alive的作用。
   6. 渲染页面的过程，DOM、BOM、ECMAScript的关系，什么为阻塞，什么非阻塞。document.ready是准备好了什么。

2. 页面性能优化
   图片合并、异步加载、js压缩、CDN加速等
3. 兼容性
   常见的滚轮事件、事件对象等，主要看个人遇到的问题，不要挑偏僻的问。对兼容性的历史遗留过程的了解。出现问题常用的解决方案，查文档常用的网站，如MDN、w3c、segmentfault、stackoverflow、github等官方文档和程序员交友社区，考察其善用搜索引擎的能力。
4. git仓库管理
   如何构建新的分支和合并分支，出现冲突如何处理，如何回滚版本。主要考察合作开发代码的经验以及对仓库的理解。
5. 算法相关
   都了解什么排序算法，插入排序和快速排序和冒泡排序的事件复杂度，快速排序的思想，手写快排，快排的最优情况和最差情况。js使用了什么排序算法，深入考察for i++和[].forEach的效率，为什么。