然后逐个解释每个单词的意思。
先说两种盒模型分别怎么写，具体到代码。然后说你平时喜欢用border box，因为更好用。
背代码 https://jscode.me/t/topic/1936
看 MDN，背代码。
背 BFC 触发条件，MDN 写了。 但是不用全部背下来，面试官只知道其中几个：
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}举例法
背代码 Promise 用法
function fn(){
return new Promise((resolve, reject)=>{
成功时调用 resolve(数据)
失败时调用 reject(错误)
})
}
fn().then(success, fail).then(success2, fail2)背代码 Promise.all 用法
Promise.all([promise1, promise2]).then(success1, fail1)promise1和promise2都成功才会调用success1
Promise.race([promise1, promise2]).then(success1, fail1)promise1和promise2只要有一个成功就会调用success1； promise1和promise2只要有一个失败就会调用fail1； 总之，谁第一个成功或失败，就认为是race的成功或失败。
背代码
// 节流（一段时间执行一次之后，就不执行第二次）
function throttle(fn, delay){
let canUse = true
return function(){
if(canUse){
fn.apply(this, arguments)
canUse = false
setTimeout(()=>canUse = true, delay)
}
}
}
const throttled = throttle(()=>console.log('hi'))
throttled()
throttled() 注意，有些地方认为节流函数不是立刻执行的，而是在冷却时间末尾执行的（相当于施法有吟唱时间），那样说也是对的。
背代码
// 防抖（一段时间会等，然后带着一起做了）
function debounce(fn, delay){
let timerId = null
return function(){
const context = this
if(timerId){window.clearTimeout(timerId)}
timerId = setTimeout(()=>{
fn.apply(context, arguments)
timerId = null
},delay)
}
}
const debounced = debounce(()=>console.log('hi'))
debounced()
debounced()背代码，完整版
var request = new XMLHttpRequest()
request.open('GET', '/a/b/c?name=ff', true);
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}};
request.send();背代码，简化版
var request = new XMLHttpRequest()
request.open('GET', '/a/b/c?name=ff', true)
request.onload = ()=> console.log(request.responseText)
request.send()String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '')
}
//或者
function trim(string){
return string.replace(/^\s+|\s+$/g, '')
}背代码，不用 class 这样实现
function Animal(color){
this.color = color
}
Animal.prototype.move = function(){} // 动物可以动
function Dog(color, name){
Animal.call(this, color) // 或者 Animal.apply(this, arguments)
this.name = name
}
// 下面三行实现 Dog.prototype.__proto__ = Animal.prototype
function temp(){}
temp.prototype = Animal.prototype
Dog.prototype = new temp()
Dog.prototype.constuctor = Dog // 这行看不懂就算了，面试官也不问
Dog.prototype.say = function(){ console.log('汪')}
var dog = new Dog('黄色','阿黄')背代码，用 class 就简单了
class Animal{
constructor(color){
this.color = color
}
move(){}
}
class Dog extends Animal{
constructor(color, name){
super(color)
this.name = name
}
say(){}
}不要背，记不住，太复杂且没有规律
提前写一遍，放在博客里，参考 https://juejin.im/post/5aafe3edf265da238f125c0a
ul.addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
fn() // 执行某个函数
}
})bug 在于，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对。
高级版
function delegate(element, eventType, selector, fn) {
element.addEventListener(eventType, e => {
let el = e.target
while (!el.matches(selector)) {
if (element === el) {
el = null
break
}
el = el.parentNode
}
el && fn.call(el, e, el)
})
return element
}思路是点击 span 后，递归遍历 span 的祖先元素看其中有没有 ul 里面的 li。
参考代码：https://jsbin.com/munuzureya/edit?html,js,output
2xx 表示成功 3xx 表示需要进一步操作 4xx 表示浏览器方面出错 5xx 表示服务器方面出错 完整参考 http://www.runoob.com/http/http-status-codes.html
需要详细的了解 ETag、CacheControl、Expires 的异同 参考 https://imweb.io/topic/5795dcb6fb312541492eda8c 答题要点： ETag 是通过对比浏览器和服务器资源的特征值（如MD5）来决定是否要发送文件内容，如果一样就只发送 304（not modified） Expires 是设置过期时间（绝对时间），但是如果用户的本地时间错乱了，可能会有问题 CacheControl: max-age=3600 是设置过期时长（相对时间），跟本地时间无关。
见上一题
答题思路跟 Vue 的一样
看你记忆力了：https://imweb.io/topic/579e33d693d9938132cc8d94
不应该出现的类型
提供了类型约束，因此更可控、更容易重构、更适合大型项目、更容易维护
比较复杂，看我的文章 https://zhuanlan.zhihu.com/p/22500730
比较复杂，看若愚的文章 https://zhuanlan.zhihu.com/p/22521378
必考：你遇到最难的问题是怎样的？ 要点：一波三折。参考 https://www.zhihu.com/question/35323603
你在团队的突出贡献是什么？
把小事说大。
最近在关注什么新技术 书、博客、推特、知乎，不要说 CSDN、百度。
有没有看什么源码，看了后有什么记忆深刻的地方，有什么收获 看过源码说源码，推荐看 underscore.js 的源码 没看过源码就说同事的代码，代码烂就说哪里烂，代码好就说哪里好 收获：命名规范、设计模式
[1,2,3].map(parseInt) 答案 1 NaN NaN
var a = {name: 'a'} a.x = a = {} 问 a.x 是多少？ 答案 undefined
利用 == 会调用 valueOf() 的特性
var a = {
value: 1,
valueOf(){
return this.value++
}
}
a ==1 && a== 2 && a==3 // true利用 a 会读取 window.a 的特性
var value = 1;
Object.defineProperty(window, 'a', {
get(){
return value++;
}
})
a ==1 && a== 2 && a==3 // true
// 或者
a ===1 && a=== 2 && a===3 // true看图讲解 https://javascript.info/garbage-collection 什么是垃圾 如何捡垃圾（遍历和计数，只是不同的算法而已） 前端又有其特殊性（JS进程和DOM进程）
更深入一些的讲解 http://newhtml.net/v8-garbage-collection/
setTimeout(function () {
console.log(4);
}, 0);
new Promise(function (resolve) {
console.log(1);
resolve();
console.log(2);
}).then(function () {
console.log(5);
});
console.log(3);
1
2
3
5
4肤浅理解：『一会儿』和『尽快』异步任务
详细理解：Eventloop 是个啥？
浏览器有 Eventloop 吗？
每个 API 对应哪个任务队列？
async function async1() {
console.log(1);
await async2();
console.log(2);
}
async function async2() {
console.log(3)
}async1();
new Promise(function (resolve) { console.log(4); resolve(); }).then(function () { console.log(5); }); 1 3 4 2 5
注意：这一题的答案不唯一，在 Node.js 和 Chrome 的结果不一样，甚至在 Chrome 上也是时而这个答案，时而那个答案。所以还是说思路最重要。