记得某位前端博主的一句话：“其实学前端，最后都变成了学全端”。这句话对我影响很大。

是呀，我们最开始，只是想学习前端，但发现多的东西越来越多，一环套一环，哪一种技术都不能少。

网上总结的前端学习路线基本都差不多，但总感觉不是那么具体，因此，我详细记录一下

---

一、前端基础三件套（html+css+js）

要想学习前端，html、css、javascript这三样是基础，之后学习的所有东西都是以此为基础进行拓展，封装的。

前端=结构+样式+交互

1.HTML

HTMlL就是超文本标记语言，通俗一点就是为了搭建页面结构

首先说html，他算是这三种中比较简单的一个，因为东西比较固定，包括语义化标签

2.CSS

CSS是层叠样式器，是为了装饰我们的页面，让我们的页面更加好看。

记得一次面试时，面试官问我，你觉得基础三件套里面那个最难，我自认为是js，但是他告诉我的是css，他说调样式是最难，最考验耐心的

3.JavaScript

JavaScript是一种具有函数优先的轻量级，解释性 或即时编译型的编程语言，为了让我们实现交互的一些功能，丰富网站的内容

广大的前端工程师都认为js是最难学的，因为包含的东西很多

我们通过基础三件套就可以实现网页的构造了。包括静态和动态

二、ES6

es6是很重要的一块，后续补充。。。

三、UI基础知识

作为前端，我们起码要懂得一些设计方面的基础知识和基本素养，比如简单的ps操作，切图和颜色值（比如改革字，隐藏个图层，改个尺寸），屏幕适配方案等

四、学习页面渲染原理

页面渲染的原理及流程

浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？

根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

构建渲染树。

页面的重绘与重排（也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或者是重排。

一、构建DOM树及CSSOM树

1.1构建DOM树

DOM节点树中节点与HTML文档中内容一一对应，DOM树构建过程：读取HTML文档，将字节转换成字符，确定tokens（标签），再将tokens转换成节点，以节点构建DOM树。

HTML文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系等、兄弟关系等，彼此相连，构成DOM树。最常见的几种节点有：文档节点、元素节点、文本节点、属性节点、注释节点。

1.2构建CSSOM树

CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSSS中各节点之间同样拥有层级关系，如父子关系等、兄弟关系等，彼此相连，构成CSSOM树。在构建DOM树的过程中，与HTML文档head标签中遇到link标签，该标签引用了一个外部CSS样式表。由于预见需要利用该CSS资源来渲染页面，浏览器会立即发出对该CSS资源的请求，并进行CSSOM树的构建。

CSSOM树构建过程与DOM树构建流程一致：读取HTML文档，将字节转换成字符，确定tokens（标签），再将tokens转换成节点，以节点构建CSSOM树。

.CSS文件，又名层叠样式表。当CSSOM树生成节点时，每一个节点首先会继承其父节点的所有样式，层叠覆盖，然后再以“向下级联”的规则，为该节点应用更具体的样式，递归生成CSSOM树。

二、构建渲染树

渲染树由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉、并行构建。因此会一边加载，一边解析，一边渲染的工作现象。

构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。

三、页面的重绘（repaint）与重排（reflow）

3.1重绘

重绘：屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘。

3.2重排

重排: 也有称回流，当渲染树节点发生改变，影响了节点的几何属性，导致节点位置发生变化，此时触发浏览器重排，需要重新生成渲染树，重新布局，即重排。

注意：重排必将引起重绘，而重绘不一定会引起重排。

何时会引起重排？

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

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

元素位置改变——display、float、position、overflow等；

元素尺寸改变——边距、填充、宽度、高度；

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

页面渲染初始化；

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

3.3如何减少和避免重排

重排的成本比重绘高的多的多。一个节点的重排很有可能导致子节点，甚至父节点以及兄弟节点的重排。在一些高性能的电脑上也许没什么，但重排发生在手机上，那么这个过程是延慢加载和耗电的

直接改变className，如果动态改变样式，则使用cssText(考虑没有优化的浏览器)；

让要操作的元素进行“离线处理”，处理完后一起更新；a、使用DocumentFragment进行缓存操作，引发一次回流和重绘；

