Font-end（面试准备）

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。

数据库的规划是怎么样的？

① 创建数据库的目的；
② 考虑字段的信息（字段的类型、长度、主键外键约束）
③ 考虑表内、表与表之间的关联关系；
④ 设计好数据库的维护和还原方案

CSS3 动画

① 动画关键帧
@keyframes rote {
0% {
transform: rotate(0deg)’
}
}
② 将动画关键帧，通过animation绑定到一个选择器上才有效

transform有哪些属性？

平移：translate
旋转：rotate
倾斜：skew
缩放：scale

一般搭建Web项目的目录结构

App.js//程序文件
bin//存放执行文件
node_modules//存放依赖库
package.json//记录包的一些版本信息，以及自定义指令script
public//存放静态文件
src//存放各种组件
routes//路由表

JQuery的一些兼容性问题

① 在IE8里，对一些自闭合标签，使用非自闭和input、img，用JQ选择器无法获取到node节点；
② 在IE8里，对一些id、class命名为大小写不区分的名字，用JQ选择器无法获取到node节点；
③ 在IE8及以下的浏览器，ajax不能使用ip，应该采用域名的方式。

Webpack和Gulp的区别？

Gulp、Grunt：在一个配置文件中指明某些文件需要自动地进行编译、组合、压缩；

Gulp的4个常用的方法：
① src( )：获取流
② dest( ): 写文件
③ task( ): 用来定义任务
④ watch( ): 用来监听事件

Webpack：在Webpack.config.js文件中，entry指定入口文件。会从入口文件开始，找出所有依赖的文件，然后用对应的loaders去处理它们，最后打包成为一个浏览器可识别的js文件；

Webpack的打包指令：
进入到项目的根目录下，执行：node_modules/.bin/webpack 入口文件.js 打包后的文件.js

做啥Node相关的？

① 快速搭建开发环境；
② npm包管理工具

什么是Koa

Koa是使用了ES6规范的generator和异步编程的一款前端框架，它不捆绑任何中间件，拓展性更强，所以它可以让中间件的开发变得更加有趣。

什么是中间件？

• 所谓的“中间件”，也就是中间过程中可以变的步骤
• 例如“把大象放进冰箱”，分为三个步骤：
• ① 打开冰箱门
• ② 放大象进去
• ③ 关闭冰箱门
• 其中② 是可变的步骤，成为中间件

js如何实现异步编程？

① 回调函数
② 事件监听
③ 发布/订阅
④ Promise对象

Nodejs的事件机制

• Node.js使用事件驱动模型（事件源、监听器、事件处理程序）
• events是Node.js最重要的模块，它只提供一个对象EventEmitter。
• EventEmitter的核心是事件发射和事件监听；
• 与Dom树上的事件不同，因为它不存在事件冒泡、捕获行为。

EventEmitter有以下方法：

① on(“事件名”, 监听的变量即回调函数)
② emit(“事件名”, 所传参数)
③ once(“事件名”, 监听);//一次性监听，触发完解除
④ removeListener(“事件名”，监听的变量);//移除某一指定事件名的监听
⑤ removeAllListeners();//移除所有事件的所有监听
⑥ listeners(“事件名”);//返回一个数组，这个数组是这个事件的所有监听集合
⑦ setMaxListeners(15);//设定一个事件最多可以设置多少个监听数（太多会造成内存泄漏）

v-if和v-show的区别

v-if：是真正的条件渲染，因为它会确保在 切换过程中，条件块里的事件监听器、子组件能够是当地被摧毁或重建；而且也是惰性的，直到第一次为true的时候，才会开始渲染。
v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换

组件化 和 模块化

组件：
① 强调的是复用；
② 侧重于UI；
③ 像一个黑盒子（样式、结构、逻辑不用管），要用的时候直接拿，就可以盖房子

模块：
① 强调的是规则；
② 侧重于功能的实现和数据的封装；
③ 由一个或多个组件构成的，具有一定功能的房子、床

模块化开发AMD、CMD和Common.js

相同： 都是js模块化开发的规范
① 【针对对象】
AMD、CMD：客户端；
Common.js：服务端；
② 【加载方式】
AMD、CMD：异步加载
Common.js：同步加载
③【预加载、懒加载】
虽然AMD、CMD都是异步加载，但是都需要一个预处理：提前将所需的模块文件并行加载好。
AMD：属于预加载。它会在并行加载JS文件的同时，还会并行解析执行该模块。
CMD：属于懒加载。虽然会一开始并行加载JS文件，但是不会执行，而是在需要的时候才去解析执行
④【优缺点】
AMD：
优点：加载快速，尤其是遇到多个大文件。因为并行解析，所以能在同一时间段里解析多个文件；
缺点：并行加载，异步处理，加载顺序不一定。
CMD：
优点：只有使用的时候才加载，所以顺序可控
缺点：因为是同步解析执行，所以时间比较长
⑤【引入方式】
AMD：用<script>引入Require.js
CMD：用<script>引入Sea.js
Common.js：用node就行了

SVG、Canvas、CSS3

SVG：基于XML，它的代码结构和兼容性都很好；（一般用于展示数据）
Canvas：和JS紧密结合，它的逻辑操作很方便，渲染效率也很高（一般用于应用、游戏、图表）；
CSS3：更多是扩展样式的表现
优点：① 可以像SVG一样结合DOM节点；
② 渲染效率、旋转一些功能比Canvas更好；
缺点：① 在Dom节点很多的情况下，渲染速率会大大下降；

JSX是什么？

JSX是一种JavaScript的语法扩展。
它允许在JavaScript代码里出现HTML、CSS语法，它们终将被转换成原生的JavaScript，去创建DOM

React是什么？

