HTML

1.HTML语义化

举例法 HTML 语义化就是使用正确的标签（总结）段落就写 p 标签，标题就写 h1 标签，文章就写article标签，视频就写video标签，等等。这样做使代码更具可读性，便于团队开发和维护
阐述法首先讲以前的后台开发人员使用table布局，然后讲美工人员使用div+css布局，最后讲专业的前端会使用正确的标签进行页面开发。

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

什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

举例一个然后翻译它的意思

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

宽度跟默认宽度一样，默认的缩放比例是一倍，最小的一倍，最大的是一倍，用户不准缩放

更多meta资料点击

3. 你用过哪些HTML5标签

header、main、footer、article、canvas、video、audio

4. 什么是H5

移动端页面

详情点击预览

CSS

1. 两种盒模型分别说一下

content-box(默认值): 标准盒模型

宽度 = 内容的宽度

高度 = 内容的高度

不会包含border, padding
border-box: 怪异模式

width = border + padding + 内容的width，

height = border + padding + 内容的height

2. 为什么要使用border-box

content-box缺点（标准盒模型）

当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值
border-box的优势（IE盒模型）

border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。

参考链接点击

3 如何实现垂直居中

七种方法实现垂直居中

3. 1. flex

<div class="parent"> 
  <div class="child">
    图片
  </div>
  
  .parent{
  border: 1px solid red;
  height: 200px;
  width: 200px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.child{
  border: 1px solid green;
  width: 100px;
  height:100px;
}

微信截图_20210904083813.png

3.2. 绝对定位和-maigin值

<div class="parent">
   <div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}

4. flex怎么用，常用属性有哪些

flex布局 flex容器流动方向

5.BFC是什么.背 BFC 触发条件

BFC它的意思是块格式化上下文

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

举例：如果我们给一个div写一个overflow：hidden，那么这个div里面的浮动元素就会被他包裹起来

MDN

6. css选择器优先级

CSS 7 种基础的选择器：

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href="segmentfault.com"]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

越具体优先级越高
写在后面的，覆盖写在前面的
important 最高，少用

权重与优先级

权重等级

內联样式 1000
ID选择器 0100
类选择器、属性选择器、伪类选择器 0010
元素选择器、伪元素选择器 0001
通配符选择器 0000

优先级计算

!important > 內联样式 > 高权重 > 低权重
!important > id > class > tag
同权重：內联样式 > 嵌入样式表 > 外部样式表

7. 清除浮动说一下

背代码

 .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }
 将.clearfix加到容器上，里面的子元素的浮动就被清除了

JS

1. ES6语法知道哪些，怎么用

举例法
let const 箭头函数 Promise 展开操作符默认参数 import export，见方方整理的列表

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

Promise 的用途前端解决异步问题的方案，回调地狱

如何创建一个 new Promise:

return new Promise((resolve,reject)=>{})

如何使用 Promise.prototype.then

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!')
})
promise1.then((value) => {
  console.log(value)
})

如何使用 Promise.all

let Promise1 = new Promise(function(resolve,reject)=>{})
let Promise2 = new Promise(function(resolve,reject)=>{})
let Promise3 = new Promise(function(resolve,reject)=>{})
let p = Promise.all([Promise1,Promise2,Promise3])
p.then(function(){

},function(){

})

复制代码

如何使用 Promise.race

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one')
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two')
})
Promise.race([promise1, promise2]).then((value) => {
  console.log(value)
})

3. 手写函数防抖和函数节流


1.  背代码

    ```

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

    注意，有些地方认为节流函数不是立刻执行的，而是在冷却时间末尾执行的（相当于施法有吟唱时间），那样说也是对的。

1.  背代码

    ```
     // 防抖（一段时间会等，然后带着一起做了）
     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()
    ```

4. 手写AJAX

1.  背代码，完整版

    ```
     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();
    ```

1.  背代码，简化版

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

5. 这段代码里的 this 是什么？

背代码
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
看调用
《this 的值到底是什么？一次说清楚》

6. 闭包、立即执行函数是什么

闭包

什么是闭包：函数用到了外部的变量就是闭包，就是闭包

闭包的用途：闭包常用来间接访问一个变量，也就是说隐藏一个变量

关键点：用途，需要回答【隐藏局部变量，暴露操作函数】，用代码举例

const createAdd = ()=>{
    let n = 0
    return ()=>{
        n += 1
        console.log(n)
    }
}

const add = createAdd()
add() // 1
add() // 2

闭包的缺点：闭包在IE有bug，故而会导致内存泄露

函数用到了外部的变量就是闭包

立即执行函数

7. 什么是 JSONP，什么是 CORS，什么是跨域？

juejin.cn/post/696982…

JSONP zhuanlan.zhihu.com/p/22600501
CORS developer.mozilla.org/zh-CN/docs/…

8. async/await 怎么用，如何捕获异常？

阮一峰的书讲了
方方的视频课讲了最后一节。

9. 如何实现深拷贝

背代码，要点：

递归
判断类型
检查环（也叫循环引用）
需要忽略原型

10. 如何用正则实现trim() ？

背代码

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

11. 不用 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.prototype = Animal.prototype
     Dog.prototype = new temp()

     Dog.prototype.constuctor = Dog // 这行看不懂就算了，面试官也不问
     Dog.prototype.say = function(){ console.log('汪')}

     var dog = new Dog('黄色','阿黄')
    ```

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

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

