工作中总结的一些比较重要的前端技巧，个人觉得在面试中提问比较合适，不仅可以检验面试官的技术水平，还要考察他们知识体系的广度。适合应届毕业生和工作不足两年的学生。掌握以下知识基本可以满足工作需要。高级开发工程师应该更多地关注架构能力，而不是具体的技术细节。HTML5语义标签，meta元数据标签，考察其对语义的理解。draggale属性的api、dragstart、drop、dataTransfer等内容用于考察新技术的使用。什么是CSS3BFC，它的作用和影响是什么？BFC（BlockFormattingContext，块格式化上下文）是网页可视化渲染过程中盒模型布局和交互的规范和实体，主要体现在浮动和定位元素的处理上。一个BFC实例在渲染时包含了其内部元素的所有内容，浮动效果、清除浮动、边距折叠只会影响同一个BFC。BFC常用的创建方法有：1.根元素2.浮动元素：float!=none3.绝对定位：position=absolute|fixed4.布局元素、行内块元素、表格元素：display:flex|网格|流根|行内块|表格单元格5。多列布局：column-count!=auto|column-span=all什么是盒模型，它是如何计算的？盒模型是指浏览器在视觉上将文档流渲染为不同矩形盒的组合，每个元素被渲染为一个矩形盒，包括内容区域（文字、图片等真实内容的区域.)和可选的margin有/border/padding三个区域，中文名称是margin,border和padding。包含关系是margin>border>padding>content。计算方法是自顶向下。四个框区域的宽高支持固定值设置。同时，margin/padding支持百分比。计算出的高宽值以父元素内容区域的宽度为准，内容区域也支持百分比，但高度和宽度分别对应父元素内容区域的高度和宽度，边框不支持百分比。内容区域默认宽高由框类型和是否包含其他框计算，其余区域为0。盒子模型包含几种类型，如何转换。盒子模型相关的一些DOM属性offsetHeight/offsetTop/scrollHeight/clientHeight指的是什么？offsetHeight：包含边框、填充和内容区域的高度之和。offsetTop：元素边框上边框到父元素内容上边框的距离。scrollHeight：没有滚动条时元素的offsetHeight的总高度。clientHeight：浏览器视口的高度。选择器实现原理及其权重和最右匹配的概念。圣杯布局的几种实现（大屏分为上、下、中三个竖直容器，小屏横列为5项）（另见@mediamediaqueries）。bootstrap框架的响应式布局实现原理，考查viewport视口，媒体查询的边界条件。垂直居中对齐方法检查元素的文本基线。如何实现bootstrap输入框组，考察：first-child、垂直居中对齐等伪元素。JavascriptJs中包含的基本类型，null/undefined/boolean/number/string/object/Symbol。数组、函数、对象实例和原型链之间的对应关系。unshift/slice/map/forEach/filter/some/every/reduce等数组常用函数，查看哪些返回新的，哪些修改原数组。尝试在数组中加入一个通用的方法makeIndexObj，使其可以根据某个参数作为键值重构为一个新的对象。Object.defineProperty(Array.prototype,'makeIndexObj',{value:function(key){letresult={};this.forEach(item=>{//这里借鉴了jQuery的深拷贝，具体实现result[item[key]]=$.extend(true,{},item);});返回结果;}});检查对象的属性及其特性，包括defineProperty和propertyaccessor定义属性的区别，以及属性的Enumerable、configurable、writable、value、get、set特性，同时考察deepcopy和functionbodyboundarydetection（支持多种键值，输入为数组或字符串）。浅拷贝和深拷贝的实现，考察Object.assign()，forin遍历，$.extend()等。let、var、const的区别和优劣考察变量提升和常量的实现方式，同时深入研究如何实现真正的不可修改对象。cookie、localstorage、sessionstorage的区别，考察空间限制，哪些与服务器交互，常见的应用场景。es6arrowfunction=>的简化写法和功能=>考察了对参数和自动返回值的要求，以及this对运行环境的强制绑定。事件捕获和冒泡的方式，考察addEventListener和attachEvent事件的区别和关系，jQueryon/bind/off/die/live等常用方法。兄弟元素的内容相互覆盖，以及事件是如何触发的。检查与冒泡和元素碰撞检测的混淆。AJAX的原理和跨域的原理和方法可以考察浏览器和服务器之间的HTTP通信。Promise异步编程，考察其基本用法，常用race/all方法，异常捕获方法。异步编程Generator的考察，其关键字yield的使用，以及与Promise的关系，同时可以深入研究js中的几种异步编程方式。该对象的绑定方式包括默认绑定、隐式绑定、显式绑定、新建绑定、各应用场景描述和内部原理。闭包，闭包是如何创建的，它们的作用及其副作用。并发模型和事件循环机制JS的并发模型是基于时间循环的。实现数据节流和防抖。根据列表输入动态生成一段DOM。实施对象。冻结。VueMVVM框架MVVM框架解决了哪些问题，带来了哪些问题。考察Vue的特点，如双向数据绑定、模块化、组件化、模板语言等优点，以及隐藏实现细节、不利于问题追踪、过度包装影响性能等缺点。你用过官方的vuedevtools开发工具调试过吗？如何实现双向数据绑定，考察es5的getter/setter方法，及其对数组对象的完全重写等，深入考察设计模式的观察者模式和订阅者模式的方法和区别。如何跟踪数据变化，数组有哪些变化是检测不到的，比如直接改变长度，修改元素索引，修改对象的属性。为什么检测不到这些，因为现有的js语言水平不支持，现有的方法只能重写。nextTick的使用场景，为什么要用nextTick，事件驱动，去掉同一个执行周期内重复的回调事件，提高效率，减少资源消耗。组件的优点，模块封装的优缺点是什么，组件如何模块化：props往下，events往上。单页面复杂应用应该new多少个Vue对象，不同Vue对象的数据如何传递，公共函数如何声明。研究模块的封装和耦合及其权衡，引入vuex.js。是否使用过vuex和vue-router，解决了哪些问题。不深究第三方库，只考察广度和技术栈及其理解。React生命周期包括什么，执行顺序是什么？父子组件和无关组件之间如何调用？react-router是如何实现知识全面化的？url从输入到返回要经过什么过程？调查范围非常广泛：1.浏览器读取最近一次浏览，自动推荐网址。2.获取URL并尝试读取缓存。3.如果缓存不存在，则构建响应头并发起请求。其中包括dns解析、tcp连接建立和http请求发起。4、服务端接收客户端请求，解析处理返回数据。5、浏览器收到响应头，读取状态码等信息，缓存或读取缓存，或再次发起请求。6.读取响应体，检测数据类型，分析。7.渲染页面。在这些过程中，每一个都可以深入查询，比如：1、网络通信方向的dns解析过程，分为若干次，包括根域名服务器、权威服务器、代理等概念服务器。2、tcp连接建立的过程，三次握手，`syn,ack+syn,ack`，断开连接的`waittimestate`的作用。3.如何控制缓存和格式，以及请求头和响应头的body参数的作用。4、常见状态码的含义，如200、304、404、500等，不同段分别指向什么错误。5、浏览器的请求控制，同域名下最多保持6个请求，如何重用连接，keep-alive的作用。6、渲染页面的过程，DOM、BOM、ECMAScript的关系，什么是阻塞什么是非阻塞。document.ready是准备就绪的。页面性能优化图片合并，异步加载，js压缩，CDN加速等兼容性常见的轮子事件，事件对象等，主要看个人遇到的问题，不挑远程问题。了解旧版兼容性流程。常用的问题解决方案，查看常用网站的文档，如MDN、w3c、segmentfault、stackoverflow、github等官方文档和程序员交友社区，考察他们善用搜索引擎的能力。git仓库管理如何新建分支和合并分支，如何处理冲突，如何回滚版本。主要考察合作开发代码的经验和对仓库的理解。排序算法的算法相关知识，插入排序、快速排序、冒泡排序的事件复杂度，快速排序的思想，手写快速排序，快速排序的bestcase和worstcase。js用的什么排序算法，深入考察fori++和[].forEach的效率，为什么。
