前端开发技术点笔记

html相关

css相关

javascript相关

html相关

对canvas的理解？

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。
Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas可以完成动画、游戏、图标
图像处理等原来需要Flash完成的一些功能。

什么是web worker和websocket

web worker:是html5的一个新特性，让web应用程序可以具备多线程的处理能力，可以运行在后台的javascript，而不会影响页面其他正常处理和显示，可以将复杂需要时间的处理用web worker来处理。web work中不能操作dom元素。它的应用场景是，可以把一些阻塞页面渲染的一些js计算放到web worker中去做。

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。 
4.可以使用 worker.terminate() 来终止一个worker的执行。

web worker能做：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

缺点：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

websocket：websoket是html5的一种新的网络协议，也是基于tcp的协议，它是持久的，可以持续在客户端和服务器端保持双工链接，服务器的更新可以被及时推送给客户端，不需要客户端再设置定时查询。

css相关

什么是css盒子模型？

在网页中，一个元素的空间构成主要包括内容（content），内边距（padding），边框（border），外边距（margin）这些构成，这些就像实际中的盒子一样，所以叫做css的盒子模型。

bfc是什么？

块格式化上下文（Block Formatting Context，BFC），简单来说就是一个独立的渲染区域，在bfc内部的元素不会影响到外面的元素，因为他们隔离互不影响的。

触发条件：

根元素 float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

与普通文档流的区别：

①bfc布局的浮动元素会被父级计算高度，而普通文档流布局的不会。②bfc布局的margin不会传递给父级，普通文档流会

css的选择器有哪些呢？

有id，class，标签选择去，伪类选择器等等，具体参考： https://www.cnblogs.com/AllenChou/p/4684753.html

css的优先级？
!import > 内联样式 > ID选择器 > 伪类选择器 > 属性选择器 > 类选择器 > 元素(类型)选择 > 通用选择器(*)
什么叫优雅降级和渐进增强？

其实就是向上兼容和向下兼容浏览器，优雅降级就是向下兼容，渐进增强就是向上兼容

sass和less的区别？

1.定义变量的符号不同，less是用@，sass使用$
2.变量的作用域不同，less在全局定义，就作用在全局，在代码块中定义，就作用于整个代码块。而sass只作用域全局。
3.编译环境不同，less是基于javascript，在客户端环境处理，sass是基于ruby的，在服务器环境端处理。

px，em，rem的区别？

px：实际就是像素，px是是相对于显示器分辨率的

em：是相对父元素计算字体大小，如果父元素没有设置大小，会以body的字体大小或者浏览器默认大小来计算。

rem：称为root em，也就是说是以根节点来计算，它是以<html>根的字体大小来计算，不会依赖父元素，整个页面的字体大小设置好后都不会乱了。想多个端兼容，最好是使用rem。

link和@import的区别

两者都是外部引用css样式的方式。

1.link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等；@import是CSS提供的语法规则，只有导入样式表的作用；
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

javascript相关

js数据类型都有哪些？

基本数据类型：Number,String,Boolean,Undefined,Null，Symbol

引用数据类型：Object，Array，Function，RegExp

typeof的返回值都有哪些呢？

有：undefined，object，boolen，string，number，function，ES6新增了symbol

typeof和instanceof的区别？

typeof可以判断一个变量是否为空，可以判断变量是属于哪个数据类型，比如返回undefined，string这些。对于 Array,Null 等特殊对象使用 typeof 一律返回 object。

instanceof是判断一个变量是否属于某个对象的实例

什么是闭包？

闭包是一个能够读取其他函数内部变量的函数。

优点：1.变量在内存中，可以提高性能。2.避免全局变量的污染。3.可以保护私有成员变量。

缺点：1.因为变量可以一直在内存中，所以内存消耗大。2.可能会导致不会被垃圾回收。

js中作用域有哪些？

1.全局作用域：声明在函数外部的变量，在代码中任何地方都能访问到的对象拥有全局作用域（所有没有var直接赋值的变量都属于全局变量）

2.函数作用域：函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用

3.块级作用域：是es6有的一个概念，通过一对{}花括号定义的代码块，在这里定义的所有变量在代码块外面都是不可见的，这个就叫块级作用域。使用let和const定义的变量，只会在这一范围内起作用，也不会存在变量提升。

什么是暂时性死区？

let和const是块级作用域，声明的变量不会存在变量提升，在未声明之前就使用变量就会报错，所以在代码块内，使用let和const声明变量，先使用后使用是不行的，这在语法上称为‘暂时性死区‘，简称TDZ

Array对象的属性有哪些？

constructor 返回对创建此对象的数组函数的引用。

length 设置或返回数组中元素的数目。

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

Array对象方法有哪些？

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素。

