肝完这份前端毒鸡汤，你就是赚到了（篇幅较长，建议收藏慢慢细品）

最近看到一份很是有意思的前端知识点清单整合，而后就滋生了一个想法emmmm....

小编根据清单从新画了一个图，而后决定对下方这个图罗列的知识点作一个系统的整合（征服欲燃起了熊熊大火）。工做之余，小编花了大概一周多的时间整理，篇幅较长，建议收藏慢慢细品。

Javascript基础

变量和类型

1.变量

js的变量，说白了就至关因而一个存储数据的‘容器’。咱们在定义变量的时候须要注意一下几点：

• 变量名大小对大小写字母敏感；
• 变量名须以字母开头（也能以 $ 和 _ 符号开头，可是不建议）；

2.类型

js规定的数据类型有八种：Boolean, String, Number, Null, Undefined, bigInt, Symbol, Object

• 基本类型有六种： Boolean, String, Number, Null, Undefined,Symbol
• 引用数据类型有一种： Object(在JS中除了基本数据类型之外的都是对象，Data, function, Array,正则表达式都是对象)

注意：Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。

拓展： 关于null和undefined的区别和类似之处。于null和undefined在必定程度上及其类似，可是又有着细微的区别。

null表示的是‘没有对象’，即该处不该该有值。（也能够这样理解，null是已经定义可是值为空，分配内存）；

• 做为函数的参数，表示该函数的参数不是对象。
• 做为对象原型链的终点。

undefined表示“未定义”，一个特殊值，一般用于指示变量还没有赋值，其值就为undefined。

• 变量被声明了，但没有赋值时，就等于undefined(较为常见)。
• 调用函数时，应该提供的参数没有提供，该参数等于undefined。
• 对象没有赋值的属性，该属性的值为undefined。
• 函数没有返回值时，默认返回undefined。

原型和原型链

说到原型和原型链，难免得说一下构造函数。

构造函数是一种特殊的方法。主要用来在建立对象时初始化对象。每一个构造函数都有prototype(原型)属性。构造函数的出现是为了解决使用Object构造函数和字面量表示法不方便建立大量重复对象的问题。看个例子：

function func(name){
this.name=name;
this.sayHello=function(){
  alert('my name is '+this.name);
}
}
var f=new func('phoebe');
f.sayHello();
复制代码

此处的f是func实例化以后的一个构造函数，new是用来实例化函数的一种手段。而func的构造函数其实是js内置的function，实际上function func(name){}等价于var func = function (name){}。到这里相信你大概已经明白了何为构造函数。

知晓了构造函数的概念以后，咱们来探讨一下原型和原型链。

1.原型

• prototype

每一个构造函数在建立时都会自动建立一个prototype属性，咱们能够在这个属性当中添加新的属性和方法，添加的属性和方法能够为这个函数所使用。将这个函数实例化后的实例也可使用新添加的属性和方法。这个prototype属性指向的对象，包括自带的属性和咱们添加的属性、方法，能够把它指向的对象的内容集合称为构造函数的原型。

注意prototype是构造函数才有的属性。

• __ proto __

__proto__是每一个对象自带的属性，属性值是当前实例所属类的原型(prototype)，原型对象中有一个属性constructor, 它指向函数对象。

举了例子：

function Example() {}
  var ExampleOne = new Example()
  console.log(ExampleOne.__proto__ === Example.prototype) // true
  console.log(Example.prototype.constructor===Example) // true
  // ExampleOne是个实例对象，带有的是__proto__属性，Example是个构造函数，带的是prototype属性
复制代码

图解：

• constructor

每一个函数都会有一个原型对象，该原型对象有一个constructor属性，会指向建立对象的函数自己。此外，全部的实例对象均可以访问constructor属性，constructor属性是建立实例对象的函数的引用。

2.原型链

通常，每一个对象都会有一个原型__proto__，这个原型也有它本身的原型，将这些原型链接起来，造成一个原型链。在查找某一特定属性时，会先去这个对象里去找，若是对象上没有的话就会去它的原型对象里面去，单仍是没有的话，会再去向原型对象的原型对象里去寻找。 这个寻找的操做被委托在整个原型链上，咱们称之为原型链。

图解：

举个例子：

