webpack
作用：webpack是把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件。
一些关键配置项：
entry：定义入口文件，它将是整个依赖关系的根
var baseConfig = {
entry: './src/index.js'
}
当我们需要多个入口文件的时候，可以把entry写成一个对象
var baseConfig = {
entry: {
main: './src/index.js'
}
}
output:即使入口文件有多个，但是只有一个输出配置
var baseConfig = {
output: {
filename: 'main.js',
path: path.resolve('./build')
}
}
loader：实现对不同格式的文件的处理，比如将scss或less转换为css，或者将typescript转换为js，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理
module: {
rules: [
{ test: /.css$/, use: 'css-loader' },
{ test: /.ts$/, use: 'ts-loader' }
]
}
几个常用loader：
-
babel-loader：让下一代的js文件转换成现代浏览器能够支持的js文件
-
css-loader,style-loader：用来解析css文件
-
file-loader：生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
plugins：plugins和loader很容易搞混，说都是外部引用有什么区别呢？ 事实上他们是两个完全不同的东西。这么说loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，它直接对整个构建过程起作用
var baseConfig = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
几个常用plugin：
-
HtmlWebpackPlugin:依据一个简单的index.html模版，生成一个自动引用你打包后的js文件的新index.html
-
HotModuleReplacementPlugin:它允许你在修改组件代码时，自动刷新实时预览修改后的结果
nodejs
nodejs 开发技能图解：
image14.jpg
什么是错误优先的回调函数？
错误优先的回调函数用于传递错误和数据。第一个参数始终应该是一个错误对象， 用于检查程序是否发生了错误
如何避免回调地狱?
回调地狱指的是在回调里进行回调，多次循环带来的代码阅读和理解上的困难。，比如：
getData(function(a){
getMoreData(a, function(b){
getMoreData(b, function(c){
getMoreData(c, function(d){
getMoreData(d, function(e){
...
});
});
});
});
});
解决方法：
-
将回调函数分割为独立的函数
-
使用Promises
-
使用async/await
-
使用yield
什么是事件循环
Node采用的是单线程的处理机制（所有的I/O请求都采用非阻塞的工作方式），至少从Node.js开发者的角度是这样的。 而在底层，Node.js借助libuv来作为抽象封装层， 从而屏蔽不同操作系统的差异，Node可以借助libuv来来实现多线程。下图表示了Node和libuv的关系。
[图片上传失败...(image-f4bb97-1529672710679)]
Libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个事件循环， 每一个I/O都需要一个回调函数——一旦执行完便推到事件循环上用于执行。
[图片上传失败...(image-95372e-1529672710679)]
哪些工具可以用来保证一致性的代码风格？
-
JSLint
-
JSHint
-
ESLint
-
JSCS
使用NPM有哪些好处？
通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。 对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本， 以及指明项目依赖的具体版本，这可以大大提高代码的复用。
js创建类的方法
-
构造函数法
-
原型法（prototype）
-
Json法
js实现继承的方法
-
原型链继承（prototype ）
-
特点：
-
非常纯粹的继承关系，实例是子类的实例，也是父类的实例
-
父类新增原型方法/原型属性，子类都能访问到
-
缺点：
-
要想为子类新增属性和方法，必须要在子类prototype赋值之后执行，不能放到构造器中
-
无法实现多继承
-
创建子类实例时，无法向父类构造函数传参
-
来自原型对象的引用属性是所有实例共享的
-
构造函数继承（SuperType.Call(this)）
-
特点：
-
创建子类实例时，可以向父类传递参数
-
来自原型对象的引用属性不是所有实例共享的
-
可以实现多继承（call多个父类对象）
-
缺点：
-
实例并不是父类的实例，只是子类的实例
-
只能继承父类的实例属性和方法，不能继承原型属性/方法
-
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
-
组合继承（最常用的继承模式）
-
特点：
-
利用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
-
这样，既通过在原型上定义方法实现了函数复用，又能保证每个实例都有自己的属性
js实现多继承
构造函数继承或属性复制（复制多个父类的属性）
js函数作用域
js的函数作用域，就是一个变量在全函数里有效．比如有个变量p1在函数最后一行定义，第一行也有效，但是值是undefined。
apply、call、bind的区别
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。
call 和 apply二者的作用完全一样，只是接受参数的方式不太一样。
bind是绑定，执行需要再次调用。
闭包
什么是闭包
闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
-
作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
-
一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
-
好处
-
缓存
-
面向对象中的对象
-
实现封装，防止变量跑到外层作用域中，发生命名冲突
-
匿名自执行函数，匿名自执行函数可以减小内存消耗
-
坏处
-
内存消耗（ 通常来说，函数的活动对象会随着执行期上下文一起销毁，但是，由于闭包引用另外一个函数的活动对象，因此这个活动对象无法被销毁）
-
性能问题（使用闭包时，会涉及到跨作用域访问，每次访问都会导致性能损失。因此在脚本中，最好小心使用闭包，它同时会涉及到内存和速度问题。不过我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响）
nodejs实现一个事件通知
继承EventEmitter
如何理解node的同步和异步
node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的。
程序总是崩溃，怎样找出问题在哪里?
-
node --prof 查看哪些函数调用次数多
-
memwatch和heapdump获得内存快照进行对比，查找内存溢出
性能优化方向
-
减少HTTP请求
-
使用浏览器缓存
-
服务端启用压缩
-
CSS放在页面最上面、JavaScript放在页面最下面
-
精简CSS和JS文件
-
减少对DOM的操作
-
正确理解Repaint和Reflow
Repaint 和 Reflow 也就是重绘和重排，Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。
上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。
总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。
-
使用JSON格式进行数据交换
-
减少Cookie传输
-
使用CDN加速
HTTP协议
image15.png
特点：
-
支持客户/服务器模式。支持基本认证和安全认证。
-
简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
-
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
-
HTTP 0.9和1.0使用非持续连接：限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。HTTP 1.1使用持续连接(keep-alive)：不必为每个web对象创建一个新的连接，一个连接可以传送多个对象，采用这种方式可以节省传输时间。
-
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。
请求格式:
分为请求行、请求头部、空行、请求内容，以post为例：
POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive
name=Professional%20Ajax&publisher=Wiley
第一部分：请求行，第一行明了是post请求，以及http1.1版本。
第二部分：请求头部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：请求数据，第八行。
响应格式
分为状态行、消息报头、空行和响应正文
HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8
<html>
<head></head>
<body>
<!--body goes here-->
</body>
</html>
-
第一部分：状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。
-
第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）
-
第二部分：消息报头，用来说明客户端要使用的一些附加信息第二行和第三行为消息报头，Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8
-
第三部分：空行，消息报头后面的空行是必须的
-
第四部分：响应正文，服务器返回给客户端的文本信息
rem布局
定义
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
flex布局
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
require.js
因为自身设计的不足，JavaScript 这门语言实际上并没有模块化这种概念与机制，所以想实现如JAVA，PHP等一些后台语言的模块化开发，那么我们必须借助 requireJS 这个前端模拟模块化的插件。
koa
koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。
koa 1
Express的API很简单，但是它是基于ES5的语法，要实现异步代码，只有一个方法：回调。如果异步嵌套层次过多，代码写起来就非常难看。随着新版Node.js开始支持ES6，Express的团队又基于ES6的generator重新编写了下一代web框架koa 1.0，但是generator的本意并不是异步。
koa 2
基于ES7开发了koa2，和koa 1相比，koa2完全使用Promise并配合async来实现异步.
vue
概括视频：网页链接
一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
v-if和v-show的区别
-
v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
-
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
<keep-alive></keep-alive>的作用是什么
用于包裹动态组件，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
Vue的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue生命周期？
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后
-
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
-
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
-
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
-
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
封装 vue 组件的过程
使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件，可以采用emit方法。
关于怎么快速学web前端开发，有什么方法，这个问题，想必大家都已经心中有数了，打算深入了解这个行业的朋友，可以加下小编的web前端开发学习群（374941052）不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份2018最新的web前端开发资料和0基础入门教程，欢迎初学和进阶中的小伙伴。