shift() 删除并返回数组的第一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

slice() 从某个已有的数组返回选定的元素

sort() 对数组的元素进行排序

splice() 删除元素，并向数组添加新元素。

from()将一个类似数组或可迭代对象转换成一个数组

some()遍历时候，只要有一项满足，就返回true

every()遍历时候，全部都满足，才返回true

forEach()遍历数组

filter()返回满足条件的数组元素

includes()判断数组中是否包含某一个值，会返回true和false

indexOf()判断数组中包含某一个值，存在则返回下标，不存在就返回-1

join()将数组中内容按照某个字符串分割，并返回分割后的字符串。

isArray()判断传递的对象是否是一个数组类型

对象和类的区别？对象是实际存在的，有对应的行为和属性，类是对象抽象出来的，对象是类的实例
es6中set和map区别？set是没有元素可以重复的，map是键值对可以允许重复
js中的every()和some()区别？every是所有项都满足条件了才会返回true，some是只要有一个项满足了，就返回true
js中事件模型？javascript中有两种事件模型：DOM0，DOM2。参考： https://www.cnblogs.com/jyybeam/p/5794932.html
箭头语法的this指向问题？普通函数：根据调用我的人（谁调用我，我的this就指向谁）箭头函数：根据所在的环境（我再哪个环境中，this就指向谁）
什么是函数柯里化？柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数的函数，并返回一个函数接受剩下的参数。这中间可嵌套多层这样的接受部分参数的函数，直至返回最后结果

例如：

function add(a){
    return function(b){
        return function(c){
            return a+b+c;
        }
    }
}
console.log(add(1)(2)(3));
输出结果：6

call和apply的区别？

1.apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, argsArray); 即A对象调用B对象的方法。
2.call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2); 即A对象调用B对象的方法。
3.call和apply可以重新修改this的指向

怎么让一个Cat的实例cat instanceof cat为false？

主要是直接修改对象的prototype就可以了，就不是同一个实例了

 function Cat(){
            this.name='cat'
        }
        var cat = new Cat();
        Cat.prototype ={
            say:function(){
               console.log('a cat')
           }
       }
       console.log(cat instanceof Cat) // 这里输出false

原型链：当我们用obj.xxx访问一个对象的属性时，会先在对象自身属性中查找，找到就返回。如果没有找到，再沿着__proto__这条链向上找，找到返回。如果找到原型链的顶层Object.prototype还没有，就返回null，也就是(Object.prototype.__proto__ === null)
prototype和__proto__的区别？

①prototype（原型）是构造函数才有的属性，可以叫做显示原型，这个属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例共享的属性和方法，即这个原型对象是用来给实例共享属性和方法的。（当构造函数new实例化一个对象时候，它实例化对象的__proto__指向了它构造函数的prototype）；

②__proto__是对象（不论是普通对象还是函数对象）才有的属性，可以叫做隐式原型，用于指向创建它的构造函数的原型对象。（对象的__proto__会指向它构造函数的prototype）；

function foo(){}
var f = new foo();
// 该实例化的对象的__proto__指向了其的构造函数prototype
console.log(f.__proto__ === foo.prototype) // 输出：true

var obj = {}
// __proto__指向构造函数的prototype
console.log(obj.__proto__ === obj.constructor.prototype) // 输出：true

什么是构造函数？构造函数也是普通的函数，只不过会通过new来调用并创建一个新的示例，这个函数就叫做构造函数
怎么用js给元素添加class？

// 为 <div> 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
// 为 <div> 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
// 为 <div> 元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");
// 为 <div> 元素移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

// 为 <div> 设置属性
document.getElementById("myDIV").setAttribute("title","this is a title");

js哪些情况会造成内存泄漏？

1.错误使用全局变量。2.闭包引起的内存泄漏。3.dom清空或者删除时候，绑定的事件未清除。4.定时器未被清除。5.子元素存在引用。

js中垃圾回收的策略？

标记清除：

　　当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

引用计数：

机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，
当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

js中undefined和null区别？

这两个的值是不相等的，即undefined === null 是 false。undefined表示变量定义了未赋值，null表示变量的引用是空的。

注意(null == undefined)为true，是成立的，因为在ecmascript规范中，null和undefined的行为很相似，都表示一个无效的值，所以它们是相等的。

1.commonjs，amd，cmd的区别？

CommonJS, AMD, CMD都是JS模块化的规范。

1.CommonJs 是服务器端模块的规范，Node.js采用了这个规范。根据CommonJS规范，一个单独的文件就是一个模块，加载模块使用require方法，CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。

2.AMD（Asynchronous Module Definition）是 RequireJS （这里可以简记amd和requirejs是AR眼镜）在推广过程中模块定义的规范，AMD异步加载模块，AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块。