function Example(){}
var ExampleOne = new Example(); //new实例化
console.log(ExampleOne.__proto__ === Example.prototype); // true
console.log(Example.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Example.__proto__ == Function.prototype; //true
console.log(Function.prototype)// function(){} (这是个空函数)

var number = new Array()
console.log(number.__proto__ == Array.prototype) // true
console.log( Array.prototype.__proto__ == Object.prototype) // true
console.log(Array.prototype) // [] (这是个空数组)
console.log(Object.prototype.__proto__) //null

console.log(Array.__proto__ == Function.prototype)// true
复制代码

小结:

1. __proto__是对象的属性，prototype是构造函数的属性，__proto__总指向prototype;
2. prototype在构造函数建立时会自动生成，它总会被__proto__指向。

做用域和闭包

1.做用域

咱们先来讲一下变量的做用域。变量的做用域通常分为两种：全局做用域和局部做用域。

全局做用域：函数最外层定义的变量，任何函数内部均可以访问到。

例如

var a = '1';
function change() {
    console.log(a)
};
change()  // 1
复制代码

局部做用域： 和全局做用域不一样，局部做用域只能容许自身内部调用变量，外部函数没法访问。

例如：

function num() {
  var b='2'
};
num();
console.log(b) // b is not defined
复制代码

须要注意的是，在函数内部声明一个变量的时候，必定要记住得用var定义，否则至关于声明了一个全局变量。

例如:

function change() {
    num=2;
}
change();
console.log(num) // 2
复制代码

须要注意的是，函数内部存在的变量提高问题。

咱们先看下面例子：

var num1 = 1;
function one() {
    console.log(num1);  // undefined
    var num1 = 2;
    console.log(num1) // 2
}
复制代码

其实上面的例子等价于：

var num1 = 1;
function one() {
  var num1
  console.log(num1);  // undefined
  num1 = 2;
  console.log(num1) // 2
}
复制代码

不难看出，这是存在在函数内部变量提高的现象。

或许对概念不清晰的童鞋对于第一个例子会有点疑惑，认为第一个打印出来的应该是1，而不是undefined（寄拖鞋警告一次）。

为何呢？其实one()函数内部声明了num1，one()此时就是一个局部做用域，在内部没有声明num1的状况下，是会直接获取全局变量num1。

可是在局部做用域声明了num1以后，num1这个变量会提高。如第一个例子，当第一次console.log(num1)的时候，就至关于var num1，定义了一个变量但没有赋值，第二次打印，会打印出赋值以后的num1，就像上面的第二个例子。

拓展：在这里，想拓展一下几种常见的声明变量的方式。

• var ：若是在当前函数内部声明一个变量，则做用范围在函数内部；若是在最外层声明，则做为全局变量；若是未使用var定义直接使用变量，则会报错；
• const：具备块级做用域的特征，同一个做用域中，变量名只能声明一次，不存在变量提高。const声明的变量必须是个常量。
• let： 跟const几乎相似，可是最主要的区别是let声明的是一个变量，const声明的必须是个常量。

不一样之处：

*var存在变量提高，let和const不会；

• var在函数内部同一个变量能够重复声明，而在同一个块级做用域内部，let和const只能声明一次，而且const声明的是个常量，不能修改；
• var 声明的变量属于函数做用域，let 和 const 声明的变量属于块级做用域

2.闭包

简单的说，闭包有两个做用：一就是可以读取其余函数内部变量的函数（也就是读取自身函数之外的变量）。二是让这些外部变量始终保存在内存中。

闭包能够避免使用全局变量，防止变量污染，可是过多使用会形成内存泄露。

举个例子，我想要获取一个函数内部的变量：

var num = 200;
function f1() {
    var num = 100;
    return num
};
f1() // 100
var fn = f1(); 
fn() // fn is not a function
复制代码

这显然是不行的，fn获取不到f1内部的变量。这时候咱们能够考虑在f1内部返回一个函数看看结果：

var num = 200;
function f1() {
    var num = 100;
    return function () {
        return num
    }
};
var fn = f1(); 
fn() // 100
复制代码

经过在函数内部返回一个函数，外部函数能够根据返回的函数获取到原来函数内部的变量，这就体现了闭包的做用。

想研究的更透彻欢迎猛戳：

developer.mozilla.org/zh-CN/docs/…

执行机制

javascipt是单线程的描述性脚本语言，与java或C#等编译性语言不一样,它不须要进行编译成中间语言,而是由浏览器进行动态地解析与执行。因此，弄懂它的执行机制是颇有必要的。

因为javascript是单线程的，为了防止在网页加载过程当中因为图片音乐等过大文件而致使加载阻塞，从而衍生出了‘同步任务’和‘异步任务’。咱们能够先看一下以下流程图：

经过上图能够较为清晰的看到任务执行的流程。

在同步任务和异步任务以外，执行任务的时候还定义了‘宏观任务’和‘微观任务’两种。通常来讲：

• macro-task(宏任务)：包括总体代码script，setTimeout，setInterval；
• micro-task(微任务)：Promise，process.nextTick(node.js)；

任务一开始执行的时候，会进入到相应的Event Queue当中。事件循环的顺序，决定js代码的执行顺序。进入总体代码(宏任务)后，开始第一次循环。接着执行全部的微任务。而后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行全部的微任务。

虽说js是单线程的，可是并非简单意义上的就是按顺序往下执行。经过以上所讲的这些执行顺序，相信大家应该在内心有个大概的思路了（拖鞋警告二）。看个例子（网上搜的，就得解释的能够就拿过来了）：

console.log('1');
 
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
 
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })

