HTML

1. 必考：你是如何理解 HTML 语义化的？

   • 举例法
     HTML 语义化就是使用正确的标签（总结）段落就写 p 标签，标题就写 h1 标签，文章就写article标签，视频就写video标签，等等。
   • 阐述法
     首先讲以前的后台开发人员使用table布局，然后讲美工人员使用div+css布局，最后讲专业的前端会使用正确的标签进行页面开发。

2. meta viewport 是做什么用的，怎么写？
   举例法

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

这个标签内的内容表示啥意思呢? name为viewport表示供移动设备使用. content定义了viewport的属性.

• width表示移动设设备下显示的宽度为设备宽度(device-width)
• height表示移动设设备下显示的宽度为设备高度.
• user-scalable表示用户缩放能力, no表示不允许.
• initial-scale表示设备与视口的缩放比率
• maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
• 上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.
  然后逐个解释每个单词的意思。

3. 你用过哪些 HTML 5 标签？
   举例法
   平时如果只用div写页面你就完了，把你平时用到的html5标签列举出来即可，但是要注意如果这个标签的用法比较复杂，你要先看一下MDN的文档再说这个标签；如果你说出一个标签，却不知道它有哪些API，那么你就会被扣分

4. H5 是什么？
   阐述法
   搜一下知乎就知道了，H5表示移动端页面，反正不是HTML5。

---

CSS

1. 必考：两种盒模型分别说一下。
   举例：
   content-box:width == 内容区宽度
   border-box:width == 内容区宽度 + padding 宽度（不管 IE *{boxsizing:borderbox;}）
   然后说你平时喜欢用border box，因为更好用。

2. 必考：如何垂直居中？
   背代码 https://jscode.me/t/topic/1936

3. 必考：flex 怎么用，常用属性有哪些？
   看 MDN，背代码。

4. 必考：BFC 是什么？
   [块级格式化上下文]它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

• 背 BFC 触发条件，MDN 写了。
  1. 浮动元素（元素的 float 不是 none）
  2. 绝对定位元素（元素的 position 为 absolute 或 fixed）
  3. 行内块元素
  4. overflow 值不为 visible 的块元素
  5. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

5. CSS 选择器优先级

   1. 背人云亦云的答案（错答案、已过时）：https://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
   2. 看面试官脸色行事
   3. 方方给的三句话
      1. 越具体优先级越高
      2. 同样优先级写在后面的覆盖写在前面的
      3. !important 优先级最高，但是要少用

6. 清除浮动说一下
   背代码

    .clearfix:after{
        content: '';
        display: block; /*或者 table*/
        clear: both;
    }
    .clearfix{
        zoom: 1; /* IE 兼容*/
    }
   

---

原生 JS

1. 必考：ES 6 语法知道哪些，分别怎么用？
   举例法
   let const 箭头函数 Promise 展开操作符 默认参数 import export，见方方整理的列

2. 必考 Promise、Promise.all、Promise.race 分别怎么用？

• 背代码 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 用法

 Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一个成功就会调用success1

3. 必考：手写函数防抖和函数节流

防抖：

• 如果下达该命令后，在t毫秒内再次下达该命令，则取消刚刚下达的命令，只执行新命令
• 最终效果： 对于连续动作(动作间的时间间隔小于t)，以最后一次为准

function debounce(fn, wait) {
    let timer = null
    return function() {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() =>  {
          fn.apply(this, arguments)
          timer = null
        }, wait)
    }
}

let fn = () => console.log('这里只执行很少次')
fn = debounce(fn, 1000)

document.body.onscroll = fn

节流：

• 从上一次命令结束开始的一定时间范围t内，如果多次连续下达命令，则只执行当前时间段t内第一次命令。
• 最终效果：对于连续动作，会过滤出部分动作，让这些过滤后的动作之间的执行间隔大于等于t

 // 节流（一段时间执行一次之后，就不执行第二次）
 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'), 1000)
 throttled()

4. 必考：手写AJAX

• 背代码，完整版

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://api.jirengu.com/weather.php', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('服务器异常')
        }
    }
}
xhr.onerror = function(){
    console.log('服务器异常')
}
xhr.send()

• 背代码，简化版

 var request = new XMLHttpRequest()
 request.open('GET', '/a/b/c?name=ff', true)
 request.onload = ()=> console.log(request.responseText)
 request.send()