3.CMD（Common Module Definition）是SeaJS （这里可以简记cmd和seajs是打游戏的CS）在推广过程中模块定义的规范。CMD推崇就近依赖，只有在用到某个模块的时候再去require模块。

js中事件相关的知识点

1.什么是事件流？

也就是事件处理的流程，是有先后执行顺序的，标准的事件流它分为3个阶段：①事件捕获 ②事件目标 ③事件冒泡

2.什么是事件模型？

就是事件的一个标准模型，分为3个模型。分别是：

①原始事件模型（DOM0）

在原始事件模型中，事件发生后没有传播的概念，也没有事件流的产生，事件发生后就马上处理然后结束

②IE事件模型

这个是在ie系列浏览器里支持的，ie中的事件流不是标准的，它只有事件目标和事件冒泡，没有事件捕获，ie中创建事件是用attachEvent('onclick',function(){});移除用detachEvent('onclick',function(){}): 注意的是ie中组织事件冒泡的方法是获得event对象，这个event对象是用的全局变量window.event获得的，而且函数执行完毕，这个event就是null了。

③DOM2事件模型

这个模型是W3C指定的标准模型，我们现在用的浏览器都是按照这个标准，在W3C指定的事件模型中，一次事件的发生包含3个过程：

* 事件捕获（事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节
点是否注册了该事件的监听函数，若有则执行。）

* 事件处理阶段（事件到达目标元素，执行目标元素的事件处理函数）

* 事件冒泡阶段（事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册
了该事件的监听函数，有则执行。）

什么是事件委托？

说到事件委托，其实和事件代理是一个意思，都是表示有一个第三方去做某件事情。

委托就是把事件监听函数绑定到父元素上，让它的父辈来完成事件的监听，这样就把事情“委托
”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后
再对其进行相关处理。

举个例子，比如我们去饭店吃饭，小明说想吃蛋炒饭，小花说想吃牛肉面，小明和小花不可能直接告诉厨师吃什么，人多的话厨师记不清，这时候服务员出来了，服务员记录下来小明和小花想吃的饭，然后报给厨师，做好后，服务员根据做好的饭和订单上对应（event.target判断），依次给小明和小花，这个服务员就是个委托，也是代理。

同源策略是什么，还有跨域是什么？

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com是读取不了b.com下面的资源。

不受同源策略限制的有：
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的，如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域就是前面说的同源策略影响的解决办法，就是跨域。

跨域的方式有：1.jsonp跨域，2.通过修改document.domain+iframe来跨域，3.cors前后端都需要配置才支持跨域，4.nginx做代理也可以实现。

具体也可以参考：https://segmentfault.com/a/1190000011145364

什么是作用域？什么是作用域链？

作用域：作用域其实就是变量或者函数起作用的范围，比如定义一个var a在一个函数里，那这个a的作用域就是在这个函数里，外面是访问不到的。

作用域链：是javascript内部中一种变量、函数查找机制。进入执行环境后，访问一个变量时候js引擎会在当前作用域往上去找，知道找到global全局作用域为止，和原型链有一点相近，也是逐级往上去寻找，但是作用域链的顶层是window。

栈和堆的区别？

栈先进后出，基本数据类型和变量放到栈中，new的对象是放到堆中

js中new一个对象的过程，比如var person = new Person();

1.创建一个空的对象（var person = {};）

2.将这个对象的__proto__属性指向构造函数的prototype对象（person.__proto__ = Person.prototype;）

3.使用新对象调用函数，函数中的this被指向新实例化的对象（Person.call(person);）

4.将初始化完毕的新对象的地址，保存到左边声明的变量中。

js异步加载的方法

1.在script标签中使用async属性，虽然可以实现，但是它是乱序执行的，只要加载完了就会执行，所以不能保证执行顺序。

2.在script标签里使用defer属性，JS的执行在所有元素解析完成之后进行，而且它是按照加载顺序执行脚本的

3.动态生成script标签，在onload里动态使用document生成标签。

js中创建对象的方式有哪些？

工厂模式，构造函数模式，原型模式，组合模式，寄生构造函数模式，稳妥构造函数模式。

js中实现集成的方式有哪些？

原型链继承，es6的extends继承，借用构造函数继承，组合继承，原型集成，寄生式继承，

JS中的== 与 ===的区别

==：叫做相等运算符，比较时候会进行类型转换，值相等就是相等。

===：叫做严格运算符，只要类型不用，就不会相等。

sessionStorage 、localStorage 和 cookie 之间的区别？