复制代码

最终输出的顺序是：1，7，6，8，2，4，3，5，9，11，10，12。有没有跟你所预想的同样？若是是，那么恭喜这位童鞋，你已经大体掌握了js的执行机制了。若是不是，那就往下瞅瞅。

第一轮事件循环流程分析以下：

总体script做为第一个宏任务进入主线程，遇到console.log，输出1。

遇到setTimeout，其回调函数被分发到宏任务Event Queue中。咱们暂且记为setTimeout1。

遇到process.nextTick()，其回调函数被分发到微任务Event Queue中。咱们记为process1。

遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中。咱们记为then1。

又遇到了setTimeout，其回调函数被分发到宏任务Event Queue中，咱们记为setTimeout2。

宏观任务（Event Queue）	微观任务（Event Queue）
setTimeout1	process1
setTimeout2	then1

上表是第一轮事件循环宏任务结束时各Event Queue的状况，此时已经输出了1和7。

咱们发现了process1和then1两个微任务。

执行process1,输出6。

执行then1，输出8。

第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。那么第二轮时间循环从setTimeout1宏任务开始：

首先输出2。

接下来遇到了process.nextTick()，一样将其分发到微任务Event Queue中，记为process2。new Promise当即执行输出4，then也分发到微任务Event Queue中，记为then2。

宏观任务（Event Queue）	微观任务（Event Queue）
setTimeout2	process2
	then2

第二轮事件循环宏任务结束，咱们发现有process2和then2两个微任务能够执行。

输出3。

输出5。

第二轮事件循环结束，第二轮输出2，4，3，5。

第三轮事件循环开始，此时只剩setTimeout2了，执行。

直接输出9。

将process.nextTick()分发到微任务Event Queue中。记为process3。

直接执行new Promise，输出11。

将then分发到微任务Event Queue中，记为then3。

宏观任务（Event Queue）	微观任务（Event Queue）
	process3
	then3

第三轮事件循环宏任务执行结束，执行两个微任务process3和then3。

输出10。

输出12。

第三轮事件循环结束，第三轮输出9，11，10，12。

最终整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。

(须要注意的是，node环境下的事件监听依赖libuv与前端环境不彻底相同，输出顺序可能会有偏差)

最后补充一点，谨记javascript是一门单线程语言，而Event Loop是javascript的执行机制。

语法和API

关于javascript的语法和API，这里就不过多介绍了。附上几个连接，能够详细的看一下：

• W3school: www.w3school.com.cn/js/index.as…
• 菜鸟教程：www.runoob.com/js/js-synta…
• 小编以前整理的部分相关内容：juejin.im/post/5e6208…

---

HTML和CSS

HTML

HTML，超文本标记语言，是一种标识性的语言。它是撑起页面框架结构的重要部分。

HTML部分的内容较为基础，前端的童鞋确定是很熟悉的。可是这里仍是要附上连接： www.w3school.com.cn/html/html_j…

CSS

css,层叠样式表，用来修饰页面。除了了解css的基本用法以外，小编在这里想记录几个面试常常被问到的有关样式的硬核问题。

1.经常使用的几种布局方式

• 固定布局：最外层盒子宽度固定且不能移动，里面的各个模块也是固定宽度而不是百分比。不管访问者的屏幕的分辨率是多少，网页都显示为和其余访问者相同的宽度。
• 流式布局（自适应布局）：盒子宽高按百分比（故而也称之为百分比布局）。
• 定位布局： 使用决定定位，相对定位和固定定位的布局
• 浮动布局：使用float:left;和float:right;设置布局，注意清除浮动。
• 响应式布局（媒体查询）： 使用@media，详情可参考：www.runoob.com/cssref/css3…
• 弹性布局（伸缩布局）：献上阮一峰老师的细致分析文档：www.ruanyifeng.com/blog/2015/0…

2. 关于BFC

• BFC是什么

  BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。BFC是web页面CSS视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

• BFC的做用

  BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

  咱们能够用BFC来阻止元素被浮动元素覆盖、阻止浏览器由于四舍五入形成的多列布局换行的状况、阻止相邻元素的margin合并等。同时，BFC还能够包含浮动元素。

