1-1. 重点目录

HTML5重点:

developer.mozilla.org/zh-CN/docs/…

语义化标签类
音视频处理 (代替了Flash)
Canvas/ WebGL
History API
requestAnimationFrame (JS定时器动画卡顿不连贯，新方法赫兹和浏览器保持一致)
地理位置
Web Socket (Socket IO用于实时通讯)

CSS3重点:

常规
动画
盒子模型
响应式布局

JavaScript重点：

ES 3/5/6/7/8/9
DOM
BOM
设计模式
底层原理（栈堆内存，闭包作用域，面向对象，THIS，EventLoop，浏览器渲染原理，回流重绘）

网络通信层重点：

AJAX/Fetch/axios
HTTP 1.0/2.0
TCP
跨域处理方案
性能优化

Hybird或者APP再或者小程序：

Hybrid
uni-aqq
RN
Flutter
小程序 MPVUE
Weex
PWA

工程化方面重点：

Webpack
Git
Linux/nginx

全栈方面重点：

node
express
koa2
mongodb
nuxt.js/ next.js

框架方面

** Vue: **
基础知识
核心原理
vue-router
vue-cli
vuex
element ui
vant
cube
SSR
优化
** React: **
基础知识
核心原理
react-router-dom
redux
dva
umi
mobix
antd
antd pro
SSR
优化

1-2. 常见的CSS面试题和回答技巧

问题1: 掌握盒子水平垂直居中的五大方案

定位：（三种）

知道具体宽高
有宽高，但是不需要知道具体的
CSS3的translate，不需要具体宽高，兼容性不好 display：flex 弹性伸缩盒模型 Javascript获取元素进行计算

display：table-cell 有趣，本来适用于控制文本，需要改成inline-block再处理，要求父级有固定宽高

回答技巧：先回答在之前的项目中非常常见，随着某一个技术语言的兴起发现某个技术更好，在掘金上又看到有哪个方案。

问题2：关于CSS中盒模型的几道面试题

标准盒模型，怪异(IE)盒模型，flex弹性盒模型 回答技巧：先回答一下盒模型分类，然后点出标准盒模型修改content会使整个容器尺寸变大的问题。然后提到平时项目用box-sizing：border-box比较多，后来用Element-UI看到有一些源码里也是直接用IE盒模型来避免问题。

弹性盒模型+多列布局教程

问题3:几大经典布局方案

圣杯 (中间和两边在一个容器里)
双飞翼 (中间和两边在不同的容器) 总结：左右固定，中间自适应

假设左右两边是200px，父容器左右两边各留出200px padding。左边margin-left:100%,右边margin-left:-200.

使用CALC (CSS3属性，不建议，CSS3表达式计算起来比较慢)
Flex布局 flex:1相当于自动填满剩余的空间
定位方式：中间设为margin：0 200px，两边aboslute定位

问题4:响应式布局三大方案

media媒体查询写不同样式，用于PC端和手机端同项目，比如PC三列，手机1列（主流）
rem:等比缩放 (主流)
flex可以实现一些具体功能
vh/vw：按照窗口高度/宽度百分比布局

课后作业

使用css，让div消失在视野中，发挥想象力
说明z-index的工作原理，适用范围？(文档流，定位)
谈谈对HTML5的理解？
如何是一个div里面的文字垂直居中，且该文字的大小自适应
不考虑其他因素，下面哪种的渲染性能比较高？
css引入文件放在哪下面的渲染效率高，因为要先筛选出所有a标签再去筛选.box

2-1 闭包，堆栈，深浅克隆

1.对象(数组)的深克隆和浅克隆(头条)

一层浅克隆

let obj2 = {};
for (let key in  obj) {
	if (!obj.hasOwnProperty(key)) continue;
    obj2[key] = obj[key];
}
或者
let obj2 = {
	...obj
}

深克隆

obj2 = JSON.parse(JSON.stringify(obj));
弊端：如果遇到日期，正则，function会报错
function deepClone(obj) {
	if (obj == null || typeof obj !== "object") return obj;
    if (obj instanceof RegExp) {
    	return new RegExp(obj);
    }
    if (obj instanceof Date) {
    	return new Date(obj);
    }
	let newObj = new obj.constructor;
    for (let key in obj) {
    	if (obj.hasOwnProperty(key)) {
        	newObj[key] = deepClone(obj[key]);
        }
    }
    return newObj; 
}
let obj2 = obj

2.BAT笔试中关于闭包和原型链的问题

ex1: 答案培训，属性名不能重复,大部分属性名会转化为字符串储存

堆：存储引用类型值的空间
栈：存储基本类型值和制定代码的环境 => Follow up：数组和Object区别

ex2: 答案珠峰，因为Symbol会创建一个唯一的object，Symbol('1') != Symbol('1')

=> Follow up：自己实现symbol

ex3:答案是培训，任何object.toString都会变成[Object Object]，这样会a[c]把a[b]覆盖掉 => Follow up：Object.prototype.toString/ valueOf.toString