共同点：都是保存在浏览器端、且同源的
区别：
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage只能在同一个浏览器页面中有效，或者打开链接和用window.open新打开一个页面也可以有效的，除了这些其他的情况都是不能共享的；localstorage和cookie都可以在所有同源窗口中都是共享的；
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者，具体是在页面添加监听事件：window.addEventListener("storage", handleStorage, false);
6、web Storage的api接口使用更方便，比如setItem，getItem，removeItem，clear都可以很方便的操作。cookie必须自己手动封装。

原生ajax的工作原理？

1.创建XMLHttpRequest对象

2.判断数据传输方式（get，post）

3.打开open（），建立连接，传输参数。

4.发送send（）

5.通过判断http的响应状态来接收数据，主要是在onreadystatechange里来判断readyState=4和status=200即可。

js中eventloop是什么？

是事件循环机制，js的事件分两种，宏任务何微任务，事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。

什么是防抖和节流？

防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
 clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
 timer = setTimeout(function(){
 console.log("函数防抖");
 }, 300);
};

节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
 if(!canRun){
 // 判断是否已空闲，如果在执行中，则直接return
 return;
 }
 canRun = false;
 setTimeout(function(){
 console.log("函数节流");
 canRun = true;
 }, 300);
};

jquery相关

jquery中$(this)和this有什么区别？

$(this)返回当前的jquery对象，可以调用jquery的val(),text(),hide(),show()等方法。

this返回当前元素，是普通javascript中的一个this，不能调用jquery的方法。

JQuery有几种选择器?

(1)、基本选择器：#id，class,element,*;

(2)、层次选择器：parent > child，prev + next ，prev ~ siblings

(3)、基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、内容过滤器选择器： :contains ，:empty ，:has ，:parent

(5)、可见性过滤器选择器：:hidden ，:visible

(6)、属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

如何用jQuery禁用浏览器的前进后退按钮？

$(document).ready(function() {
　window.history.forward(1);
  //或者 window.history.forward(-1);
});

jquery中$.get()提交和$.post()提交有区别吗？

相同点：都是异步请求的方式来获取服务端的数据；

异同点：

1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

react相关

react是什么？

React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)，React是Facebook开发的一个项目。

react组件之间都是独立互不影响，state也是组件独立的，如果发生多次渲染，react的render函数自会渲染发生变化的地方，组件之间也是可以互相嵌套的。
react中事件使用驼峰命名，首字母小写，例如：onClick
react中怎么绑定this？

1.在constructor里bind
constructor(props){
  super(props);
  this.handleClick=this.handleClick.bind(this);
}
2.使用属性初始化器语法
handleClick = () =>{}
3.在元素中的事件使用箭头函数
<div onClick={(e)=> this.handleClick(id,e)}>click me</div>
4.在元素的事件中也可以使用bind
<div onClick={this.handleClick.bind(this,id)}>click me</div>

react中的虚拟dom和diff算法理解

虚拟dom其实就是用一个对象来描述dom树，对数据和状态的变更会同步到虚拟dom上，通过计算新旧虚拟dom的差异，最终把变化的部分重新渲染。

diff算法是实现比较虚拟dom差异的一个算法，它可以对虚拟dom进行逐层的比较，如果树类型不同，就会重新创建，如果类型相同，属性不同，就会只更新属性不同的部分，如果在子节点后新增节点，会直接增加节点，如果在子节点前增加节点，会重新生成这几个节点。

给节点加key，key更方便diff算法计算出来节点之间的差异。

什么是高阶组件？高阶组件就是一个没有副作用的纯函数，且该函数接受一个组件作为参数，并返回一个新的组件。
什么是高阶函数？高阶函数是一个可以接受函数作为参数，并返回一个新的函数。
什么叫纯函数？一个函数的返回结果只依赖于它的参数，并且不会对别的对象产生副作用，就叫做纯函数。
什么是redux框架？

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。

那什么是可以预测化，我的理解就是根据一个固定的输入，必然会得到一个固定的结果。

核心概念，三大原则：①单一数据源 ②state是只读的 ③使用纯函数执行修改

处理流程，主要是action，reducer，store，

组件dispatch一个action，然后到reducer，reducer是一个纯函数，它接收到这个action，根据action的类型，来更新状态。

thunk和saga是什么？

thunk和saga是redux的异步解决方案，thunk可以接受一个函数并且可以在里面dispath action，但是缺点是action的调用会分散在各个文件中，不易管理。saga的优点是action统一管理，集中处理异步操作，但是个人觉得saga可能初学起来不是太容易，需要先学习es6的yield和async以及await语法。

什么是mobx？

mobx是一个简单的可扩展的状态管理框架。它通过@observable定一个被观察的状态数据，state的修改是在action函数中进行，并且提供了computed，通过get和set也可以计算state，它比起redux更加的简洁明了，在页面中是通过@inject("store")注入store，并且把组件@observer变为观察的组件。