• BFC的约束规则

  （1）内部的元素会在垂直方向上一个接着一个的放置。计算BFC的高度时，须要注意浮动元素也参与计算；

  （2）Box垂直方向的距离由margin决定。注意：属于同一个BFC的两个相邻的Box的margin会发生重叠；

  （3）生成BFC元素的子元素中，每个子元素的margin与包含块的左边界border相接触（对于从左到右的格式化，不然相反），就算是在浮动中也同样；

  （4）BFC的区域不会与float box重叠。

  （5）BFC至关于页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。相反也同样。

• BFC能够解决哪些问题

  margin重叠问题、文本不环绕浮动元素问题、包裹浮动元素没有高度问题（父元素塌陷问题）等。

• BFC触发方式（一种便可）

  （1）float的值不为none；

  （2）overflow的值不为visible;

  （3）display的值为table-cell、tabble-caption和inline-block之一；

  （4）position的值不为static或则releative中的任何一个；

• BFC布局与普通文档流布局区别

  普通文档流布局规则

  （1）浮动的元素是不会被父级计算高度；

  （2）非浮动元素会覆盖浮动元素的位置；

  （3）margin会传递给父级；

  （4）两个相邻元素上下margin会重叠；

  BFC布局规则

  （1）浮动的元素会被父级计算高度（父级触发了BFC）；

  （2）非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）；

  （3）margin不会传递给父级（父级触发了BFC）；

  （4）两个相邻元素上下margin会重叠（给其中一个元素增长一个父级，而后让他的父级触发BFC）；

3.CSS3有哪些新特性

新增各类CSS选择器， 新增圆角（borser-radiuis）,多列布局（multi-column layout），阴影和反射（multi-column layout），文字特效（text-shadow），线性渐变（gradient），旋转（transform）以及缩放、定位、倾斜、动画，多背景等。

4.CSS的性能优化

• 尽可能的避免使用expression表达式[IE]以及filter属性[IE]；
• CSS的样式尽量的采起缩写形式，例如给盒子margin，padding值等；
• 适当减小使用没必要要的并行规则，例如content.left{...},content.right{...}等，直接用.left{...},.right{...}代替会更加快；
• 尽可能减小规则层数，层数越多，定位越慢(很是慢)，使用一个有语义的选择器每每可以取得更好的效率；
• 利用好继承机制；
• 尽可能减小重布局以及重绘；

5.CSS预处理

css预处理器是用一种专门的语言，进行网页的样式设计，以后在被编译为正常的css文件，以供项目使用。使用css预处理语言使得css更加简洁、方便修改、可读性强、适应新强而且更易于代码的维护。

（此处将会持续更新）

---

计算机基础

编译原理

网络协议

其实前端最主要用到的网络协议主要有TCP，UDP，HTTP，FTP， IP ，ICMP，IGMP， ARP，RARP等协议。咱们能够看看以下图（摘自网页，主要是为了描述）：

1.分层对应的协议

• 传输层中，主要有TCP/UDP协议；
• 应用层中，主要有HTTP，FTP协议；
• 网络层中，主要有IP，ICMP，IGMP协议；
• 网络接口层中，主要有 ARP，RARP协议；

2.TCP三次握手和四次挥手（图片摘自百度）

先看三次握手：

第一次握手： 客户端将含有“同步序列号（SYN）”标志位的数据段发送给服务端请求连接；

第二次握手：服务器用一个带有“确认应答（ACK）”和“同步序列号（SYN）”标志位的数据段响应客户端；

第三次握手：客户端收到数据后，发送一个数据段确认收到服务器的数据段，服务器收到数据确认无误，开始传送实际数据；

四次挥手：

第一次挥手：客户端发送一个FIN和一个seq，用来关闭客户端到服务器端的数据传送，客户端进入fin_wait1状态；

第二次挥手：服务端收到FIN后，返回一个ACK给客户端，同时，将seq的值+1做为确认序号一并返回（确认序号为收到序号+1），服务端进入close_wait状态；

第三次挥手：服务端发送FIN和一个值为n的seq给客户端，用来关闭服务端的数据传输，服务端进入last_wait状态；

第四次挥手：客户端收到 FIN后， 客户端进入time_wait状态，接着发送一个ACK和一个带值为n+1的seq给服务端(确认序号为收到序号 +1 ) ，服务端进入close状态，完成四次挥手。

3.有关创建连接是三次握手，关闭的时候是四次握手的问题。

