参考文章：世界顶级公司的前端面试都问些什么
面试集锦：中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)
面试集锦：JavaScript知识点整理

我们会在开发以及常见面试中遇到一些问题，关于这些问题，个人准备了一个这样的集锦，涉及CSS,JS,常用框架等；

CSS

盒模型

盒模型详解

页面渲染时，dom 元素所采用的布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

content-box (W3C 标准盒模型)
border-box (IE 盒模型)
padding-box
margin-box (浏览器未实现)

CSS Hack

CSS hack详解

什么是CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线”“和星号” “，IE7能识别星号” “，但不能识别下划线”“，IE6~IE10都认识”\9”，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

移动端布局—rem

rem详解

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。
它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。

rem布局

原理是，先按定高宽设计出来页面，然后转换为rem单位，
配合js查询屏幕大小来改变html的font-size，
最终做出所谓的完美自适应。（100%还原）

rem原理

rem布局的本质是等比缩放，一般是基于宽度；

比如一个750的设计图，我们可以分成50分，每一份为15px，如果一个div宽度要求30px,设置宽度的时候只需要

1 2	html {font-size: 15px} p {width: 2rem} /30px/15/

当然也可以通过js来设置根元素html的字体大小

// 常规情况
!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
 
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

优化方案vw,vh

让页面元素随着页面宽度变化，需要一个新的单位x，x等于屏幕宽度的百分之一，css3带来了rem的同时，也带来了vw和vh

vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN

缺点

vw的兼容性不如rem好，使用之前要看下

兼容性	Ios	安卓
rem	4.1+	2.1+
vw	6.1+	4.4+

另外，在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题

其他问题

字体的问题

字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的
我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小
可以通过修改body字体的大小来实现，同时所有设置字体大小的地方都是用em单位，对就是em，因为只有em才能实现

屏幕过宽

一般我们都会设置一个最大宽度，大于这个宽度的话页面居中，两边留白

1
2
3

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';

设置body的宽度为100rem，并水平居中

1	body { margin: auto; width: 100rem }

JavaScript

主要是根据项目中常用以及考虑到JavaScript的深度需要，总结一下问题

关于原型链

原型链是由原型对象组成，每个对象都有 proto 属性，指向了创建该对象的构造函数的原型，proto 将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

属性查找机制: 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象Object.prototype，如还是没找到，则输出undefined；

属性修改机制: 只会修改实例对象本身的属性，如果不存在，则进行添加该属性，如果需要修改原型的属性时，则可以用: b.prototype.x = 2；但是这样会造成所有继承于该对象的实例的属性发生改变。

ES6

主要针对ES6的个人见解

async函数

async,await相比于promise的优势

优势在于处理then的调用链，能够更清晰准确的写出代码
缺点：await将异步代码改造成同步，如果多个异步代码之间没有依赖性却使用了await会导致性能降低

对async，await的理解，内部原理

async就是将函数返回值使用Promise.resolve()包裹一下，和then中处理返回值一样，并且async只能搭配await使用
await其实就是generator加上Promise的语法糖，且内部实现了自动执行generator