redux和mobx的区别在哪里？

这两个框架都是可以做react状态管理的，mobx很简洁，上手很快，原理也是比较简单，从页面发起action到对应的action去处理state，大量使用了装饰器语法。不需要花大量的时间去研究即可上手编写。

redux则比较庞大一点，它的衍生出来的框架也有thunk和saga，学习saga需要学习es6的await，yield，async语法，学习成本和维护成本高一点。

redux是单数据源的，其中一个原则是单一数据源，你需要将所有的state放到一个全局的store里面，而mobx相反，它可以@observable观察多个state。

react的生命周期

分为4个阶段：初始化阶段，挂载阶段，更新阶段，卸载阶段

初始化阶段：

defaultProps={}：设置默认的props
constructor() ：这里可以获得props和初始化state

挂载阶段：
componentWillMount() ：组件被挂载到页面之前调用，这时候还无法获取dom对象。
render() ：渲染组件到页面中，这里注意不要使用setState，否则会递归渲染。
componentDidMount()：组件已经挂载到页面，dom也可以获得到，也可以发送ajax请求，也可以修改state状态，但是注意这里修改状态会重新渲染。

更新阶段：

componentWillReceiveProps() ：组件接收到新的props会触发这个方法，修改state不会触发这个。
shouldComponentUpdate() ：这个方法返回true和false，来决定是否重新渲染组件，性能优化就是在这里进行。
componentWillUpdate() ：组件将要更新时候调用。
render() ：重新渲染组件，这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行
componentDidUpdate()：组件已经被更改过了，会调用这个方法。

卸载阶段：

componentWillUnmount()：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

vue相关

vue是什么？

vue是一套用于构建用户界面的渐进式框架，它的核心是数据驱动和组件化。

什么是渐进式框架？

我们可以只用我们想要的一部分功能，不必像其他框架一样必须强制接受例如依赖注入这些，没有强侵入性，自由灵活。

简述vue响应式原理？

当vue的实例被创建的时候，Vue 将遍历data中所有的属性，并使用Object.defineProperty将它们转为getter/setter，vue追踪它们内部的相关依赖，在属性被访问和修改时候通知变化。

每个组件都有响应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新

vue的生命周期？

分为4个步骤，创建，挂载，更新，销毁。

1.创建

beforeCreate();

created(); // 初始化的内容写在这里，比如请求ajax进行数据处理

2.挂载

beforeMount();

mounted(); // dom渲染在这里就已经完成了，可以获取到dom节点

3.更新

beforeUpdate();

updated();

4.销毁

beforeDestroy();

destroyed();

第一次页面加载会触发：beforeCreate，created，beforeMount，mounted这几个钩子函数，而且dom渲染在mounted中就已经完成了。

vuex是什么？

vuex是一个专门为vuejs设计的状态管理工具，在状态比较多难以管理的时候就用它。

state：单一数据源

getter：返回计算处理state后的函数，相当于react-mobx中的computed，

mutations：真正处理state的地方。

action：用户提交的action操作。

modules：如果管理状态的业务比较复杂，可以分为几个模块，最后在vuex中使用模块，引用的时候加上模块的名字即可。比如：

const moduleA = {
  state: { name:'this is a name' },
  mutations: {  },
  actions: {  }
}
const store = new Vuex.Store({
  modules: { moduleA }
})
this.$store.state.moduleA.name; // 使用的时候加上模块的名称

流程是；用户在view上dispatch一个action》vuex的actions接收到后commit这个action到mutations》mutations更改state的数据状态》可以通过vuex提供的getters展示到view，也可以在view里this.$store.state.text来获取状态数据。

注意：想实现异步操作，可以使用promise来封装一下。

vue和react的区别？

相同点：

1.都可以做spa单页面应用。

2.都支持服务器端渲染

3.都有Virtual Dom，页面的操作数据会反应到虚拟dom上，通过diff算法计算后再渲染到页面。

4.都有组件，都有props，并且支持父子组件之间通信，也都有状态管理工具，react的redux，mobx和vue的vuex。

5.都有生命周期。

不同点：

1.react是mvc框架，vue是mvvm框架。

2.react是单向数据流，用事件来操作数据改变状态，vue是双向数据绑定，通过数据劫持和订阅者观察者来实现。

3.写法不同，react用的是jsx模版，vue就像是写一个普通HTML页面一样，同时可以包含有css和js。两者在渲染数据，更改data是不一样的写法，react渲染是必须return元素在下面引用，vue是直接在标签上用指令就可以，react用setState设置数据，vue直接用等号就可以。

4.数据发生改变，vue会自动跟踪组件的依赖关系，不需要重新渲染组件数。而react则状态改变，全部组件都会重新渲染，所以需要在shouldComponentUpdate这个生命周期里来优化