由于当服务端收到客户端的SYN链接请求报文后，能够直接发送SYN+ACK报文。其中ACK报文负责响应，SYN报文负责同步。可是在关闭链接时，当服务端收到FIN报文时，极可能并不会当即关闭socket，此时只能先回复一个ACK报文，来通知客户端，"你发的FIN报文我收到了"。只有等到服务端全部的报文都发送完了，才能发送FIN报文，所以不能一块儿发送。因此须要四步握手。

设计模式

小编我对于这块了解其实不是很深，可是我感受是，每种编程语言都有不同的设计模式。设计模式强调的偏向于一个设计问题的解决办法，能够理解为是一套能够被反复使用，供多数人知晓的，通过分类编目的，代码设计经验的总结。（有不对的地方望大佬们指正）。

设计模式和框架以及架构仍是有所区别的：

• 于框架而言，设计模式所讲的的是对单一问题的设计思路和解决方法，一个模式可应用于不一样的框架和被不一样的程序语言所实现；而框架则是一个应用的体系结构，是一种或多种设计模式和代码的混合体。设计模式的思想能够在框架设计中进行应用。
• 于架构而言，设计模式除了是对单一问题的设计思路和解决方法以外，范畴比较小；而架构是高层次的针对体系结构的一种设计思路，范畴比较大。一个架构中可能会出现多个设计模式的思想。

---

数据结构和算法

JS编译能力

手动实现前端轮子

数据结构

算法

以上的这几部分，emmm好好看书，多动脑多动手，慢慢提升吧，

---

运行环境

关于运行环境，单看标题可能下意识会有点丈二的和尚摸不着头脑的感受。多是以为范围太大，亦或者是概念模糊，其实小编也是这样。不太小编以前阅读过一篇文章，里边简略的介绍了运行环境，可分为以下几点：

1. 加载资源的形式

   有分为输入url（或跳转页面）加载html和加载html中的静态资源两种。

2. 加载一个资源的过程

   首先浏览器根据DNS服务器获得域名的IP地址，而后向这个IP的机器发送http请求，接着服务器收到、处理并返回http请求，最后浏览器获得返回内容。

3. 浏览器渲染页面的过程

   首先是浏览器根据HTML结构生成DOMTree，而后根据CSS生成CSSOM（视图模块），接着将DOM和CSSOM整合造成RenderTree（渲染树），最后根据RenderTree开始渲染和展现。注意，当遇到script时，会执行并阻塞渲染。

4. 输入url到获得html的过程

   浏览器根据DNS服务器获得域名的IP地址->向这个IP的机器发送http请求->服务器收到、处理并返http请求->浏览器获得返回内容。

5. window.onload和DOMContentLoaded区别

   window.addEventListener('load',function( ){...})//页面全部资源所有加载完才执行
   document.addEventListener('DOMContentLoaded',function( ){...})//DOM渲染完便可执行，此时图片视频可能没加载完
   复制代码

6. 性能优化

• 多用内存、缓存或其余方法；
• 减小CPU计算，减小网络请求；

要实现以上两种优化，能够从两方面入手：

• 优化资源加载：例如静态资源压缩、静态资源缓存、使用cdn、使用ssr后端渲染，数据库直接输出到html中；
• 优化渲染：在放置样式以及脚本代码时，样式最好放置在head标签内，script放置在最后（渲染机制，js会阻碍渲染，对加载页面不友好）、使用图片懒加载、减小DOM查询，对DOM查询作缓存、减小DOM操做，多个操做尽可能合并在一块儿执行、事件节流（不要频繁触发）、尽早执行操做。

7. 安全性

• 跨站脚本攻击（Cross-site scripting,简称XSS）

  是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它容许恶意用户将代码注入到网页上，其余用户在观看网页时就会受到影响。这类攻击一般包含了HTML以及用户端脚本语言。

• 跨站请求伪造（Cross-site request forgery，简称XSRF）

  是一种对网站的恶意利用。与XSS不一样，XSS利用站点内的信任用户，而CSRF则经过假装来自受信任用户的请求来利用受信任的网站。CSRF比XSS更具危险性。

预防措施：有 Token验证、Referer验证、隐藏令牌 三种。

浏览器API

推荐有须要的童鞋到MDN上去了解。

附上连接： developer.mozilla.org/zh-CN/docs/…

浏览器原理

前不久小编恰好看到知乎某位大佬写的一片关于浏览器原理的文章，感受通俗易懂，分析的透彻，有想了解的童鞋也能够去了解一下。

附上连接：zhuanlan.zhihu.com/p/47407398

Node

Node，简单的说是运行在服务器的javascript，它是一个基于Chrome javascript运行时创建的一个平台，同时也是一个事件驱动I/O服务端javascript环境，基于Google的V8引擎，V8引擎执行javascript的速度很是快，性能很是好。

