面试

2020-03-18 本文已影响0人 kzc爱吃梨

HTML

必考：你是如何理解 HTML 语义化的？
- 举例法
  HTML 语义化就是使用正确的标签（总结）段落就写 p 标签，标题就写 h1 标签，文章就写article标签，视频就写video标签，等等。
- 阐述法
  首先讲以前的后台开发人员使用table布局，然后讲美工人员使用div+css布局，最后讲专业的前端会使用正确的标签进行页面开发。
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标签就是告诉浏览器, 不要在移动端显示的时候缩放.
然后逐个解释每个单词的意思。

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

CSS

必考：两种盒模型分别说一下。
举例：
content-box:width == 内容区宽度
border-box:width == 内容区宽度 + padding 宽度（不管 IE *{boxsizing:borderbox;}）
然后说你平时喜欢用border box，因为更好用。
必考：如何垂直居中？
背代码 https://jscode.me/t/topic/1936
必考：flex 怎么用，常用属性有哪些？
看 MDN，背代码。
必考：BFC 是什么？
[块级格式化上下文]它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

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

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

清除浮动说一下
背代码

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

原生 JS

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

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

防抖：

如果下达该命令后，在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()

必考：手写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()

必考：这段代码里的 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 的值到底是什么？一次说清楚》
必考：闭包/立即执行函数是什么？
1. 闭包 https://zhuanlan.zhihu.com/p/22486908
  「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。就这么简单。
2. 立即执行函数 https://zhuanlan.zhihu.com/p/22465092
- 声明一个匿名函数
- 马上调用这个匿名函数

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

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

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

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

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

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

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 请求没啥区别，代码完全一样。

常考：async/await 怎么用，如何捕获异常？
1. 阮一峰的书讲了
2. 方方的视频课讲了最后一节。
  async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
常考：如何实现深拷贝？
含义：假设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.  需要忽略原型

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

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

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

背代码，不用 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('黄色','阿黄')

背代码，用 class 就简单了

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

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

计数排序变形，背代码

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']

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

Array.from(new Set(a))

使用 WeakMap(任意类型去重)

放弃：== 相关题目（反着答）
不要背，记不住，太复杂且没有规律
送命题：手写一个 Promise
提前写一遍，放在博客里，参考 https://juejin.im/post/5aafe3edf265da238f125c0a

DOM

必考：事件委托

错误版（但是可能能过）

 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。

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

框架 Vue

必考：watch 和 computed 和 methods 区别是什么？
1. 思路：先翻译单词，再阐述作用，最后强行找不同。
2. 要点：
  - computed 和 methods 相比，最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。
  - watch 和 computed 相比，computed 是计算出一个属性（废话），而 watch 则可能是做别的事情（如上报数据）
必考：Vue 有哪些生命周期钩子函数？分别有什么用？
1. 钩子在文档全都有，看红色的字。
2. 把名字翻译一遍就是满分
3. 要特别说明哪个钩子里请求数据，答案是 mounted
必考：Vue 如何实现组件间通信？
1. 父子组件：使用 v-on 通过事件通信
2. 爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
3. 任意组件：使用 eventBus = new Vue() 来通信，eventBus. $on 和 eventBus.$ emit 是主要API
  http://js.jirengu.com/nujic/1/edit?html,js,output
4. 任意组件：使用 Vuex 通信
必考：Vue 数据响应式怎么做到的？
1. 答案在文档《深入响应式原理》
2. 要点
  - 使用 Object.defineProperty 把这些属性全部转为 getter/setter
  - Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set
必考：Vue.set 是做什么用的？

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

Vuex 你怎么用的？
1. 背下文档第一句：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
2. 说出核心概念的名字和作用：State/Getter/Mutation/Action/Module
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
```
路由守卫是什么？
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。

HTTP

必考：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
大公司必考：HTTP 缓存有哪几种？
- 需要详细的了解 ETag、CacheControl、Expires 的异同
- 参考 https://imweb.io/topic/5795dcb6fb312541492eda8c
- 答题要点：
  1. ETag 是通过对比浏览器和服务器资源的特征值（如MD5）来决定是否要发送文件内容，如果一样就只发送 304（not modified）
  2. Expires 是设置过期时间（绝对时间），但是如果用户的本地时间错乱了，可能会有问题
  3. CacheControl: max-age=3600 是设置过期时长（相对时间），跟本地时间无关。
必考：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
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

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

英语题：loader 和 plugin 的区别是什么？
Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
必考：如何按需加载代码？
通过import()语句来控制加载时机，webpack内置了对于import()的解析，会将import()中引入的模块作为一个新的入口在生成一个chunk。当代码执行到import()语句时，会去加载Chunk对应生成的文件。
必考：如何提高构建速度？
转义出的文件过大怎么办？

面试

HTML

CSS

原生 JS

DOM

框架 Vue

HTTP

Webpack

猜你喜欢

热点阅读