12. 如何实现数组去重

1. 使用hash


unique = (array) => {
    const hash = []
    for(let i=0;i<array.length; i++){
        hash[array[i]] = true
    }
    const result = []
    for(let k in hash){
        result.push(k)
    }
    return result
}
缺点：只支持数字或者字符串数组，如果数组里面有对象，比如 array = [{number:1}, 2]，就会出错。

2. 使用set
[...new set(array)]


unique = (array) => {
    return [...new Set(array)] 
    // 或者 return Array.from(new Set(array))
}

缺点：API 太新，旧浏览器不支持。

3. WeakMap  支持所有类型的去重

13. 手写Promise

参考 juejin.im/post/5aafe3…

DOM

1. 事件委托

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

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

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

1.  高级版

    ```
     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

参考代码：jsbin.com/munuzureya/…

HTTP

1. HTTP 状态码知道哪些？分别什么意思？

2xx 表示成功
3xx 表示需要进一步操作
4xx 表示浏览器方面出错
5xx 表示服务器方面出错
完整参考 www.runoob.com/http/http-s…

2. HTTP 缓存有哪几种？

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

3. GET 和 POST 的区别

错解，但是能过面试
- 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中。
正解
就一个区别：语义——GET 用于获取资源，POST 用于提交资源。
想装逼请参考 zhuanlan.zhihu.com/p/22536382

4. Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session

Cookie:服务器发给浏览器一段（字符串：票），浏览器在每次访问这个服务器的时候，你就要拿着这个票（出示这个票）

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 里

5. HTTP1.1和HTTP2.0的区别

http2是默认开启https的

Vue

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

watch是监听属性，computed是计算属性

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

juejin.cn/post/700100…

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

Vue哪个生命周期进行数据请求，不考虑服务器端渲染，一般在mounted周期内请求数据

beforeCreate 是用来在创建组件之前做一些事情

created 是用来在创建组件之后做一些事情

beforeMount 是用来挂载组件之前做一些事情

Mounted 是用来挂载组件之后做一些事情

beforeUpdate 是用来更新组件之前做一些事情

Updated 是用来更新最贱之后做一些事情

beforeDestroy 是用来在组件毁灭之前做一些事情

destroyed 是用来在组件毁灭之后做一些事情

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

父子组件：使用 v-on 通过事件通信
爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
任意组件：使用 eventBus = new Vue() 来通信，eventBus. $on 和 eventBus.$ emit 是主要API
任意组件：使用 Vuex 通信

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

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

5. Vue.set 是做什么用的？

见上一题

6. Vuex 你怎么用的？

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

7. VueRouter 你怎么用的？

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

8. 路由守卫是什么？

看官方文档的例子，背里面的关键的话

React

1. 受控组件 VS 非受控组件

   <FInput value={x} onChange={fn}/> 受控组件
   <FInput defaultValue={x} ref={input}/> 非受控组件

区别受控组件的状态由开发者维护，非受控组件的状态由组件自身维护（不受开发者控制）

2. React 有哪些生命周期函数？分别有什么用？（Ajax 请求放在哪个阶段？）\

答题思路跟 Vue 的一样

钩子在文档里，蓝色框框里面的都是生命周期钩子
把名字翻译一遍就是满分
要特别说明哪个钩子里请求数据，答案是 componentDidMount

3. React 如何实现组件间通信？

父子靠 props 传函数

爷孙可以穿两次 props

任意组件用 Redux（也可以自己写一个 eventBus）

4. shouldComponentUpdate 有什么用？

要点：用于在没有必要更新 UI 的时候返回 false，以提高渲染性能

5. 虚拟 DOM 是什么？

要点：虚拟 DOM 就是用来模拟 DOM 的一个对象，这个对象拥有一些重要属性，并且更新 UI 主要就是通过对比（DIFF）旧的虚拟 DOM 树和新的虚拟 DOM 树的区别完成的。
参考：www.alloyteam.com/2015/10/rea…

6. 什么是高阶组件？

要点：文档原话——高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。
举例：React-Redux 里 connect 就是一个高阶组件，比如 connect(mapState)(MyComponent) 接受组件 MyComponent，返回一个具有状态的新 MyComponent 组件。

7. React diff 的原理是什么？

看你记忆力了：imweb.io/topic/579e3…

8. 必考 Redux 是什么？

背下文档第一句：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。重点是『状态管理』。
说出核心概念的名字和作用：Action/Reducer/Store/单向数据流
说出常用 API：store.dispatch(action)/store.getState()

9. connect 的原理是什么？

react-redux 库提供的一个 API，connect 的作用是让你把组件和store连接起来，产生一个新的组件（connect 是高阶组件）

参考：segmentfault.com/a/119000001…

题题题