想大体了解node的能够参考一下连接： www.runoob.com/nodejs/node…

想全面了解的能够把目光转向：nodejs.cn/api/assert.…

---

前端工程

项目构建

在构建前端项目的时候，须要考虑如何搭建前端框架。通常来讲，有两种方式：一是采用现有的前端框架（比较省时便捷，后期只须要按照需求往内填充业务逻辑便可）；第二种是本身来搭建项目框架。

ant design以及element等是前端常常用到的一些组件库，其中，也不乏好用的前端框架模板。例如create-react-app,react-starter-kit,react-bolierplate,ant-design-pro等,这些都是较为经常使用的模板。通常来讲，提供的模板都会有一个较为统一的文件规范，这些有须要的童鞋能够本身去ant design 的官网了解一下，小编这里就不缀述了。

官网连接： ant.design/components/…

至于如何使用，官网上有详细的讲解。除此以外，在git上clone到本地的时候，须要将其初始化再运行，这点不要忘记啦。对于刚接触前端的童鞋，再看到这部份内容，想要着手实验的时候，得先熟悉node.js的使用，切记。

如下是小编好久以前本身着手搭建的一个简易的框架，多少坑仍是本身亲脚踩过，能力才能提升。文章详细的步骤都已经写上了，有疑问的地方欢迎留言（不足之处欢迎指出）。附上连接：juejin.im/post/5b6049…

nginx

1. nginx的概念

• Nginx是由俄罗斯的程序设计师lgor Sysoev所开发一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP代理服务器；
• 它是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器，并在一个BSD-like协议下发行；
• 其特色是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好；
• 它相较于Apache\lighttpd具备占有内存少，稳定性高等优点，而且依靠并发能力强，丰富的模块库以及友好灵活的配置而闻名；
• 在Linux操做系统下，nginx使用epoll事件模型,得益于此，nginx在Linux操做系统下效率至关高。同时Nginx在OpenBSD或FreeBSD操做系统上采用相似于Epoll的高效事件模型kqueue；
• 它做为负载均衡服务：Nginx 既能够在内部直接支持 Rails和 PHP 程序对外进行服务，也能够支持做为 HTTP代理服务对外进行服务。Nginx采用C进行编写，不管是系统资源开销仍是CPU使用效率都比 Perlbal 要好不少；
• 反向代理，负载均衡。当网站的访问量达到必定程度后，单台服务器不能知足用户的请求时，须要用多台服务器集群可使用nginx作反向代理。而且多台服务器能够平均分担负载，不会由于某台服务器负载高宕机而某台服务器闲置的状况。

2. nginx的应用场景

• 应用于虚拟主机，能够实如今一台服务器虚拟出多个网站。
• 应用于http服务器，Nginx是一个http服务能够独立提供http服务。能够作网页静态服务器。
• 反向代理，负载均衡。当某一网站的访问量达到必定程度后，单台服务器不能知足用户的请求时，须要用多台服务器集群，可使用nginx作反向代理。多台服务器能够平均分担负载，不会由于某台服务器负载高宕机而某台服务器闲置的状况。

开发提速

在编写项目的过程当中，咱们在按规定的项目周期以内完成之余，还须要考虑的是项目的加载速率以及性能优化。友好的页面展现以及运行能给用户留下不错的印象，这是前端开发人员成功的一小步。

在前端开发过程当中，要想页面展现的更安全更快，须要作到如下几点：

• 减小http请求；
• 合并脚本文件；
• 指定Expires或者Cache-Control；
• 缓存ajax请求；
• 移除重复的js;
• 避免重定向；
• 使用CDN；
• 减少返回数据的体积（可以使用gzip压缩返回数据，最小化js文件和css文件，将css和js独立成外部文件）；
• 优化cookie(减少cookie的体积，合理设置Cookie域，设置合理的cookie过时时间，使用域分离)
• 优化浏览器加载（将css放在页面顶部加载，js放在页面底部加载）

持续集成

什么是持续集成？持续集成是一种软件开发实践，是指团队开发项目过程当中，集成各自所负责的项目部分到同一个地方。经过每一个成员天天至少集成一次，一天可能会集成屡次。每次集成都经过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

举个最简单的例子，项目git提交以及构建。一个前端项目由两个前端开发人员负责，每一个人负责一部分，项目在git上有个master分支（项目主分支）。开发人员拉取代码到本地，需创建一个本地分支如（如dev）。当开发人员开发过程当中，部份内容完成了须要提交，在拉取最新版本代码，合并代码无误的状况下，将本身本地创建的分支内容提交到git，确保代码无误，并入到master分支，最后构建项目。小编大概理解的是这样。

