从URL输入到页面展现

URL的域名协议

http  :搜索网络资源
https :加密网络资源
file  ：本地资源

本地电脑IP

127.0.0.1

上不了网，输入

谷歌：8.8.8.8
国内：114.114.114.114

从URL输入到页面展现步骤

1.输入地址
2.解析域名-浏览器查找域名的IP地址
3.服务器处理请求
4.服务器返回一个HTTP响应
5.浏览器显示HTML
6.浏览器处理-浏览器发送请求，获取嵌入HTML中的资源（CSS,JS等）

1.输入地址

http:// www. baidu.com : 8080 / script/jquery.js
(协议 -子域名 - 主域名 - 端口号 - 请求资源地址)

2.解析域名-（1）浏览器查找域名的IP地址

1.浏览器发出请求后，首先解析名，查看本地硬盘的Hosts文件，是否有相对应的规则，有就用本地Hosts文件的IP地址。
2.如果本地Hosts文件没有相对应的IP地址，浏览器会发出一个 DNS请求到本地DNS服务器 。
3.本地DNS服务器会首先查询它的缓存记录，如果缓存中有这记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
4.DNS根服务器如果没有，就向域名服务器发出请求，这种过程是迭代的过程。。
5.向域名服务器发出请求后，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

解析域名图.png

DNS

DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。

递归分解图

递归.png

迭代分解图

迭代.png

2.解析域名-（2）浏览器向 web 服务器发送一个 HTTP 请求

浏览器向 web 服务器发送一个 HTTP 请求,浏览器会以8080端口发起TCP的连接请求。等连接到达服务器端口后，进入到网卡，然后是进入到内核的TCP/IP协议栈，经过防火墙，最终到达WEB程序，最终建立了TCP/IP的连接。
客户端向服务器发起http请求的时候，会有一些请求信息，请求信息包含三个部分：

（1）请求的第一行是“方法URL议/版本”：GET/sample.jsp HTTP/1.1
（2）请求头(Request Header)
　　 请求头包含许多有关的客户端环境和请求正文的有用信息。例如，请求头可以声明浏览器所用的语言，请求正文的长度等。
（3）请求正文
请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文

4.服务器返回一个HTTP响应

经过前面的步骤，服务器收到了我们的请求，也处理我们的请求，到这一步，它会把它的处理结果返回，也就是返回一个HTPP响应。
HTTP响应与HTTP请求相似，HTTP响应也由3个部分构成，分别是：

(1).状态行：
状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。
格式: HTTP-Version Status-Code Reason-Phrase CRLF
(2).响应头：
响应头部：由关键字/值对组成，每行一对，关键字和值用英文冒号":"分隔
(3).响应正文和响应头之间有一行空格，表示响应头的信息到空格为止

5.浏览器显示HTML

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
浏览器在解析html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。在解析过程中，如果遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载。
　　解析过程中，浏览器首先会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。
　　DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。
　　页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

浏览器处理过程.png

6.浏览器处理

当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。因为JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。所以我明平时的代码中，js是放在html文档末尾的。
　　JS的解析是由浏览器中的JS解析引擎完成的，比如谷歌的是V8。JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。
　　JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。

还有第三次握手协议，下次学完更新。