前端学习须知

前端学习

	   首先在学习前我们要了解下预备的知识！

从输入网址到页面呈现都发生了什么？

一、网络通讯

第一步：
1、当我们在地址栏输完域名进行服务器访问时，首先会先查找本地的hosts文件里面是否会有此域名的ip映射关系，如果没有则继续查找本地DNS缓存中是否还有这个映射关系，经过几个缓存的查询，如果均没有找到，那么DNS服务器就会从根域名、顶级域名进行递归的查找最后找到对应的ip地址。

2、http发送请求报文
请求报文包括：报文行、空行、报文主体（一般是发送的数据），第一步和第二步都属于应用层

第二步：
1、传输层（TCP协议）
首先TCP会将请求的报文进行分割并且打上标记，通过TCP的三次握手，建立和服务器的连接

2、网络层（IP协议）
把TCP分割好的各种数据包传送给接收方。

	 **TCP和IP的关系**：IP提供基本的数据传送，而TCP对这些数据包做进一步加工，制定规则和约定，如提供了端口号等

TCP/IP协议是一个大的集合，包含了TCP、IP、UDP、FTP等

第三步：
将请求报文发送给服务器，然后服务器接收到报文，将响应报文原路返回式的传给客户端

二、页面渲染

1、DOM构造
通过浏览器的解析器来解析html文件构建DOM树，然后将接收到的css代码，通过css解析器构建出样式表规则，将这些规则分别放到对应的DON树节点上得到一颗带有样式属性的DOM树

2、布局
浏览器按照从上到下从左到右的顺序读取DOM树的文档节点，这些节点按顺序存放到一条虚拟的传送带上，这条流动的传送带就是文档流，如果其中的A节点还有子节点，那么子节点也要按照顺序存放到A节点盒子内部，文档流排完之后开始获取css属性作为盒子的包装说明，然后把盒子在仓库里一 一摆放如图：

3、绘制页面
布局完成之后在页面上是看不到任何内容的，浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化 ，因此最后一步就是将所有的内容绘制出来完成页面的渲染。

总结步骤：

输入的网址在通过DNS解析后得到服务器地址，浏览器向服务器发送http请求，经过TCP三次握手确认链接后，服务器将需要的代码发回浏览器，浏览器接收到代码后进行解析，经过三大步骤：DOM构造、布局、绘制页面，最终展现为我们看到的网页。