持续集成能够下降风险，减小重复。同时，不受时间地点的控制，随时能够生成部署的软件，从而提升开发效率。

版本控制

在前端开发中，版本控制也是重要的一环。

举个例子，在开发人员拉取最近的代码，而后合并提交了以后，发现了问题，这时候能够回滚到上一版本。主分支同理，在发现问题或是需求突然变动到原始版本的时候能够回退到原始任意版本。这在必定程度上为开发过程当中的突发情况提供了便利。

再举个例子：在开发过程当中，常常会变成一些内容，好比页面样式以及js。在最开始的时候，定义了一个one.css和one.js的文件并引入：

<link rel="stylesheet" href="one.css"></link>
<script src="one.js"></script>
复制代码

提交构建完以后，浏览器打开，考虑到缓存的问题，浏览器会缓存此次的样式以及js。以后需求变动，更改了一部分样式，构建完以后，打开看到样式没有变动。缘由是由于浏览器缓存了以前的样式以及js，并无更新。这时，能够选择给改变的样式以及js添加一个版本号：

<link rel="stylesheet" href="one.css?v=0.01"></link>
<script src="one.css?v=0.01"></script>
复制代码

可是每次更新代码都要手动更改版本号，这显然不合理。这时候咱们能够考虑，利用生成hash值，来判断文件内容是否变化。

须要注意的是，咱们发布项目的时候，资源文件和主文件是分开发的，资源文件部署在CDN中，主文件部署在服务器。在发布的时候，将资源文件变成非覆盖式发布，解决新版和旧版资源文件共存问题。而后先发资源文件，在资源文件部署成功后，在发主文件，这样能够避免不少问题。

<link rel="stylesheet" href="one.o3289.css"></link>
<script src="one.o3289.js"></script>
复制代码

最后代码呈现的样子。

懂了么？嗯？仍是不明白的话....

---

框架/类库

TypeScript

关于TypeScript，小编我也是趁着此次总结，去学习了一下阮一峰老师写的文档，收获颇多。

附上连接：ts.xcatliu.com/

React

关于react部分，小编用的也是这个，有js基础的能够去看看react官网,熟悉一下react的使用，代码规范以及生命周期等。

附上连接：reactjs.org/

要是刚接触前端的童鞋，能够转身先看看阮一峰老师写的这本书，再结合react官网学习。

连接：caibaojian.com/es6/

Vue

vue小编其实不是很擅长，以前跑去它家的官网看了一遍文档，当下感受还行，可是由于如今的项目通常用的是react，其实如今已是云里雾里，忘得差很少了，害。

附上连接： cn.vuejs.org/

有兴趣的童鞋能够去瞅瞅。

多端开发

对于多端开发，小编的理解实际上是这样的：

当一个项目明确了需求以后，在开发的过程当中极大程度生会多端共同配合开发。就好比一款产品，除了有后台和web端开发，还须要开发小程序以及APP，这就须要多端共同配合。

传统方式开发会花费更多的时间，写更多的代码，对于项目上线和发布都会有必定时间限制，不能作到同时发布，也须要对应着每一端，相应的开发写对应的代码。消耗更多的时间和资源的同时，开发速度和效果也没有预期的高。不过在如今的开发框架中，已经出现了许多的多端开发框架，这种基本都是用于移动端的开发。对于如今开发的需求，是大大的提高了开发者的速度，和大大减小了项目多端分布的开发短板。

如今大部分的项目，涉及到多端开发的几率很大，就好比小编最近刚结束提测的这个项目，就是web端结合微信小程序的开发（在react和微信小程序间来回摩擦，被迫切换自如诶）。可是在通常状况下，一个前端不多会有一我的负责多端开发的状况出现（也只是小编理解的通常状况，不排除小公司一我的当多我的使）。一个项目中负责web端的就只负责web端，负责小程序的会另外分配人员。

可是做为一名前端程序员（媛），对于多端开发得有一个概念性的理解。

数据流管理

鉴于小编目前用的是react,在这里就着重讲解一下react有关数据流的部分。

简单来说，react是自顶向下的单向数据流，经过setState来改变state的状态。在管理数据流部分，react常常配合redux一块儿使用，这样能够有效的避免组件臃肿的问题。同时，还能实现跨组件通讯、状态同步以及状态共享，处理异步数据流，让组件变得可预知。

redux是由flux衍生出来的，是flux的进化版。redux有三大原则：惟一数据源，保持只读状态，数据状态只能经过纯函数完成。

redux提供了store，action和reduce三个API:

