整理了近期阿里携程的面试题，分享给大家（后期会慢慢完善）

理解事件原理

事件捕获/冒泡
DOM事件流
DOM2级事件规定事件包括三个阶段：
① 事件捕获阶段
② 处于目标阶段
③ 事件冒泡阶段
stopPropagation

ES6

let const ()=> 模板字符串 解析结构 函数默认参数 展开运算符 对象字面量 与 class、 Promise

Redux

state ， action，reducer
state的改变只能通过触发特定的action完成（action 是一个用于描述已发生事件的普通对象）Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。

Virtual DOM

https://www.cnblogs.com/wubaiqing/p/6726429.html
DOM 很慢，为啥说它慢，先看一下 Webkit 引擎，所有浏览器都遵循类似的工作流，只
是在细节处理有些不同。一旦浏览器接收到一个 HTML 文件，渲染引擎 Render Engine
就开始解析它，根据 HTML 元素 Elements 对应地生成 DOM 节点 Nodes，最终组成一
棵 DOM 树。
构造了渲染树以后，浏览器引擎开始着手布局 Layout。布局时，渲染树上的每个节点根据
其在屏幕上应该出现的精确位置，分配一组屏幕坐标值。接着，浏览器将会通过遍历渲染树，
调用每个节点的 Paint 方法来绘制这些 Render 对象。Paint 方法根据浏览器平台，使用不
同的 UI后端 API（Agnostic UI Backend API）通过绘制，最终将在屏幕上展示内容。只要
在这过程中进行一次 DOM 更新，整个渲染流程都会重做一遍。
DOM 树上的结构、属性信息我们都可以很容易地用 javascript 对象表示出来。