b、使用display:none技术，只引发两次回流和重绘；

c、使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

不要经常访问会引起浏览器flush队列的属性，如果你确定要访问，利用缓存；

让元素脱离动画流，减少回流的Render Tree的规模；

五、学习从浏览器请求到响应的过程

1.浏览器解析用户输入的URL,生成一个HTTP格式的请求。

2.先根据URL域名从本地hosts文件查找是否有映射ip,如果没有将域名发送给电脑所配置的DNS进行域名解析,得到ip的地址。

3.浏览器通过操作系统将请求通过四层网络协议发送出去。

4.途中可能会经过各种路由器,交换机,最终到达服务器。

5.服务器收到请求后,根据请求所指定的端口,将请求传递给绑定了该端口的应用程序,比如8080被tomcat占用了。

6.tomcat接受到请求数据后,按照http协议的格式进行解析,解析得到所要访问的servlet.

7.然后servlet来处理这个请求,如果是SpingMVC中的DispatcherServlet,那么则会找到对应的Controller的方法,并执行该方法得到结果。

8.Tomcat得到响应结果后封装HTTP响应的格式,并将再次通过网络发送给浏览器所在的服务器。

9.浏览器所在的服务器拿到结果后再传递给浏览器,浏览器则负责解析并渲染。

六、学习向服务器发送数据请求

比如说ajax,fetch,axios

与服务器进行数据交互的方法——ajax，axios,fetch

1.与服务器交互的类型

同步交互：

理解1：同步是阻塞模式，同步交互时，两个线程的运行是相关的，a线程在运行时，b线程要阻塞等待，直到a线程运行完毕

理解2：同步交互时，客户端发出请求后，需要等待服务器相应结束以后，才能发出第二个请求。

例：再做用户登录功能时，必须检测用户名密码都正确以后才能进入系统。

异步交互：

理解1：异步是非阻塞模式，异步交互时，两个线程的运行不相关，a线程运行时，b线程也正常运行。

理解2：异步交互时，客户端发出请求后，不需要等待服务器相应结束，就可以发出第二个请求。

例：用户登录系统后，系统会刷新系统页面数据，此时存在多个数据接口与服务器进行交互，比如文字显示部分的数据接口已经交互完成，但图片显示部分还在加载（可能接口还未来得及发出请　　　　　　　求，也可能接口发出请求后还未获得响应）。

2.交互方式之ajax

定义：AJAX是“Asynchronous Javascript And XML”的缩写，翻译成中文就是“异步Javascript和XML”。即使用js语言与服务器进行交互，传输的数据为XML(不只是XML)

实现：

1.XMLHttpRequest对象

用于在后台与服务器进行交互数据

创建XMLHttpRequest对象

const variable1 = new XMLHttpRequest();

老版本浏览器

 //const variable2 = new ActiveObject('Microsoft.XMLHTTP');

 //为了兼容:
    let xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveObject('Microsoft.XMLHTTP');
    }
    或者
    function createXMLHttpRequest(){
      try{
            return new XMLHttpRequest();
          }catch(e){
             return new ActiveObject('Microsoft.XMLHTTP')
           }          
    }

2.向服务器发送请求

1 此时用到XMLHttpRequest对象的open()和send()方法：open(),send();

open(method,url,async)
　　method:请求类型GET,POST,PUT
　　url：请求地址
     async:true(异步)或false(同步)
send(string)
     string:仅用于POST请求。 

3.服务器响应：

如果想获得来自服务器的相应，请使用XMLHttpRequest对象的responseText或者responseXML。

4.onreadystatechange

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息,状态从0-4发生变化。

0：请求未初始化，

1：服务器连接已经建立，

2：请求已经接收，

3：请求处理中，

4：请求已完成，且响应已就绪。

另外服务器的状态码：

200：‘成功’，404：‘未你找到页面’，500：服务器内部错误，401：访问资源的权限不足，等；

5.最终实现