1. store（Redux 应用只有一个单一的 store）

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 经过 subscribe(listener) 注册监听器；
• 经过 subscribe(listener) 返回的函数注销监听器

2. action

• 把数据从应用传到 store 的有效载荷。它是 store 数据的惟一来源，通常经过 store.dispatch() 将 action 传到 store。

3. reduce

• 指定了应用状态的变化如何响应 actions 并发送到 store ，store收到action后，须要给出一个新的状态来更新页面，这种state的计算过程就叫作reducer。

数据流过程简述： 简单的说就是，在界面中用户经过dispatch，触发action；store调用reducer，而且传入当前state和action，更新state并返回新的state；view更新。

实用库

在这里，主要列述一下小编目前用到的以及了解过的库吧，毕竟组件库啊框架之类的有不少，可是实用的确定是本身最常常用到并且用的比较顺手的。

1.前端UI组件库

• ant design
• element

2. 前端框架

• dva
• Bootstrap
• jQuery Mobile

3. 前端自动化构建工具

• Jenkins
• gulp – The streaming build system

4. 前端自动化模块管理工具

• Component
• Browserify
• RequireJS

5. 前端自动化css预处理器

• Less
• Sass

6. js框架

• Ractive.js
• Query

7. 前端框架模板（开箱即食）

• Ant Design Pro

  更多：landing.ant.design/

8. 图表绘制

• Echarts
• Highcharts
• Chart.js
• Fusioncharts
• ichartjs

9. 日期格式化

• moment.js: 巨好用（力荐）

10. Icon组件

• 阿里图标库
• Font Awesome

以上是小编目前较为常常用到的实用库。

另外，附上最近看到的一个较为全面的实用库整理的连接：www.luoxiao123.cn/1196.html

开发测试

关于前端开发测试，小编的理解是，在写完代码后检查所实现的功能是否符合项目需求，界面样式排版是否符合UI设计等。

有关前端测试，能够分为如下几种类型：

• 单元测试
• 集成测试
• 样式测试
• E2E测试
• 测试覆盖率与代码变异测试
• 代码变异测试

关于这部分，了解一下就好，毕竟还有测试组不是小哥哥小姐姐的么嘿嘿

---

项目及业务

后端技能

做为一名前端，了解一门相关的后端语言其实颇有必要，例如java/php/python等。如今不少公司面试的时候都会要求至少掌握或了解一门后台语言，技多不压身，多学习了解提高自身技能是硬道理。

主要是，掌握了基本的后台技能，在写前端项目的时候，遇到问题，跟后端沟通起来相对来讲也比较方便。

性能优化

性能优化的目的主要仍是让页面加载的更快，对用户操做响应更及时，为用户带来更好的用户体验，对于开发者来讲优化可以减小页面请求数，可以节省资源。

关于性能优化，前面小编已经有所介绍，有忘记的童鞋能够往上翻翻。

前端安全

关于前端安全，其实主要常见的仍是XSS（跨站脚本攻击）和CSRF（跨站请求伪造），这两部分文章中已经作了较为详细的解释。

在这里有一点须要注意的是“点击劫持”。

概念： 点击劫持 指第三方网站经过iframe内嵌某一个网站，而且将iframe设置为透明不可见，将其覆盖在其余通过假装的DOM上，假装的可点击DOM（按钮等）与实际内嵌网站的可点击DOM位置相同，当用户点击假装的DOM时，实际上点击的是iframe中内嵌的网页的DOM从而触发请求操做。点击劫持的最大特色是用户本身触发了点击事件，可是绝不知情。

解决方案：

• javascript 禁止内嵌
• X-FRAME-OPTIONS 禁止内嵌
• 其余辅助手段如 添加验证码

业务相关

做为一名前端工做者，小编（以组内大佬小哥为模板）列举一下与前端业务相关的事项：

• 具有良好的团队沟通技能，能按照产品给出的原型实现相关的功能，按照UI设计师给的设计图实现布局；
• 具备必定的审美，对界面颜色搭配，样式布局等有很好的把控与设计；
• 会使用PS以及切图软件等相关工具（不能遇到一点样式问题就去找设计人员，本身会的话改改更快，小编亲鉴）；

目前小编以为大概就这几个，若是以为有写漏的，欢迎下方留言。

---

总结

到这里基本结束啦。整理的过程当中，因为有些概念性的东西怕说不明白误人子弟，就在网上搜了一些例子讲解。

小编年少轻狂，以前口出狂言，立下flag说每隔两个礼拜出一篇文章，害。不过每次整理知识点，小编都能收获不少，但愿也能帮助有须要的人。仍是内句老话，如有不足，请留言指出。若对您有所帮助，emmmmm