mvc和mvvm的区别？

mvc：（Model模型-View视图-Controller控制器），mvc是最经典的开发模式之一，流程是用户操作，view层负责接收输入，然后到Controller控制层，对Model数据进行处理，最后将结果通过View反馈到用户。mvc的通信是单向的，简单说就是：

用户-View-Controller-Model-Controller-View，缺点是：M和V层耦合度高，所有逻辑都在C层，导致庞大难以维护。

mvvm：（Model模型-View视图-ViewModel视图模型），也就是数据双向绑定模型，Model和View之间解耦，通过ViewModel进行交互，它就是一个同步View和Model的对象，View和Model之间的同步是自动的，不需要人为干涉，开发者只需要关注业务逻辑，不需要手动操作Dom。

vue中的keep-alive作用？

概念：它是vue的一个内置组件，主要作用是保留组件的状态，避免重新渲染。

它是一个抽象组件，不会被渲染到真实DOM中，它提供了include与exclude两个属性，允许组件有条件地进行缓存。

原理：其实就是在created时将需要缓存的VNode节点保存在this.cache中／在render时,如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。

什么遍历的时候使用key？

因为可以给每个遍历元素添加一个唯一标识，可以让diff更快的计算出来进行渲染。

怎么让css只在当前组件起作用

在当前的vue页面中的style标签纸红加上scoped即可，如：<style scoped></style>

vue的两个核心是什么？

数据驱动和组件化

数据驱动：简单可以解释为数据（Model）的改变，使视图（View）自动更新。也就是数据双向绑定，Model的改变会通过ViewModel改变View，同时也会监听View的变化，也会通过ViewModel响应到数据Model，实现数据双向绑定。

组件化：组件化实现了可扩展和可重用可维护的html元素，通过封装可用的代码，页面上每个独立交互的功能都可以抽取出来成一个组件。

vue的http请求都有哪些框架，ajax、axios、fetch之间的详细区别以及优缺点

可以参考：https://blog.csdn.net/twodogya/article/details/80223508

为什么new vue({data:{name:''}})中data是一个对象，而在组件中，data(){return{name:''}}，data必须是一个函数呢？

首先每一个组件其实都是一个vue实例化得来的，引用的是同一个实例，所以一个发生改变，其他的引用肯定也会改变的，但是换成函数的话，因为变量在函数里外部不能直接访问，所以也就不会影响到别的组件。所以new vue的时候实例其实只有一个，用data:{}也就可以了。

怎么自定义一个vue的过滤器？

在组件中写：
filters:{
    myFilter(value){
        return value.toLowerCase();
    }
}
使用：
直接输出属性时候{{name | myFilter}}
或者在v-bind中<div v-bind:name="name | myFilter"></div>

vue中自定义指令怎么写？

参考官方的文档的写法，指令是有几个钩子函数的，bind，inserted，update等，具体的含义和使用参考https://cn.vuejs.org/v2/guide/custom-directive.html

v-on可以绑定多个方法，如<div v-on="click1(),click2()")>click here</div>

webpack相关

什么是webpack

webpack是一个前端模块化打包工具，可以把项目中的资源打包成浏览器可以识别的资源。主要由entry入口，output出口，loader，plugins四个部分

什么是webpack中的bundle，chunk，module？

bundle：是由webpack打包出来的文件，
chunk：是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。
module：是指开发中的单个模块。

什么是loader，plugin？

loader是打包时候用于转换某些类型的模块，比如处理js，css，图片等类型的

plugin就是打包用到的插件，可以参与到打包的流程中，比如最长用到的htmlPlugin，可以把js和css打包到html模版文件中。

webpack-dev-server的作用

启动server后，可以把打包的文件存储到内存中，这样可以使用热加载功能，修改代码不需要刷新页面。

webpack打包性能优化方法？

1.定位体积比较大的模块，可以用webpack-bundle-analyzer插件来查看。

2.提取公共模块。

3.移除不必要的文件。

4.可以通过cdn引入一些库文件，可以见效打包文件的体积。

5.利用缓存。

6.更换js的压缩插件为uglifyjs-webpack-plugin。

7.使用dllpllugin，这个插件可以实现把第三方代码（比如react，loadsh）完全分离开，每次只打包项目资深的代码。

7.因为webpack是单线程的，所以可以使用happypack用多个进程并行处理，可以提高打包速度。

webpack和gulp的区别？

webpack和gulp都是前端自动化构建工具，但是他们的定位不一样，webpack侧重于模块打包，根据模块之间的依赖，生成最终生产部署的前端资源。