var olE = {
  tagName: 'ol', // 标签名
  props: { // 属性用对象存储键值对
    id: 'ol-list'
  },
  children: [ // 子节点
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

这就是所谓的 Virtual DOM 算法：

用 javascript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文
档当中当状态变更时，重新构造一棵新的对象树。然后用新的树和旧的树进行比较两个数的差异。
然后把差异更新到久的树上，整个视图就更新了。Virtual DOM 本质就是在 JS 和 DOM 之间做
了一个缓存。既然已经知道 DOM 慢，就在 JS 和 DOM 之间加个缓存。JS 先操作 Virtual DOM
对比排序/变更，最后再把整个变更写入真实 DOM。

浏览器渲染原理

流程：
　解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
概念：
DOM Tree：浏览器将HTML解析成树形的数据结构。

CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSSOM合并后生成Render Tree。

layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
注意：(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。

　　 (2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

　　　(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
过程：

1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2. 将CSS解析成 CSS Rule Tree 。

3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。

5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

    

   广告

   前端程序员面试笔试宝典

   作者：平文

   京东

JS中EventLoop事件循环机制

什么是单线程

主程序只有一个线程，即同一时间片断内其只能执行单个任务。

为什么选择单线程？

javascript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

单线程意味着什么？

单线程就意味着，所有任务都需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就需要一直等着。这就会导致IO操作（耗时但cpu闲置）时造成性能浪费的问题。

如何解决单线程带来的性能问题？

答案是异步！主线程完全可以不管IO操作，暂时挂起处于等待中的任务，先运行排在后面的任务。等到IO操作返回了结果，再回过头，把挂起的任务继续执行下去。于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）

注： 当主线程阻塞时，任务队列仍然是能够被推入任务的
Event Loop 是什么：
javascript的事件分两种，宏任务(macro-task)和微任务(micro-task)
宏任务：包括整体代码script，setTimeout，setInterval
微任务：Promise.then(非new Promise)，process.nextTick(node中)
https://segmentfault.com/a/1190000012806637?utm_source=tag-newest

箭头函数和普通函数有什么区别

1.普通function的声明在变量提升中是最高的，箭头函数没有函数提升
2.箭头函数没有this，它会捕获其所在上下文的 this 值，作为自己的 this 值
3.箭头函数不绑定arguments,取而代之用rest参数…解决
4.箭头函数不能作为构造函数，不能被new，没有property,
5.call和apply方法只有参数，没有作用域

vue和react的比较，不同点

Vue提供了更多的语法糖来让开发更便利，比如props的动态实时更新、双向的数据绑定、指令系统，实例的事件接口等。而React的中心思想即状态驱动视图的更改，所有UI层的变更都尽量通过setState来触发， 通信方式通过UIAction的行为来实现清晰的单向数据流。
吧啦吧啦网上一堆资料，就不详细展开了

js处理异步的几种方式

javascript语言的执行环境是"单线程"（single thread，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推）。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式" 就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式" 非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

Cookie、session和localStorage的区别

共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

如何获悉一个对象的具体类型

javascript中检测对象的类型的运算符有：typeof、constructor、instanceof。
https://www.cnblogs.com/ww-ervin-72/p/5103540.html

prototype

prototype 属性使您有能力向对象添加属性和方法。

问call和apply的作用是什么？区别是什么？

每个函数都包含两个非继承而来的方法：apply()和call()。
call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性；
作用：call（）方法和apply（）方法的作用相同：改变this指向。
区别：他们的区别在于接收参数的方式不同：
call（）：第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。在使用call（）方法时，传递给函数的参数必须逐个列举出来。

apply（）：传递给函数的是参数数组
javascript 有几种类型的值？能否画一下它们的内存图？
如下代码做出解释：

 function add(c, d){ 
    return this.a + this.b + c + d; 
} 
var o = {a:1, b:3}; 
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 

js的事件流

一、事件流
事件冒泡
事件捕获
DOM事件流

一面电话直接问了很多比较基础的问题，比如区分行内元素与块级元素，还有查看，比如他给出一个例子，让你写出捕获，冒泡各几次等。。。。对于初学者的确平时没有太注意相关问题。

谈谈http协议

HTTP（HyperText TransportProtocol）是超文本传输协议的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。

通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行，一个或者多个头域，一个指示头域结束的空行和可选的消息体组成。HTTP的头域包括通用头，请求头，响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域值三部分组成。域名是大小写无关的，域值前可以添加任何数量的空格符，头域可以被扩展为多行，在每行开始处，使用至少一个空格或制表符。

主要还得记得http中Status-Code的第一个数字定义响应的类别，后两个数字没有分类的作用。第一个数字可能取5个不同的值：

1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

1. 看项目中使用了dva，为什么要用dva？直接用saga也能达到同样的效果，dva相比好在哪里？

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。( Inspired by elm and choo. )
dva 是 framework，不是 library，类似 emberjs，会很明确地告诉你每个部件应该怎么写，这对于团队而言，会更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封装了所有其他依赖。
dva 实现上尽量不创建新语法，而是用依赖库本身的语法，比如 router 的定义还是用 react-router 的 JSX 语法的方式(dynamic config 是性能的考虑层面，之后会支持)。
他最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起

2. 说说react的单向数据流。

React是单向数据流，数据主要从父节点传递到子节点（通过props）。
http://www.cnblogs.com/hanguidong/p/9514078.html
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。

1. react中state与界面通信的函数（connect）。

2. react的性能，如果只更新最底层的数据，怎么重新渲染界面？

3. 如果有一个比较复杂的逻辑 需要更改state 应该放在reducer中还是effect中？

4. 在哪里调用ajax，同步异步的区别 ajax是否有副作用？

5. vue和react相比优点和缺点。

6. vue中与reducer effect相对应的部分是什么？

7. vue的计算属性 watch react中有相对应的部分吗？如果要添加 应该加在哪个回调函数里？

http和https的区别，算法加密，前端网络安全问题，手撕代码：字符串中的数字替换成特殊字符，将数字分为千分位的形式。正则表达式，闭包。
纯函数是啥？

(一)问题：
1.基础问题：
说说js的继承实现
js的闭包
2.项目问题：
在项目中遇到的问题
假如让你重新做这个项目，你会怎么做？

二.第二次电面
(一)问题：
1.基础知识：
性能：页面加载过程
怎么理解模块化
commentJs
jq的ajax使用
正则表达式的使用
2.项目问题：
数据如何传输处理的？
url请求的过程

三.第三次电面
(一)问题：
5.说说浏览器兼容和性能优化
6.浏览器的缓存机制

7.http请求的状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

前端开发人员必须要知道的一类安全知识。

7：介绍下浏览器缓存

刚好和状态码 304 结合起来。

8：介绍 js 中事件 （冒泡 委托）

事件冒泡和事件捕获，执行的先后顺序，还可以说一说关于事件委托。

请解释事件委托（event delegation）。
事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置事件监听器。当触发子元素时，事件会冒泡到父元素，监听器就会触发。这种技术的好处是：

内存占用减少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。
无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。

哪些流行的前端技术，对前端的前景和职责

移动端会越来越重要
比较火的有 MVVM 框架 react、vue，ES6 肯定会在近几年统治前端，Nodejs 也是前端必备技能。关于前端的前景，我觉得 H5 配合 react、vue 是热门，前端可视化（ant-design），webVR 可能会在未来的几年大火一次。职责还是负责与用户的交互，考虑性能、资源方面的优化，全栈是每个前端程序员的梦想。

14：js 基本数据类型

光知道基本数据，如果能扩展，就更好了，比如引用数据类型和非引用数据类型，就是常说的堆和栈。

16：call apaly 区别

可以定义上下文，参数不一样，apply 的参数是数组，如果能和 bind 扩展就更好了。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

javascript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，
如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.proto

特点：
javascript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

当我们需要一个属性的时，javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，
就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
    return this.name;
}
var person = new Func();//现在可以参考var person = Object.create(oldObject);
console.log(person.getInfo());//它拥有了Func的属性和方法
//"Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}

javascript有几种类型的值？，你能画一下他们的内存图吗？

栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
https://camo.githubusercontent.com/d1947e624a0444d1032a85800013df487adc5550/687474703a2f2f7777772e77337363686f6f6c2e636f6d2e636e2f692f63745f6a735f76616c75652e676966

1、构造继承
2、原型继承
3、实例继承
4、拷贝继承

原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

     function Parent(){
         this.name = 'wang';
     }

     function Child(){
         this.age = 28;
     }
     Child.prototype = new Parent();//继承了Parent，通过原型

     var demo = new Child();
     alert(demo.age);
     alert(demo.name);//得到被继承的属性

javascript作用链域?

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，
直至全局函数，这种组织形式就是作用域链。

用原生javascript的实现过什么功能吗？

Ajax 是什么? 如何创建一个Ajax？

ajax的全称：Asynchronous javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用javascript和DOM实现局部刷新

DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

.call() 和 .apply() 的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

 function add(a,b)
 {
     alert(a+b);
 }

 function sub(a,b)
 {
     alert(a-b);
 }

 add.call(sub,3,1);

JS 怎么实现一个类。怎么实例化这个类

function Person(name,age){
    this.name=name;
    this.age=age;
    this.study=function(){
        alert('我会学习');
    }
    this.eat=function(){
        alert('我会吃饭');
    }
}

javascript中的作用域与变量声明提升？

如何编写高性能的javascript？
那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
angular vue react的优缺点

我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

请介绍一下JS之事件节流？

什么是JS的函数防抖？

函数防抖(debounce)

概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

生活中的实例： 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

函数节流(throttle)

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

生活中的实例： 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。

应用场景

对于函数防抖，有以下几种应用场景：

给按钮加函数防抖防止表单多次提交。
对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
判断 scroll 是否滑到底部， 滚动事件 + 函数防抖
总的来说，适合多次事件 一次响应 的情况

对于函数节流，有如下几个场景：

游戏中的刷新率
DOM元素拖拽
Canvas画笔功能

描述一下React 生命周期

初始化

• constructor

• getInitialState

• getDefaultProps

• componentWillMount

• render

• componentDidMount
  更新过程

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

  卸载过程

• componentWillUnmount

React-router 路由的实现原理？

说说React Native,Weex框架的实现原理？

React为什么自己定义一套事件体系呢，与浏览器原生事件体系有什么关系？
用过 React 技术栈中哪些数据流管理库？
Redux\Dva

Redux是如何做到可预测呢？

Redux将React组件划分为哪两种？

Redux是如何将state注入到React组件上的？

请描述一次完整的 Redux 数据流

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，
而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、
到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用，如 PHP、Java、javascript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

快速排序

1. JS基本的数据类型和引用类型

基本数据类型：number、string、null、undefined、boolean、symbol -- 栈
引用数据类型：object、array、function -- 堆
两种数据类型存储位置不同
原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；
引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中，将会影响程序运行的性能；
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。
当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

2.介绍JS的内置对象

数据封装类对象：Object、String、Number、Boolean、Array
其他对象：Function、Data、Math、Arguments、RegExp、Error
ES6新增对象：Promise、Proxy、Map、Set、Symbol、Reflect

4.eval是做什么的

他的功能是把对应的字符串解析成JS代码并运行；
他不安全，而且非常耗能（执行两次，一次解析成JS代码，一次执行）

5.对闭包的理解

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数里创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部

闭包的特性：函数内嵌套函数；内部函数可以引用外部的参数和变量；参数和变量不会被垃圾回收机制回收

6.http状态码有哪些

简单版

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
完整版

1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

3**(重定向类)：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

5**(服务端错误类)：服务器不能正确执行一个正确的请求
500 - 服务器遇到错误，无法完成请求
502 - 网关错误
503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

7.描述浏览器渲染的过程，DOM书和渲染树的区别

浏览器渲染过程：

解析HTML构建DOM，并行请求css、image、js
css文件下载完成，开始构建CSSOM（CSS树）
CSSOM构建结束后，和DOM一起生成Render Tree（渲染树）
布局（layout）：计算出每个节点在屏幕中的位置
显示：通过显卡把页面画到屏幕上
DOM树和渲染树的区别

DOM树与HTML标签一一对应，包括head和隐藏元素
渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个独立节点都有对应的css属性

8.如何最小化重绘（repaint）和回流（reflow）

需要创建多个DOM节点时，使用DocumentFragment创建完成后一次性的加入document
缓存layout属性值，减少回流次数，如const offsetLeft=element.offsetLeft
尽量避免使用table布局（table元素一旦触发回流就会导致table里所有的其他元素回流）
避免使用css表达式，因为每次调用都会重新计算值（也会重新加载页面）
尽量使用css属性简写
将多次修改元素样式合并成一次操作

9.介绍javascript的原型、原型链？有啥特点

原型：

javascript的所有对象中都包含了一个 (proto__ ) 内部属性，这个属性所对应的就是该对象的原型 javascript的函数对象，除了原型 (_proto_) 之外，还预置了 prototype 属性 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型( __proto)。
原型链：

当一个对象调用的属性/方法自身不存在时，就会去自己(proto__ )关联的前辈 prototype 对象上去找 如果没找到，就会去该 prototype 原型 ( __proto) 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
原型特点：

javascript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

10.javascript如何实现继承

构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

function Apple(size, num) {
    Fruit.apply(this, arguments);
    this.size = size;
    this.num = num;
}

ES6使用extends继承

class Apple extends Fruit{
    constructor() {
        super()
    }
}

实例继承：将子对象的prototype指向父对象的一个实例

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

原型继承

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象

function extend(Child, Parent) {
  　　var p = Parent.prototype;
  　　var c = Child.prototype;
  　　for (var i in p) {
  　　　   c[i] = p[i];
  　　}
}

11.什么是window对象，什么是Document对象

Window 对象表示当前浏览器的窗口，是javascript的顶级对象。
我们创建的所有对象、函数、变量都是 Window 对象的成员。
Window 对象的方法和属性是在全局范围内有效的。
Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

12. 在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

13. 事件的代理/委托

事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件
优点：

可以减少事件注册，节省大量内存占用
可以将事件应用于动态添加的子元素上
缺点：

使用不当会造成事件在不应该触发时触发

14. 编写一个方法 求一个字符串的字节长度

function GetBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i=0; i 255) bytes++;
    }
    return bytes;
}
alert(GetBytes("你好,as"));

15. 列举一下javascript数组和对象有哪些原生方法？

数组：

arr.concat(arr1, arr2, arrn);
arr.join(",");
arr.sort(func);
arr.pop();
arr.push(e1, e2, en);
arr.shift();
arr.unshift(e1, e2, en);
arr.reverse();
arr.slice(start, end);
arr.splice(index, count, e1, e2, en);
arr.indexOf(el);
arr.includes(el); // ES6

对象：

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
object.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);

栈内存、堆内存和预处理

闭包，prototype链，内存分配的概念和应用

https://juejin.im/post/5bb470295188255c5e66f88f?utm_source=gold_browser_extension#heading-7

实现双向绑定的哪几种手法(观察者、渲染劫持、脏检测)

 

原文https://mp.weixin.qq.com/s/7ZahpAT95MnWw-BC0FHyAQ