ex4：字符串4，因为alert弹出来的结果都是toString(字符串)

闭包：内存不销毁

ex5: 答案'1' '4',闭包的功能：私有化变量，保护全局变量，保留上级作用域你

3.一道关于面向对象面试题所引发的血案(阿里)

function Foo() {
	getName = function() {
    	console.log(1);
    }
    return this;
}
Foo.getName = function() {
	console.log(2);
}
Foo.property.gatName = function() {
	console.log(3);
}
var getName = function() {
	console.log(4);
}
function getName() {
	console.log(5);
}
Foo.getName(); 2 
getName(); 4
Foo().getName(); 1 
getName();  1
new Foo.getName(); 2 
new Foo().getName(); 3 
new new Foo().getName(); 3

变量提升：js代码在当前作用域下代码执行之前，把所有var提前声明和function提前声明和赋值

MDN运算符优先级一览表

4.一道题让你彻底掌握JS中的EventLoop (同步/异步)

浏览器是多线程的
JS是单线程的 -> 浏览器只给了JS一个线程来渲染
Promise, SetTimeOut, async/await 会把事件加入EventLoop,(SetTimeOut，事件绑定，Ajax会加入宏任务， promise/async/await是微任务）
执行顺序：主栈任务 -> 微任务 -> 宏任务
微任务有些处理会按顺序，有些会先执行then

5.课后作业：

第一题

箭头函数不能new，箭头函数没有圆形链，没有constructor,没有自己的执行主体，this继承执行上下文this

第二题 var x = 2;
第三题

对象==字符串对象.toString()变为字符串

null == undefined 相等，但是和其他值比较就不相等

NaN == NaN不相等

剩下的都转化为数字

第一种：隐式类型转化toString()属性 
var a = {
	i : 0,
    toString() {
    	return ++this.i;
    }
}
第二种：数据劫持
var i = 0;
Object.defineProperty(window, 'a', {
	get() {
    // defineProperty Getter拦截其中不能再次获取当前属性，比如a++， 会无限循环
    	return ++i;
    }
});
不能

第四题
第五题

3-2 各大框架里面的核心内容

1. Vue 2.0/3.0 双向数据绑定原理

Vue 2.0 Object.defineProperty

姓名: <span id = "spanName"></span>
<input type = "text" id = "inpName">
<script>
let obj = {
    name: ''
};
let newObj = JSON.parse(JSON.stringify(obj));
Object.defineProperty(obj, 'name', {
  get() {
      return newObj.name;
  },
  set(val) {
      if (val === newObj.name) return;
      newObj.name = val;
      observer();
  }
})
function observer() {
    spanName.innerHTML = obj.name;
    inpName.value = obj.value;
}
//相当于v-model
inpName.oninput = function () {
	obj.name = this.value;
}
/*存在问题
1.对原始数据克隆
2.需要分别给对象中每一个属性设置监听,初始化没有的属性可能监听不到
*/

Vue 3.0 用ES6新属性Proxy

//可以对Object进行整体的数据劫持
let obj = {};
obj = new Proxy(obj, {
    get(target, prop) {
        console.log('A');
        return target[prop];
    },
    set(target, prop, value) {
        console.log('B');
        target[prop] = value;
        observer();
    }
});

2. React的MVC原理

其实MVC和MVVM原理几乎相同，只不过React中的事件监听我们需要自己来写，Vue中已经帮我们做好了事件监听 (v-model) MVC:单向数据绑定，默认实现了数据的更改更新视图 MVVM：双向数据绑定，用onchange/oninput来实现了视图层的更改更新数据

3.跨域问题的解决方案和实现原理

前后端分离以后不再配置在同一台服务器，协议域名端口号有一个不同就算跨域。前端为了高效会在全国各地设置CDN服务器，也会为了效率单独设置图片服务器，音视频服务器。

第一阶段：Jsonp,只能用于get请求(利用scirpt，link，img等标签请求忽略跨域) 发送请求时动态创建一个script标签，在src的连接中加入请求的function。服务器在返回的时候也把结果拼成func({...}) 缺点：不安全，有缓存，大小限制，需要服务器单独配置
第二阶段：基于iframe的跨域解决方案 window.name/ document.domain/ location.hash/ post message
第三阶段：CORS跨域资源共享服务器端可以通过Access-Control-Allow来允许跨域登陆，然后用token(第一次登录以后服务器返回token，之后在请求的时候带上token来确认身份)来确保安全
OPTIONS试探性请求，看服务器端是否响应再发送post请求
限制：允许访问的源有数量限制
开发：在package.json里用proxy来代理把所有向自己源地址发起的请求都转发到目标地址(devServer和webpack帮助我们跨域)
产品：由后段进行nginx反向代理

4.Vue/React框架中关于组建信息通信引发的面试题

Vue 属性传递，发布订阅(EventBus), Provide/inject, slot, $parent/$ children, vuex
react 属性，发布订阅， React.Context, redux/react-redux/ mobix/ dva

TikTok 前端相关准备