gulp侧重于前端开发的流程，在gulpfile.js里通过配置task任务使用一些插件，来实现js，css压缩，图片压缩，编译less，热加载。gulp利用流的方式进行文件的处理，gulp处理的文件是写在内存中，通过管道将多个任务和操作连接起来，所以处理更快，流程更清晰。

Koa相关

koa中的koa-body是什么？

是koa中的一个插件，可以处理请求和实现上传文件等操作，可以代替请求处理的koa-bodyparser和图片文件上传的koa-multer。

web相关

理解web标准，了解可用性，可访问性和安全性

web标准是一些列标准的集合，主要包括结构，表现，行为。

结构标准：是指用html，xhtml，xml来描述页面的结构。

表现标准：是指使用css样式来美化页面结构，使它更具有美感。

行为标准：是指用户和页面之间有一定的交互，可以使页面结构和表现发生改变，比如W3c制定的EcmaScript标准来实现。

可用性：是指页面从用户的感官上来说是否容易上手，容易理解，容易操作完成，可用性好说明产品质量高。

可维护性：是指系统出现问题时候可以快速定位解决，成本低，可维护性高，而且代码结构是否清晰符合标准，让其他的开发者更容易上手维护。

可访问性：是指在不同浏览器，不同屏幕下是否可以很好的去展示，并且对不同的用户或者有残疾的用户是否都可以使用。

什么是html语义化？

使用语义适当的标签去构建html页面的结构，比如使用h1-h6设置标题，使用header，footer，nav，aside标签来划分结构。html语义化可以使html的页面结构变得更加清晰，即使没有css的情况下页面也能够很好的呈现出结构，还能提升用户体验，方便维护，方便爬虫抓取和seo搜索引擎优化，也便于不同设备之间的访问。

什么是响应式网页设计？

网页可以在不同尺寸的设备上面可以自动调整显示和布局，以适应不同尺寸屏幕的浏览体验。

web安全及防护

1.sql注入：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

2.xss攻击：指的是攻击者往Web页面里注入恶意脚本代码，当用户浏览网页时候执行恶意代码来窃取用户的信息。

3.csrf攻击：指的是打开未受信任的网站，导致本地存储的cookie和个人信息泄露，而造成的被盗用了个人信息。比如你刚转了钱，本地保存了你的银行的个人信息，接着你又不小心访问了一个网站，这个网站就会盗取你的信息，去盗取你的银行信息。

web性能优化有哪些？

优化的目的：

用户角度：网页加载速度快，操作响应及时，用户体验好。

服务商角度：能减少页面请求、和占用的带宽资源，提高服务器的处理响应速度。

主要分为：

①页面级别优化

1.减少http请求。

2.使用外部脚本和css，可以缓存下来。

3.打包资源优化。

4.避免请求重复的资源，减少不必要的http跳转。

5.按需加载资源，比如js和图片懒加载。

6.从设计层面上简化页面，避免过于复杂的交互操作。

7.把js放到底部，把css放到header，可以避免造成阻塞。

②代码级别优化

1.减少dom的操作，避免重绘和回流而影响页面性能。

2.减少闭包的使用，因为闭包的变量都会在内存中，过多会造成内存消耗。

3.css优化，减少使用行内标签，可以用类和标签选择器，同样的功能建议抽取出来一个common css。

4.在手机端的页面，可以添加样式transform:transition3d(0,0,0)来开启硬件加速，会使页面流畅。

③服务器优化

1.提高硬件环境。

2.优化nginx，比如加大进程数，配置gzip压缩减少网络上所传输的数据量，配置超时时间，缓存等

移动端性能优化有哪些？

1.尽量使用css3的动画开启硬件加速，比如transform:transition3d(0,0,0)。

2.使用touch事件代替click事件。

3.避免使用css3的阴影效果。

4.不滥用float，因为float在渲染时候计算了比较大，会影响性能。

5.不滥用web字体，web字体需要下载，解析，重绘，尽量减少使用。

6.pc端的性能优化同样适用在手机端。

什么是web语义化？

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。比如使用footer，body，header，section标签等，好处是便于阅读和理解，便于爬虫抓取和搜索引擎优化。

什么是前端模块化？

可以理解为一组自定义业务的抽象封装，是根据项目的情况来进行封装组合到一起的，比如我们可以分为登录模块，评论模块。模块可维护性好，组合灵活，方便调用，多人协作互不干扰。因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

什么是前端组件化？

指对具体的某个功能的封装，比如所有的分页可以封装为分页组件来统一使用，以此来达到组件复用，提高开发效率。

什么是前段工程化？

概念：指使用软件工程的技术和方法来进行前端项目的开发、维护和管理。

前端工程化包含如下：
1.代码规范: 保证团队所有成员以同样的规范开发代码。
2.分支管理: 不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。
3.模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。（以上两点可以总结为模块化或者组件化开发。）
4.自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。
5.构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，
6.部署。将构建好的代码部署到生产环境。