function creatXmlHttpRequest() {
      let xmlHttp
      try {
        xmlHttp = new XMLHttpRequest();
      } catch (e) {
        xmlHttp = new ActiveXObject('Microsift.XMLHTTP')
      }
      return xmlHttp;
    }
    let xmlHttp = creatXmlHttpRequest();
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readystate === 4 && xmlhttp.status === 200) {
        document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET", "url", true);
    xmlhttp.send();

/*
创建XMLHttpRequest对象；
调用open()方法打开与服务器的连接；
调用send()方法发送请求；
为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在
XMLHttpRequest的状态改变时被调用；通常我们只关心状态为4的时候。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在
readyState为4时才能获取到！
*/

jQuery ajax实现：

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {}, error: function () {} });

注意：

1.ajax使用javascript技术向服务器发送异步请求，无须刷新整个页面（性能提升）

2.ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大

3.因为ajax是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

4.JQueryajax基于原生的XHR开发，另外JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理.（JQueryajax 不符合现在前端MVVM的浪潮）

5.MVVM 的核心是 ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

3.交互方式之axios

定义：基于promise用于浏览器和node.js的http客户端

安装：

1.npm 安装： npm install axios

2.bower安装：bower install axios

3.CDN引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

实现方式：

axios({
    method: method,    //method:GET,POST,PUT
    url: url,         //请求地址
    data:data,     //请求参数  {username:'eee',password:'123456'};
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});    

另外一种方式

GET

axios.get('/getData?ID=12')
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});

或者：

axios.get('/getData'，{params:{ID:12}}})
　　.then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});

POST

axios.post('/login',{
　　name:'chenke',
　　password:'123456'
}).then(function(response){
　　console.log(response)
}).catch(function(e){console.log(e)});

同时执行多个并发请求：

function getData1(){
   return axios.get('/getData?ID=19');  
}

function getData2(){
   return axios.get('/getData?ID=20');  
}

axios.all([getData1(),getData2()])
.then(axios.spread(function(response1,response2){
    //两个请求都执行完成。
}))

注意：

1.从node.js创建http请求，支持Promise API,客户端支持防止CSRF（跨站请求伪造）

2.能转换请求和响应数据，能拦截请求和响应，能自动转换JSON数据，也能取消请求。

4.交互方式之fetch

和XMLHttpRequest(XHR)一样，Fetch也是浏览器的原生API(没有使用XMLHttpResquest),jquery的ajax其实是封装了XHR.

实现：

fetch('/servers/getData',{ID='1'})   //fetch(url,options)
    .then((response)=>{
      console.log(response);
       return response;
}).catch(e=>{
    console.log(e);
    return e;
})    

/*
1.fetch api返回的是一个promise
2.options:
-method:HTTP请求方法，默认GET
-body:请求参数
-header(Object):请求头，默认为{}
-credentials:默认为omit，忽略的意思，也就是不带cookie,还有两个参数，same-origin,意思是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie
*/

fetch优点：

1.写法更简单，基于标准promise实现，脱离XHR,是ES里的实现方式，支持asyn/await。

fetch缺点：

1.fetch只对网络请求报错，对400,500都当做成功的请求，服务器返回4xx(400,401等),5xx错误码时并不会reject,只有其他的网络错误导致请求不能完成时，fetch才会被reject.

2.fetch默认不带cookie,需要在options里添加配置项，{credentials：‘include’}

3.fetch没有办法原生检测请求的进度，而XHR可以。

4.fetch不支持abort,不支持超时控制，使用setTimeOut及Promise.reject实现的超时控制并不能阻止请求过程继续在后台运行，浪浪费流量。

六、学习服务器的相关知识

如何搭建服务器(node搭建服务器，以及CRUD)，以及服务器的基本原理，还有其他服务器比如nginx

node其实是一个后端语言，但是近两年前端用的比较多，不要求深入理解，会基本的使用即可，比如说我们有时需要自己搭建服务器，做一些简单的增删改查

七、学习关系型数据库和非关系型数据库

主要就是Mysql和MongoDB，后续完善。。。

八、学习vue框架

其实可以在学完基础三件套，并且掌握熟练后，了解使用vue，vue的学习可以直接按照官方文档和中文社区

项目实战

无论前面学了多少东西，我们最终的目的就是能在实际项目中灵活使用。要想技术得到提升，我们就必须要拿多个项目来沉淀自己，在项目中发现问题，解决问题，提升能力。

主要是H5、app、小程序这三类项目，后续会补充。。。