基于React16的电商后台管理系统项目--笔记

1.课前知识储备

资源加载过程

（1）URL解析

（2）DNS查询

DNS优化

在页面一加载时，就去这些域名的DNS服务器查询IP地址，并缓存下来，等到要请求这些域名下的资源时，省去了DSN查询的时间，提高了页面加载的速度。

（3）资源请求

（4）浏览器解析

 1-在加载html时，开始构建DOM，碰到一个DOM节点，就将它放在DOM树中
 2-在期间碰到一个JS文件，就需要停下构建DOM树的工作，（因为JS可以操作DOM元素，就可能导致之前构建的DOM树都白搭了，所以遇到JS时，先让它执行）
 3-在构建DOM树过程中，如果遇到style标签，DOM构建和样式加载并行
 4-DOM树构建完，构造渲染树，渲染树是DOM树和CSS样式表结合的产物，
 5-渲染树在不同浏览器中构造方式不同，chrome浏览器中webkit内核，在原来的DOM树上附属一些样式，firefox中根据DOM树和样式表构建出一个新的渲染树
 6-渲染树构建出来，每一个要显示元素的大小和布局方式也就确定了
 7-根据每个元素的大小和布局方式，计算出每个元素的位置
 8-调用浏览器负责绘制的部分，将元素按照对应的样式和位置绘制在屏幕上

---

面试题：在浏览器中输入一个网址，敲下回车后发生了什么？

1. DNS解析
2. TCP连接
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器解析渲染页面
6. 连接结束关闭TCP连接

1.DNS解析：寻找哪台机器上有你需要的资源的过程
在输入www.baidu.com时，其实不是百度网站真正意义上的地址。
互联网上每一台计算机的唯一标识是它的IP地址。
IP地址不方便记忆，用网址www.baidu.com便于记忆。
网址www.baidu.com到IP地址的转换就是DNS解析（翻译的角色）。

2.TCP连接：三次握手。首先客户端向服务器发送请求是否可以建立连接，服务器同意后，客户端回馈服务器的响应，就是3次通话。

3．发送HTTP请求：客户端向服务器发送http请求，http请求内容是
 请求行：方法+地址+http版本
 请求头
 请求体

4． 服务器处理请求并返回HTTP报文
 响应行：http版本+状态码+状态描述
 响应头
 响应体

状态码

5． 浏览器解析渲染页面

浏览器接收到htlm, css,js文件后，将这些信息渲染到客户端页面上。

浏览器是一个边解析边渲染的过程。
 浏览器解析HTML文件构建DOM树
 解析CSS文件构建渲染树
 完成后，浏览器开始布局渲染树，将其绘制到屏幕上。

回溯（reflow）和重绘（repain）
Reflow:DOM节点中的各元素都是以盒模型的形式存在，浏览器需要计算其大小和位置
Repain：当盒模型的位置、大小及其他属性（颜色、字体）确定后，浏览器开始绘制内容

页面首次加载，必然reflow和repain。
reflow和repain非常消耗性能，造成页面卡顿，尽可能减少这些操作。

6.连接结束关闭TCP连接

---

ES6基础知识



 1-箭头函数不仅仅是对function进行简化，比如箭头函数没有自己的指针，它继承外层作用域
 2-不能用作构造函数，也就是不能用new生成一个对象
 3-箭头函数没有prototype属性


1-Promise的出现是为了解决异步回调函数层层嵌套的问题，
2-以前，在前一个异步回调函数中嵌套下一个异步回调函数，多个，层级很深，不利于阅读
3-Promise支持异步的链式操作，写出的代码更加清晰易读

子类没有this对象，如果想在子类里调用父类的方法，需要在子类的构造方法里调用父类的构造方法，这样就可以把父类的this对象继承过来

---

本地存储

传统的本地储存：cookie和session
HTML5中提出的本地存储：localStorage和sessionStorage


cookie
 1-前端和后端的数据交互&#