什么是spa单页面应用？

spa（single page web application）单页面应用，就是只有一个Web页面的应用，浏览器一开始会加载所需要的HTML、CSS和js资源，所有的操作通过js来动态更新该页面，这样的程序就叫做spa单页面应用。
优点：

1.用户体验好，避免不必要的跳转页面和重复渲染。

2.减轻服务器端压力。

3.前后端分离，各司其责，便于优化管理。

缺点：

1.不利于seo搜索优化。（可以通过ssr服务器端渲染等方法）

2.首屏加载时间过长。

什么是SSR服务器端渲染？

就是在服务器端生成页面的html，再发送到浏览器。与单页面应用相比，服务器端渲染更好的利于seo搜索优化，和减少首页加载时间。但是同时也存在缺点，比如学习成本比较大，也会加大服务器的压力。

网络协议相关

http协议的介绍

http协议（超文本传输协议），是一个应用层的协议，一共有3个版本，http0.9 http1.0 http1.1，当前基本是1.1了，

http的特点是：

1.支持客户端/服务器模式，也属于中请求响应的模式。

2.简单快速：是说我们只需要指定get，post，head这些请求方式和访问路径，就可以进行访问了。

3.灵活：是指现在的版本中可以传输任意的数据，文件，xml，json都可以，只需要指定content-type对应的类型即可。

4.无连接：是指每次链接只处理一个请求，服务器处理完请求后，响应给客户端并收到客户的应答后就断开链接。（这个在http1.1中不存在了，http1.1可以客户端发送多个请求，服务器也可以同时处理多个请求）

5.无状态：是说http协议对事务的处理没有记忆能力，如果中断了，就必须要重新传输了。

TCP三次握手和四次挥手？参考博客 https://blog.csdn.net/qq575792372/article/details/87548899
http和https的区别？

1.https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2.http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4.http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

注：ssl是一个位于tcp和http之间的安全协议，为数据通讯提供安全支持

http状态码301和302的区别？

301 redirect: 301 代表永久性转移(Permanently Moved)

302 redirect: 302 代表暂时性转移(Temporarily Moved )

ETag是什么？

etag是entity tag的缩写，意思就是实体标签的意思，它是http协议中请求head中的一个属性，用来帮助服务器控制web端的缓存验证。

http请求经历的过程

1.当我们输入某个地址后，首先需要dns域名解析这个地址，根据一系列的dns解析域名的步骤找到对应服务器的ip。

2.tcp的三次握手建立连接。

3.建立tcp的链接后发送http请求的报文，包括请求行，消息报头，请求正文这些。

4.http响应报文，包括状态行，消息报头，响应正文，浏览器得到html代码。

5.最后浏览器解析得到的html，将结果呈现给用户。

tcp和udp的区别？两个都是传输层的协议，

①TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接

②TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付

③UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。

④每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信

⑤TCP对系统资源要求较多，UDP对系统资源要求较少。

get和post的区别？

1.get用于获取数据，post是提交数据。

2.get提交的参数追加在url的后面，用?和&来连接，post的参数放在Request Body提交。

3.get的url会有长度限制，最多2K，post则不会限制数据大小，而且还可以设置提交的数据类型（文件，json这些）。

4.get是不安全的，因为url上参数都已经暴露了，post是安全的。

5.get的请求参数会被保存在浏览历史记录里，post则没有。

6.get请求可以被浏览器缓存，post则没有。

浏览器相关

浏览器内核有哪些？

1.Trident：主要是IE，一些双核浏览器也会用到，比如360浏览器，腾讯浏览器，百度浏览器

2.Gecko：现在主要有火狐

3.Webkit：苹果自主研发的内核，使用的浏览器相当多，比如safari，Google chrome，opera，以及360，腾讯这些浏览器的高速模式都是用的这个。

4.Blink：基于webkit，Google与Opera共同开发，现在google在用。

渲染引擎工作流程？

1.解析html生成dom树

2.解析css生成cssom规则树

3.将dom树和cssom规则树合并在一起生成渲染树

4.遍历渲染树的节点开始布局，计算每个节点的位置等信息。

5.将渲染树每个节点绘制到页面。

注意：渲染的时候回出现阻塞的情况，当浏览器碰到script标记时候，dom构建将暂停，直到脚本执行完毕，所以要把脚本放到最下面，避免阻塞。css的话要放在最上面。

什么是重绘（repaint）和回流（reflow）

重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如添加个背景色，设置个文字颜色，则就叫称为重绘。

回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

回流何时发生：

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：

1、添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

注意：回流必定触发重绘，重绘不一定触发回流，重绘的开销比较小，回流的代价比较高。