React是一套可以用简洁的语法 去 高效绘制DOM的框架。
“高效”：
① 因为React拥有Virtual Dom机制。Virtual Dom是一个存在于内存中的JavaScript对象，它与Dom是一一对应的关系，也就是说只要有Virtual Dom，我们就能渲染出DOM；
② 当页面发生变化时，得益于高效的DOM diff算法，我们能够知道Virtual Dom的变化，从而高效的改动DOM，避免重新绘制DOM。

React Native是什么？

一个基于JavaScript，具备动态配置能力的移动端开发框架。
Native版本的React

Node.js是什么？

① JavaScript是一门编程语言；Node.js是一款基于JavaScript和GoogleV8 引擎的开源Web服务器项目；
② Node.js借助了JavaScript的事件驱动机制、V8的高性能引擎
（JavaScript是单线程执行，根本不能同步IO操作）
② JavaScript需要浏览器的解释器去解释执行；Node.js是对Google V8引擎进行封装了的运行环境；

npm

npm是Node.js的包管理工具
① 【直接用】大家都把自己开发的模块打包好后，放到npm官网。直接通过npm安装就可以直接用；
② 【依赖关系】npm可以根据依赖关系，把所有依赖的包都下载。

手写事件委托

//事件委托，利用的是事件冒泡的原理。//利用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序。var oBox = document.getElementById("box");oBox.onclick = function(ev){    var ev = ev || window.event;//为了火狐的兼容性。因为IE都支持window.event，但火狐只能够使用传递的事件对象；    //上面那句相当于： var ev = ev ? ev:window.event;//ev为false时，即undefined    var target = ev.target || ev.srcElement;//火狐只支持ev.target，而IE只支持ev.srcElement；    //这个target，就是鼠标所点击的那个Node节点了。}

性能优化（图片）

可以使用CSS Sprite进行图片的压缩与合并，减少请求数。
但是也要考虑！多图合成一张图然后压缩过后，图片大小，清晰度的问题

问题一：图片的压缩

图片的分辨率单位是：位/像素
① 图片压缩的原理就是，降低每个像素的位数；
② 对图片的压缩，图片的质量降低在所难免；
③ 但是有个非常重要的原则：在保持图片能够正常显示的情况下，尽可能压缩分辨率，从而降低图片的体积

问题二：图片的格式

当图片的颜色较复杂，用JPG；
当图片的颜色较单一，用GIF；

问题三：图片的切割

对大尺寸的图片进行切割；

浏览器缓存的优点

对于客户端：极大地提高网页性能，优化用户体验；
对于服务器：减少接收的请求次数，缓解服务端的压力；

强缓存和协商缓存

首先， 在第一次请求成功后，再次请求同一个网页：
① 浏览器会获取该资源第一次请求成功后缓存下来的Header信息，查看Expires（绝对时间）、Cache-control（相对时间，并且优先考虑）这两个属性；
若命中强缓存，则直接从本地磁盘获取资源（本次请求不会与服务端进行通信）；（200）
若不命中强缓存，则进行②：
② 浏览器会拿着该资源第一次请求成功后缓存下来的Header信息，查看Last-Modified、ETag，将它作为请求头向服务器发送请求。由服务器来判断是否命中协商缓存：
若命中协商缓存，浏览器会响应新的Header信息给客户端，但是不会返回资源内容，会告诉浏览器直接从自己本地获取就行；（304）
若没命中协商缓存，则会响应全新的资源内容给客户端

本地存储

WebStorage 和 Cookie。
和浏览器缓存的区别：本地缓存可不联网，浏览器缓存不行

WebSocket

Socket：英文意思是孔、插座。是套接字
在JAVA里面，客户端创建连接套接字，发送请求给服务器端；
服务器端监听Socket，监听到了，则建立双向连接，发送数据；
关闭时，用close；

WebSocket也一样，
有2个方法：
send（）：向远程服务器发送数据
close（）：关闭该websocket链接
有4个属性：
onopen：当网络连接建立时，触发该事件
onerror：当网络出现错误时，触发该事件
onmessage：当websocket接受到服务器发来的消息时触发的事件，也是通信中最重要的一个监听事件
onclose：当websocket被关闭时，触发该事件
还有readyState属性，返回websocket所处的状态

Ajax（源码）

① 创建xhr对象
② 通过xhr对象发送请求
③ 接受响应

//创建xhr对象var xhr;if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();} else {    xhr = new ActiveXObject('Microsoft.XMLHTTP');}//通过xhr对象发送请求xhr.open('get',url,true);xhr.send();//处理响应//当xhr的readyState发生变化时，会触发回调函数onreadystatechange();//readyState（5种状态）//0 -- 请求未初始化//1 -- 连接已建立//2 -- 请求已接收//3 -- 请求处理中//4 -- 请求已完成if(xhr.readyState == 4){    if(xhr.status == 200){        //对DOM的实际操作    }}

Ajax（JQuery）

$.ajax({    type: "GET",//请求方式    url: "http://dev.contoso.corp.com/123",//请求url    dataType: ,//规定预期的，服务器响应的数据类型：“xml”、“html”、“script”、“json”、“jsonp”、“text”})

JSONP

首先，Ajax直接请求普通文件存在跨域权限的访问问题；
然后，聪明的程序猿发现，拥有“src”的标签可以从外部域名下载js文件；
之后，有一种简洁的数据交换格式——JSON，可以被原生js支持，所以客户端可以随心所欲地处理这种格式；
后来，客户端可以通过和“调用脚本”一模一样的方式，来调用跨域服务器上动态生成的js文件（一般以JSON为后缀），获得自己所需的数据；
最后，为了更方便客户端使用数据，逐渐形成了一种非正式传输协议——JSONP。客户端可以传递一个callback参数给服务端来自定义回调函数的名字。（JQ通过定义jsonpCallback参数）