1. 必考：这段代码里的 this 是什么？
   1. 背代码
      1. fn()
         this => window/global
      2. obj.fn()
         this => obj
      3. fn.call(xx)
         this => xx
      4. fn.apply(xx)
         this => xx
      5. fn.bind(xx)
         this => xx
      6. new Fn()
         this => 新的对象
      7. fn = ()=> {}
         this => 外面的 this
   2. 看调用
      《this 的值到底是什么？一次说清楚》
2. 必考：闭包/立即执行函数是什么？
   1. 闭包 https://zhuanlan.zhihu.com/p/22486908
      「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。就这么简单。
   2. 立即执行函数 https://zhuanlan.zhihu.com/p/22465092
   • 声明一个匿名函数
   • 马上调用这个匿名函数

造出一个函数作用域，防止污染全局变量

3. 必考：什么是 JSONP，什么是 CORS，什么是跨域？
   饥人谷系统班全都有讲，没有报名的同学自己搜文章看

同源策略(Same origin Policy)
浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
本域指的是？

• 同协议：如都是http或者https
• 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
• 同端口：如都是80端口

1. JSONP https://zhuanlan.zhihu.com/p/22600501

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

2. CORS https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

4. 常考：async/await 怎么用，如何捕获异常？

   1. 阮一峰的书讲了
   2. 方方的视频课讲了 最后一节。
      async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

5. 常考：如何实现深拷贝？
   含义：假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
   背代码，要点：

   1. 递归

function clone(object){
  var object2
  if(! (object instanceof Object) ){
    return object
  }else if(object instanceof Array){
    object2 = []
  }else if(object instanceof Function){
    object2 = eval(object.toString())
  }else if(object instanceof Object){
    object2 = {}
  }
  for(let key in object){
    object2[key] = clone(object[key])
  }
  return object2
}

2.  判断类型
3.  检查环（也叫循环引用）
4.  需要忽略原型

6. 常考：如何用正则实现 trim()？
   背代码

   String.prototype.trim = function(){
       return this.replace(/^\s+|\s+$/g, '')
   }
   //或者 
   function trim(string){
       return string.replace(/^\s+|\s+$/g, '')
   }
   
   

7. 常考：不用 class 如何实现继承？用 class 又如何实现？

   1. 背代码，不用 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.prototye = Animal.prototype
       Dog.prototype = new temp()
      
       Dog.prototype.constuctor = Dog // 这行看不懂就算了，面试官也不问
       Dog.prototype.say = function(){ console.log('汪')}
      
       var dog = new Dog('黄色','阿黄')
      

   2. 背代码，用 class 就简单了

       class Animal{
           constructor(color){
               this.color = color
           }
           move(){}
       }
       class Dog extends Animal{
           constructor(color, name){
               super(color)
               this.name = name
           }
           say(){}
       }
      

8. 常考：如何实现数组去重？

   1. 计数排序变形，背代码

   var a = [4,2,5,6,3,4,5]
   var hashTab = {}
   for(let i=0; i<a.length;i++){
     if(a[i] in hashTab){
       // 什么也不做
     }else{
       hashTab[ a[i] ] = true
     }
   }
   //hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
   console.log(Object.keys(hashTab)) // ['4','2','5','6','3']
   

   2. 使用 Set（面试已经禁止这种了，因为太简单）

   Array.from(new Set(a))
   

   3. 使用 WeakMap(任意类型去重)

9. 放弃：== 相关题目（反着答）
   不要背，记不住，太复杂且没有规律

10. 送命题：手写一个 Promise
    提前写一遍，放在博客里，参考 https://juejin.im/post/5aafe3edf265da238f125c0a

---

DOM

1. 必考：事件委托

   1. 错误版（但是可能能过）

       ul.addEventListener('click', function(e){
           if(e.target.tagName.toLowerCase() === 'li'){
               fn() // 执行某个函数
           }
       })
      
      

      bug 在于，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对。

   2. 高级版

       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。

2. 曾考：用 mouse 事件写一个可拖曳的 div
   参考代码：https://jsbin.com/munuzureya/edit?html,js,output

框架 Vue

1. 必考：watch 和 computed 和 methods 区别是什么？

   1. 思路：先翻译单词，再阐述作用，最后强行找不同。
   2. 要点：
      • computed 和 methods 相比，最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。
      • watch 和 computed 相比，computed 是计算出一个属性（废话），而 watch 则可能是做别的事情（如上报数据）

