HTML5新特性
增加新的内容标签：header nav content footer article aside
音频API（audio）视频API（video)
画布（canvas）API
地理（Geolocation）API
网页存储（WEBstorage）API：localStorage和sessionStorage
拖拽和释放（drag和drop）
行内元素有哪些？块级元素有哪些？空元素有哪些？
行内元素：a img input select span strong b em textarea label button
块级元素：h1-h5 div p ul li ol table th tr dl dt dd
空元素：br hr img input link meta
浏览器内核的理解？
主要分为渲染引擎和js引擎
渲染引擎主要负责获取网页的内容（HTML xml img css）计算网页的显示方式，然后输出至显示器或打印机上；
js引擎主要是解析和执行javascript来实现网页的动态效果
trident：IE/360/搜狗
Gecko：火狐
Presto：opera
Webkit：谷歌/safari
描述cookies sessionStorage localStorage之间的区别？
cookie是网站用于标识用户身份而存储在用户本地终端上的数据通常经过加密）
cookie数据始终在同源的http请求中存在，在浏览器和服务器之间来回的传递数据。
sessionStorage和localStorage不会自动发送数据给服务器.
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage比较大，5M甚至更大
有效期：
cookie在设置的过期时间之前一直有效，即使关闭窗口或浏览器。
sessionStorage是只在当前窗口有效。
localStorage是存储在本地，只要不主动删除就一直存在。
css选择符有哪些？那些属性（样式）可以继承？
id选择器
class选择器
标签选择器
通配符*
子选择器
后代选择器
属性选择器
伪类选择器
相邻选择器
可继承：font-size font-family color ul li dl dt dd
不可继承：border width height magin padding
css优先级算法：
同权重：内联样式>嵌入样式>载入样式
！important>id>class>tag
!important>内联样式
除上述新增的伪类：
:before
:after
:enable
:disabled
:checked
grid布局
Grid Container 的全部属性
-
display
grid | inline-grid | subgrid; -
grid-template-columns
... | ...; -
grid-template-rows
... | ...; -
grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;repeat(3, 20px [col-start]) 5% grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
Grid Items 的全部属性
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
来源： https://segmentfault.com/a/1190000012889793?utm_source=tag-newest
弹性布局（盒模型）
容器属性：
flex-flow：row nowrap =flex-direction+flex-wrap
flex-direction：row/column/row-reverse/column-reverse
flex-wrap：nowrap/wrap/wrap-reverse
align-items：stretch/flex-start/flex-end/center/baseline
align-content：stretch/flex-start/flex-end/center/space-between/space-around
justify-content：flex-start/flex-end/center/space-between/space-around
元素属性：
flex：=flex-grow+flex-shrink+flex-basis
flex-basis:元素在主轴上的初始尺寸，优先级比width高。主轴为column时为height
flex-grow:放大比例
flex-shrink:缩小比例
order：可设置元素之间的排列顺序，值越小越靠前盖align-item属性，，默认为0
align-self：可覆默认值为auto,表示继承父元素的align-item属性
flex-grow：
0/1，默认值为0.flex的项目使用本来的宽度，不拉伸，如果设置值为1，则让此项目占用剩下的所有宽度，
align-self:应用在具体元素上
flex-start:顶边对齐，高度不拉伸；
flex-end:底边对齐，高度不拉伸；
center:居中，高度不拉伸；
stretch:默认值，高度自动拉伸
align-item：应用在父级元素，子集继承
flex-start:顶边对齐，高度不拉伸；
flex-end:底边对齐，高度不拉伸；
center:居中，高度不拉伸；
stretch:默认值，高度自动拉伸
[图片上传失败...(image-82fec1-1568687978388)]
[图片上传失败...(image-e0b350-1568687978388)]
[图片上传失败...(image-b40f43-1568687978388)]
js的数据类型：
基本数据类型：string,number,Boolean,null,undefined
引用数据类型：object，array，function
ECMAscript 2015新增了symbol(创建后独一无二且不可改变的数据类型)
javascript原型，原型链，有什么特点？
每个对象都会在其内部初始化一个属性，就是prototype（原型）。当我们去访问这个对象的属性时，如果这个对象内部不存在这个属性就会去prototype里找这个属性，这个prototype又会有自己的prototype属性。于是就这样一直找下去，就行成了原型链
关系是：instance.constructor.prototype=instance.proto
javascript如何实现继承？
构造继承，原型继承，实例继承，拷贝继承
建议使用原型和构造混合方式
创建对象的几种方式
1、对象字面量的方式
2、用function来模拟无参的构造函数
定义一个function，如果使用new"实例化",该function可以看作是一个Class
3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）
4、用工厂方式来创建（内置对象）
5、用原型方式来创建
5、用混合方式来创建
js中最简单最实用的数组去重方法
ajax原理
Ajax = 异步 JavaScript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
Ajax工作原理：
相当于在客户端与服务端之间加了一个抽象层(Ajax引擎)，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器，像一些数据验证和数据处理
都交给Ajax引擎来完成，只有确认需要向服务器读取新数据时才右Ajax引擎向服务器提交请求。
Ajax优缺点：
优点：
1.无刷新更新数据
Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
2.异步与服务器通信
使用异步的方式与服务器通信，不打断用户的操作
3.前端与后端负载均衡
将一些后端的工作移到前端，减少服务器与带宽的负担
4.基于规范被广泛支持
不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
5.界面与应用分离
Ajax使得界面与应用分离，也就是数据与呈现分离
缺点：
1.Ajax干掉了Back与History功能，即对浏览器机制的破坏
在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面
2.安全问题
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制
5.违背URL与资源定位的初衷
6.不能很好地支持移动设备
7.客户端肥大，太多客户段代码造成开发上的成本
VUE实现双向数据绑定的原理?
是利用Object.defineProperty()方法重新定义了对象获取属性值（get）和设置属性值（set）的操作来实现的
-
继承机制
1、构造继承2、原型继承3、实例继承4、拷贝继承
继承方式：
1、拷贝继承：通用型 有new无new都可以用
2、类式继承：new构造函数---利用构造函数（类）继承的方式
3、原型继承：无new的对象---借助原型来实现对象继承对象
属性继承：调用父类的构造函数call
方法继承：用for in的形式 拷贝继承（jq也用拷贝继承）
[图片上传失败...(image-78cf8f-1568687978387)]
以上代码通过使用apply方法借用父类构造函数实现继承，这种方法有一个缺点就是只能继承构造函数里的属性或方法，无法继承到原型对象里定义的方法。
[图片上传失败...(image-3ef831-1568687978387)]
以上代码通过让子类的原型对象等于父类的一个实例，以实现继承，这种方法可以完全继承父类的全部方法和属性，但是不能通过传参的形式实例化对象，所有就有了第三种实现继承的方式 ，组合继承
[图片上传失败...(image-981a64-1568687978387)]
组合继承完美实现了继承父类的所有方法和属性，此时如果再想给子类的原型对象添加一些方法的话，只能使用.语法的形式（或者使用[]），还有一个缺点是使用子类实例化对象时，会在实例对象和原型对象中重复定义父类构造函数中的属性或方法。
js实现一个函数获取url参数的值
方法一：正则法
方法二：split拆分法
方法三：正则
通过JS获取url参数，这个经常用到。比如说一个url：http://wwww.jb51.net/?q=js,我们想得到参数q的值，那可以通过以下函数调用即可。
方法四：单个参数的获取方法
js 实现一个函数，对Array数组能够支持数字、字符串进行排序，升序和降序
javascript 中英文数组排序 sort结合localeCompare
VUE和AngularJs等框架是如何实现双向数据绑定功能的
双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI，反之亦然。换句话说，如果我们有一个user对象，这个对象有一个name属性，无论何时你对user.name设置了一个新值，UI也会展示这个新的值。同样的，如果UI包含一个用于数据用户名字的输入框，输入一个新值也会导致user对象的name属性发生相应的改变.
AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。脏治检查允许AngularJS监视那些存在或者不存在的变量。vue是通过defineProperty实现的。主要是对对象的操作。
跨域的解决方法
为什么要跨域（因为同源策略）
一个页面的ajax只能获取这个页面相同源或者相同域的数据。
如何叫“同源”或者“同域”呢？——协议、域名、端口号都必须相同
1、 通过jsonp跨域
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的
[图片上传失败...(image-449582-1568687978387)]
2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享（CORS） 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
- js中的作用域有哪些?
变量作用域另外局部变量的优先级要高于同名的全局变量,也就是说当局部变量与全局变量重名时，局部变量会覆盖全局变量
函数作用域
JavaScript的函数作用域是指在在函数内声明的所有变量在函数体内始终是可见的，也就是说在函数体内变量声明之前就已经可用了
**
**Javascript作用域链与变量提升?
**
**全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找， 直至全局函数，这种组织形式就是作用域链。
1.执行环境决定了变量的生命周期，以及哪部分代码可以访问其中变量
2，执行环境有全局执行环境（全局环境）和局部执行环境之分。
3.每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链
4.函数的局部环境可以访问函数作用域中的变量和函数，也可以访问其父环境，乃至全局环境中的变量和环境。
5.全局环境只能访问全局环境中定义的变量和函数，不能直接访问局部环境中的任何数据。
6.变量的执行环境有助于确定应该合适释放内存。
变量提升，就是把变量提升到函数的顶部，需要注意的是，变量提升只是提升变量的声明，不会吧变量的值也提升上来
在JavaScript中函数的创建方式有三种：函数声明（静态的，像函数example1()的形式）、函数表达式（函数字面量）、函数构造法（动态的，匿名的）
只有函数声明形式才能被提升
闭包函数以及优缺点 http://www.cnblogs.com/dolphinX/archive/2012/09/29/2708763.html
闭包就是能够读取其他函数内部变量的函数。 闭包的实质是一个函数，是一个用于返回局部变量值的函数，因为在全局中，受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。由于闭包时，变量的值都保存到内存中，会导致页面加载时内存消耗很大，IE会导致内在泄露，因此尽量少用或用时要及时删除变量。
创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收
理解闭包首先要理解，js垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。
websocket
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL
清除浮动
父级div定义 伪类:after 和 zoom
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfix{zoom:1}
数组方法
join():join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。 push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。 shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 unshift:将参数添加到原数组开头，并返回数组的长度 sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面 reverse()：反转数组项的顺序。 concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。 slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。forEach()（ES5新增）：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。
map()（ES5新增）：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
filter() （ES5新增）“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
every() （ES5新增）判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
some() （ES5新增）判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true reduce()和 reduceRight() （ES5新增）
字符串方法
动态方法：1、str.charAt(index); 返回子字符串，index为字符串下标，index取值范围[0,str.length-1]
动态方法：2、str.charCodeAt(index); 返回子字符串的unicode编码，index取值范围同上
静态方法：3、String.fromCharCode(num1,num2,...,numN); 根据unicode编码返回字符串
str.indexOf(searchString,startIndex); 返回子字符串第一次出现的位置，从startIndex开始查找，找不到时返回-1
str.lastIndexOf(searchString,startIndex); 从由往左找子字符串，找不到时返回-1
str.substring(start,end); 两个参数都为正数，返回值：[start,end) 也就是说返回从start到end-1的字符
str.slice(start,end); 两个参数可正可负，负值代表从右截取，返回值：[start,end) 也就是说返回从start到end-1的字符
不建议用：str.substr(start,length); start参数可正可负，负数代表从右截取
除了 slice() 和 substr() 方法里的负值是代表从右截取，其他方法里的负值一律作为0处理
str.split(separator,limit); 参数1指定字符串或正则，参照2指定数组的最大长度
str.replace(rgExp/substr,replaceText) 返回替换后的字符串
str.match(rgExp); 正则匹配
toLowerCase()：把字符串转成全小写。
toUpperCase()：把字符串转成全大写。
trim()：去掉字符串前后的所有空格。
get与post请求区别？
区别一： get重点在从服务器上获取资源。 post重点在向服务器发送数据。 区别二： get传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"?"连接，多个请求数据间用"&"连接，如http://127.0.0.1/Test/login.action?name=admin&password=admin，这个过程用户是可见的。 post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的。 区别三： Get传输的数据量小，因为受URL长度限制，但效率较高。 Post可以传输大量数据，所以上传文件时只能用Post方式。 区别四： get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等。 post较get安全性较高。 区别五： get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。 post支持标准字符集，可以正确传递中文字符。
常见Http协议状态？
200``：请求被正常处理204``：请求被受理但没有资源可以返回206``：客户端只是请求资源的一部分，服务器只对请求的部分资源执行GET方法，相应报文中通过Content-Range指定范围的资源。301``：永久性重定向302``：临时重定向303``：与``302``状态码有相似功能，只是它希望客户端在请求一个URI的时候，能通过GET方法重定向到另一个URI上304``：发送附带条件的请求时，条件不满足时返回，与重定向无关307``：临时重定向，与``302``类似，只是强制要求使用POST方法400``：请求报文语法有误，服务器无法识别401``：请求需要认证403``：请求的对应资源禁止被访问404``：服务器无法找到对应资源500``：服务器内部错误503``：服务器正忙
##### Http协议首部字段？
a、通用首部字段（请求报文与响应报文都会使用的首部字段）
Date：创建报文时间
Connection：连接的管理
Cache-Control：缓存的控制
Transfer-Encoding：报文主体的传输编码方式
b、请求首部字段（请求报文会使用的首部字段）
Host：请求资源所在服务器
Accept：可处理的媒体类型
Accept-Charset：可接收的字符集
Accept-Encoding：可接受的内容编码
Accept-Language：可接受的自然语言
c、响应首部字段（响应报文会使用的首部字段）
Accept-Ranges：可接受的字节范围
Location：令客户端重新定向到的URI
Server：HTTP服务器的安装信息
d、实体首部字段（请求报文与响应报文的的实体部分使用的首部字段）
Allow：资源可支持的HTTP方法
Content-Type：实体主类的类型
Content-Encoding：实体主体适用的编码方式
Content-Language：实体主体的自然语言
Content-Length：实体主体的的字节数
Content-Range：实体主体的位置范围，一般用于发出部分请求时使用
JavaScript原型，原型链 ? 有什么特点？
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype， 于是就这样一直找下去，也就是我们平时所说的原型链的概念。 关系：instance.constructor.prototype = instance.proto 特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话， 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
2.每个继承父函数的子函数的对象都包含一个内部属性proto。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的proto属性为再上一层函数。在此过程中就形成了原型链。
3.原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时，无法向超类型的构造函数中传递参数。
原型链：实例对象与原型之间的连接，叫做原型链
proto(隐式连接)
Object对象类型是原型链的最外层
实例对象->先查找自己本身下面的属性和方法->自身没找到会沿着原型链找到该对象的原型，再查看原型上是否有要查找的属性或方法->依次继续查找如果找到的话则返回，否则找到最顶层Object上还没有就真没有了
https://www.cnblogs.com/changyangzhe/articles/5721176.html
https://www.cnblogs.com/libin-1/p/5820550.html
null，undefined 的区别？
null 表示一个对象被定义了，值为“空值”； undefined 表示不存在这个值。 typeof undefined
//"undefined"
undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined； 例如变量被声明了，但没有赋值时，就等于undefined
typeof null //"object" null : 是一个对象(空对象, 没有任何属性和方法)；例如作为函数的参数，表示该函数的参数不是对象； 注意：在验证null时，一定要使用 === ，因为 == 无法分别 null 和 undefined
JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 如：{"age":"12","name":"back"}
jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
语法：jQuery.extend( [deep ], target, object1 [, objectN ] )
浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。
改变其中一个的值就会影响到另一个变量的值。有时候我们只是想备份数组，但是只是简单让它赋给一个变量，改变其中一个，另外一个就紧跟着改变
深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖
对于数组我们可以使用slice() 和 concat() 方法来解决上面的问题，对象的深拷贝实现原理： 定义一个新的对象，遍历源对象的属性 并 赋给新对象的属性
对Node的优点和缺点提出自己的看法？
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。 *（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
你有用过哪些前端性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。 （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 （4） 当需要设置的样式很多时设置className而不是直接操作style。 （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 （6） 避免使用CSS Expression（css表达式)又称Dynamicproperties(properties(动态属性)。 （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。 （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。 向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器， 程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。 减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询）， 减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
知道模块化开发吗 ?
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了。
根据AMD规范，我们可以使用define定义模块，使用require调用模块
- 了解过es6吗?
新的变量声明方式 let/const
与var不同，新的变量声明方式带来了一些不一样的特性，其中作用域与不再具备变量提升最重要的两个特性就是提供了块级
简述一下amd和cmd的区别?
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。
3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。
组件通信
Promise
Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。
Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象一个 Promise有以下几种状态:
pending: 初始状态，既不是成功，也不是失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。
pending 状态的 Promise 对象可能触发fulfilled 状态并传递一个值给相应的状态处理方法，也可能触发失败状态（rejected）并传递失败信息。当其中任一种情况出现时，Promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法， 所以在异步操作的完成和绑定处理方法之间不存在竞争）。
因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 对象， 所以它们可以被链式调用
预解析
在当前作用域下,js运行之前，会把带有var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句，预解析只会发生在通过var定义的变量和function上。
通过var关键字定义的变量进行预解析的时候：都是声明declare，不管它有没有赋值，都会赋值undefined
只要是通过var定义的，不管是变量，还是函数，都是先赋值undefined，如果是变量，也不管变量有没有赋值，在预解析阶段，都是会被赋值为undefined。
function进行预解析的时候，不仅是声明而且还定义（define）了，但是它存储的数据的那个空间里面存储的是代码是字符串，没有任何意义
如果你想实现立即执行的函数，可以把要执行的函数放到一对括号里面，对于JavaScript 来说，括弧()里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明所以，只要将大括号将代码(包括函数部分和在后面加上一对大括号)全部括起来就可以了。 如下：
(function fn(){
//代码区...
}())
还可以写成：闭包。
(function(){
//代码区...
})();
我们运行函数的时候会生成一个新的私有作用域（每次执行都是新的，执行完成就销毁）这个作用域下我们可以理解为开辟了一个新的内存空间。在这个内存中我们也要执行预解析。当我们的函数执行完成后，这个内存或者作用域就会销毁
预解释是不受其它if或者其它判断条件影响的，也就是说，即使条件不成立，我们里面只要有var或者function也会被预解释。if,while
后面定义的会覆盖前面定义的
当我们的一个函数返回一个新的function，我们在外面定义一个变量来接收，这样这个函数的内存就不能在执行完成后自动销毁，也就是我们所谓的函数内存被占用了。
1.盒子模型？
content
padding
border
margin
2.src与href的区别？
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
3.简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效
5.web前端开发，如何提高页面性能优化？
内容方面：
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript ：
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4. 移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化
如何优化图像？图像格式的区别？
1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
图像格式的区别：
矢量图：图标字体，如 font-awesome；svg
位图：gif,jpg(jpeg),png
区别：
1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;
优缺点：
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
开发及性能优化
1、规避javascript多人开发函数重名问题
命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化
2、请说出三种减低页面加载时间的方法
压缩css、js文件
合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作
1.get与post请求有什么区别？
get和post是什么?它们是http协议的两种数据请求方式。在本质上都属于tcp链接，并无差异，导致他们的差异的是
http的规定和浏览器的限制，导致他们在应用的过程中出现不同。
get请求可以主动被浏览器缓，post请求无法缓存，除非是手动去设置。
get请求的在浏览器回退时候是无害的的，而post会再次请求。
get请求通过url传递，post直接放在请求头中。
get只能支持url编码，post支持多种编码方式。
get请求在浏览器中有长度限制（ie大概为2kb），post不存在。
get请求说产生的url地址可以直接被浏览器加入到书签，post不可以
get和post还有个更重要的区别是：get产生一个tcp数据包，而post产生两个。
对于get请求只需要一次就好了，服务器响应200（返回数据
对于post请求，浏览器先发送header，服务返回100，浏览器再发送data，浏览器返回响应200
3. 什么是事件代理（事件委托）？有什么好处？
js高级程序上的定义：利用事件冒泡，只绑定一个函数就可以处理一类事件。
在js中，添加到页面上的事件数量直接关乎着页面的性能，多次与dom发生交互访问dom会导致页面重绘和重排，导致拖慢整个页面，这就是为什么优化里中的减少dom操作的原因。而且，每个函数都是一个对象，对象就要占据内存，内存大了性能自然就慢了。
事件委托的实现原理就是利用事件冒泡。
冒泡的顺序 ：
目标元素
dom结构知道body
body
html
document
windon
事件代理的好处:
优化性能
当新元素绑添加进来的时候不需要再次绑定事件，通过冒泡就可以触发。
4. 浏览器输入url到页面呈现出来发生了什么？
进行地址解析
解析出字符串地址中的主机，域名，端口号，参数等
根据解析出的域名进行DNS解析
首先在浏览器中查找DNS缓存中是否有对应的ip地址，如果有就直接使用，没有机执行第二步
在操作系统中查找DNS缓存是否有对应的ip地址，如果有就直接使用，没有就执行第三步
向本地DNS服务商发送请求查找时候有DNS对应的ip地址。如果仍然没有最后向Root Server服务商查询。
根据查询到的ip地址寻找目标服务器
与服务器建立连接
进入服务器，寻找对应的请求
浏览器接收到响应码开始处理。
浏览器开始渲染dom，下载css、图片等一些资源。直到这次请求完成
5. JS原型，原型链相关知识点。
在js中，每创建出来一个函数js就会默认创建一个prototype的属性，这个属性指向函数的原型对象。
在原型对象里面有一个属性constructor属性指向了构造函数。
每个对象都有一个隐式原型 proto ，指向的是构造该对象的构造函数的原型对象。
原型对象也是对象,所以如果我们让原型对象指向另外的一个实例，这个实例也有自己的原型对象，如果这个实例的原型对象又等于了另外的实例，一层层下去就形成了一个链条。这就是所谓的原型链。
函数也是对象，所以函数也有隐式原型，函数的隐式原型为Function.prototype
Function.prototype的隐式原型为Object.prototype
Object.prototype 的隐式原型为null 这里也就是原型链的顶端
遇到的问题
https://www.cnblogs.com/raoyunxiao/p/4173238.html