前端相关

JavaScript

基础知识点：

一、ES6

1. let 变量只在块级作用域{}中有效;
2. for循环有一个特别之处，就是设置循环那部分是一个父作用域，而循环内部是一个单独的子作用域，而且每次循环都有单独的作用域；
3. let与var区别： 块级作用域、不存在变量提升、不允许重复声明、暂时性死区；
4. 暂时性死区：只要一进入当前作用域，所要使用的变量就已经存在，只是不能获取，只有到了声明变量那一行，才能获取和使用该变量；
5. ES5只有全局作用域和函数作用域，没有块级作用域；这使得立即执行函数表达式不必需要了；
6. const保证并不是变量值不得改动，而是指向的内存地址不得改动

二、执行上下文(执行环境)及作用域

1. 执行上下文(execution context)定义变量或函数有权访问的其他数据；三属性：this指针、变量对象、作用域链；
2. 当执行流进入一个函数时，函数的上下文会被推入一个上下文栈中，执行完毕之后，再将其弹出；最外层的上下文就是全局上下文，在浏览器中就是window对象；
3. 代码在上下文中执行的时候，会创建作用域链（scope chain),保证对执行上下文所有变量和函数的有序访问;作用域链实际上是指向变量对象的指针列表；
4. 函数创建时，会创建一个预先包含全局变量对象的作用域链，这个作用域链保存在[[Scope]]私有属性，函数结束的时候销毁；
5. 闭包：有权访问另外一个函数内部变量的函数，它是将函数内部和外部连接起来的一座桥梁。
6. 那道经典的闭包题更多的考察的是一个执行上下文和作用域链的知识点：首先，ES5中并没有块级作用域的概念，var声明的i变量是全局作用域下的变量；其次，这个函数在执行过程中，它作用域链里面的i只有一个，也就是说它只能找到全局变量i；而这个i是一直变化的，所以最终会输出相等的数字。
7. 解决这个问题，两种办法：a) 用一个闭包封装一个函数作用域，作用域里面同样定义一个i，来拷贝每次for循环中的i，函数在执行时候，它的作用域链里面就会多一个闭包的执行上下文，它就会先去找这个闭包的i，而不是全局变量下面的i；b) 第二种方法就是，使用ES6的块级作用域，for循环每次都会生成独一无二的块级作用域，这个时候没有全局上下文中i。
8. a) this指向函数调用者，不存在任何变量时，this就指向window;
   b) apply和call第一个入参就是this对象，并且立即执行，bind就是绑定this对象，但不会立即执行；c) 函数作为构造函数调用时，this指向即将创建的新对象；

三、面向对象

1. 对象：无序属性的集合；属性：数据属性和访问其属性；
2. 创建对象：a) 原始模式(工厂模式)，new Object(); b）构造函数模式；c) 原型模式；d) 组合面试；
3. new 关键字是一个语法糖，做的事情：a) 创建新对象；b) 将this指向该对象; c）为这个对象添加新的属性；d)返回这个对象；
4. 每个新函数都有一个prototype属性，它可以让所有对象实例共享它包含的属性和方法；基本上每个对象都有 __proto__属性(除了null)，指向对象构造函数的原型对象；
5. 关于原型的方法：a）xxx.prototype.isPrototypeOf判断原型和实例的关系；b) hasOwnProperty判断是本地属性还是原型属性；c） in枚举或判断对象的属性(本地和原型的属性)，这些属性必须是可枚举的；
6. 继承：a) 构造函数绑定，通过apply关键字；b) 通过原型继承，构造原型链；c) 原型式继承：通过Object.create方法，通过空对象拷贝父对象的原型，d) 拷贝继承:浅拷贝和深拷贝；
7. Object.create：创建一个新的对象，并且把入参作为新对象的__proto__属性；new：创建一个新的对象，并且把构造函数的prototype属性指向__proto__属性；

四、事件循环(event loop） && 任务队列

1. JS任务分为同步任务和异步任务；同步任务是指在主线程上按顺序执行的任务；异步任务指不进入主线程，而进入任务队列的任务，只有主线程任务执行完毕之后，任务队列中任务才能进入主线程中执行；
2. 主线程从任务队列中读取任务是循环不断的，所以这种运行机制又被称为事件循环；
3. 同步任务总在异步任务之前执行；

语法

一、HTML5

1. meta viewport 原理：viewport决定了网页多少像素刚好能占满屏幕，移动端1px并不等于1物理像素；一般设置width=device-width；
2. H5拖拽：
   a) 设置draggable="true";
   b) （非必须）设置容器元素的ondragstart;
   c) 设置被拖放元素的ondragover事件；
   d) 设置容器元素的放置事件ondrop，添加方法：event.preventDefault();event.target.appendChild(document.getElementById('drag'));;
3. xxx

二、CSS

1. 行内元素和块状元素；
2. float；
3. position:

三、JS

1. JavaScript事件模型：事件捕获和事件冒泡；阻止冒泡：event.stopPropagation();
2. JS的回收机制：

网络相关

一、性能优化

1. 域名发散：PC端为了突破浏览器域名并发限制，比如网络地图；域名收敛：将静态资源放在一个域名下，减少DNS解析带来的开销；
2. 首屏和白屏：白屏时间可以用Html响应时间减去页面导航开始时间；首屏时间计算比较复杂，计算页面可视区域内最后一个图片加载完毕的时间；
3. 浏览器缓存：强缓存和协商缓存（304）；

二、Ajax

1. 实现Ajax方法(参考zepto代码): a) 创建XMLHttpRequest对象；b) xhr.open('GET', url); c) xhr.onreadystatechange; d) xhr.send();
2. Ajax 方法实现超时：设置setTimeout函数；当正常返回，就取消这个超时；当超时就执行xhr.abort();
3. readyState: 0~4，0：请求未初始化；1：请求连接已建立；2：请求已接受；3：请求处理中；4：请求已完成；
4. GET和POST区别：底层都是TCP/IP协议，一般规范上来说：a) get有长度限制；b) get数据在头部，而post在正文；c）get产生一个tcp数据包，而post产生两个；d) get无副作用，幂等，post有副作用，不幂等。
5. 如何解决跨域问题：a) JSONP；b) 响应头添加cors跨域头；c) 后端代理；
6. JSONP原理：script标签不受跨域的影响；所以，可以将请求包装成script标签，带上callbackId，前端再监听script脚本的load和error事件；后端返回时，将数据包装在callbackId的函数中，从而实现了跨域。
7. HTTP常见的状态码：1xx：信息正在处理；2xx：信息正确处理完毕；3xx：重定向；4xx：客户端错误；5xx服务端错误。
8. 重定向：301：永久重定向，SEO常用；302：临时重定向，未登录重定向；303 表示请求的资源路径发生改变，使用GET方法请求新url；304：请求资源没有改变，继续使用缓存。

三、RESTful

1. Representational State Transfer：表现层状态转化。
2. 我们把"资源"具体呈现出来的形式，叫做它的"表现层"（Representation）；文本可以用txt格式表现，也可以用HTML格式、XML格式、JSON格式表现，甚至可以采用二进制格式；图片可以用JPG格式表现，也可以用PNG格式表现
3. 状态转化： 如果客户端想要操作服务器，必须通过某种手段，让服务器端发生"状态转化"（State Transfer）。而这种转化是建立在表现层之上的，所以就是"表现层状态转化"。
4. 动词(method)： GET、POST、PUT、PATCH、DELETE、HEAD、OPTIONS

四、网络协议

1. websocket原理：

框架

一、打包工具

1. webpack原理：

二、Vue

三、React

四、小程序