2. 必考：Vue 有哪些生命周期钩子函数？分别有什么用？

   1. 钩子在文档全都有，看红色的字。
   2. 把名字翻译一遍就是满分
   3. 要特别说明哪个钩子里请求数据，答案是 mounted

3. 必考：Vue 如何实现组件间通信？

   1. 父子组件：使用 v-on 通过事件通信
   2. 爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
   3. 任意组件：使用 eventBus = new Vue() 来通信，eventBus.emit 是主要API
      http://js.jirengu.com/nujic/1/edit?html,js,output
   4. 任意组件：使用 Vuex 通信

4. 必考：Vue 数据响应式怎么做到的？

   1. 答案在文档《深入响应式原理》
   2. 要点
      • 使用 Object.defineProperty 把这些属性全部转为 getter/setter
      • Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set

5. 必考：Vue.set 是做什么用的？

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新，但是使用vue.set或者this.$set的方式可以使得新添加的属性也是响应式的，并触发视图更新。仅此而已。

6. Vuex 你怎么用的？

   1. 背下文档第一句：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
   2. 说出核心概念的名字和作用：State/Getter/Mutation/Action/Module

7. VueRouter 你怎么用的？

   1. 背下文档第一句：Vue Router 是 Vue.js 官方的路由管理器。
   2. 说出核心概念的名字和作用：History 模式/导航守卫/路由懒加载
   3. 说出常用 API：router-link/router-view/this.router.replace/this.$route.params

       this.$router.push('/user-admin')
       this.$route.params
      

8. 路由守卫是什么？
   导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
   简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。

HTTP

3. 必考：HTTP 状态码知道哪些？分别什么意思？
   200 OK 正常返回信息
   301 Moved Permanently 请求的网页已永久移动到新位置。
   403 Forbidden 禁止访问。
   404 Not Found 找不到如何与 URI 相匹配的资源。
   500 Internal Server Error 最常见的服务器端错误。
   • 2xx 表示成功
   • 3xx 表示需要进一步操作
   • 4xx 表示浏览器方面出错
   • 5xx 表示服务器方面出错
   • 完整参考 http://www.runoob.com/http/http-status-codes.html
4. 大公司必考：HTTP 缓存有哪几种？
   • 需要详细的了解 ETag、CacheControl、Expires 的异同
   • 参考 https://imweb.io/topic/5795dcb6fb312541492eda8c
   • 答题要点：
     1. ETag 是通过对比浏览器和服务器资源的特征值（如MD5）来决定是否要发送文件内容，如果一样就只发送 304（not modified）
     2. Expires 是设置过期时间（绝对时间），但是如果用户的本地时间错乱了，可能会有问题
     3. CacheControl: max-age=3600 是设置过期时长（相对时间），跟本地时间无关。
5. 必考：GET 和 POST 的区别
   1. 错解，但是能过面试
      • GET在浏览器回退时是无害的，而POST会再次提交请求。
      • GET产生的URL地址可以被加入收藏栏，而POST不可以。
      • GET请求会被浏览器主动cache，而POST不会，除非手动设置。
      • GET请求只能进行url编码，而POST支持多种编码方式。
      • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
      • GET请求在URL中传送的参数是有长度限制的，而POST么有。
      • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
      • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
      • GET参数通过URL传递，POST放在Request body中。
   2. 正解
      就一个区别：语义——GET 用于获取资源，POST 用于提交资源。
   3. 想装逼请参考 https://zhuanlan.zhihu.com/p/22536382
6. Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session
   • Cookie V.S. LocalStorage
     1. 主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会
     2. Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）
   • LocalStorage V.S. SessionStorage
     1. LocalStorage 一般不会自动过期（除非用户手动清除），而 SessionStorage 在回话结束时过期（如关闭浏览器）
   • Cookie V.S. Session
     1. Cookie 存在浏览器的文件里，Session 存在服务器的文件里
     2. Session 是基于 Cookie 实现的，具体做法就是把 SessionID 存在 Cookie 里

Webpack

1. 必考：有哪些常见 loader 和 plugin，你用过哪些？

2. 英语题：loader 和 plugin 的区别是什么？
   Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
   Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

3. 必考：如何按需加载代码？
   通过import()语句来控制加载时机，webpack内置了对于import()的解析，会将import()中引入的模块作为一个新的入口在生成一个chunk。 当代码执行到import()语句时，会去加载Chunk对应生成的文件。

4. 必考：如何提高构建速度？

5. 转义出的文件过大怎么办？