html执行过程

若head标签中有script标签或link标签，则开始按顺序渲染或加载js，css

关闭TCP连接或继续保持连接

未过期

包括script引用的外部js文件、link引用的css文件和html中直接引用的图片

继续解析，直到遇到html结束标签

数据经过应用层、传输层、网络层、物理层逐层封装，传输到下一个目的地。

浏览器匹配出所有引用文件，使它们都处于挂起状态。

将URL与缓存进行比对如果请求的页面在缓存中且未过期

浏览器拿到index.html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载解析成对应的树形数据结构DOM树、CSS规则树，Javascript脚本通过DOM API和CSSOM API来操作DOM树、CSS规则树。

其中，每一层的作用如下。应用层：为应用进程提供服务，加应用层首部封装为协议数据单元。传输层：实现端到端通信，加TCP首部封装为数据包，TCP控制了数据包的发送序列的产生，不断的调整发送序列，实现流控和数据完整。网络层：转发分组并选择路由；加IP首部封装为IP分组。数据链路层：相邻的节点间的数据传输；加首部[mac地址]和尾部封装为帧。物理层：具体物理媒介中的数据传送，数据转换为比特流。

浏览器向服务器发送HTTP请求

缓存是否过期

为什么需要进行三次握手，而不是两次握手？原因是两次握手不可靠。比如，浏览器发送一个连接请求包A，但包A在半路上堵车了，浏览器就认为包A丢失了，所以重新发生一个请求包B给服务器。服务器收到请求，建立连接。两端进行通信，结束后关闭连接。但是这时候，包A到达了服务器，服务器不知道这是一个无效的包，所以进行响应。这时两次握手已经完成，两端就建立起一个无效的连接。但浏览器认为自己没发出请求，所以不会回应，这样就让服务器白白等待回应，浪费了服务器资源。而三次握手的机制下，浏览器知道自己并没有请求连接，会发送拒绝包给服务器，服务器收到回应后也会结束这次无效的连接。

解析mate信息，构建基本dom树

解码

当缓存过期时，浏览器会向服务器发起请求询问资源是否真正过期，这就是缓存协商。对应http首部字段：last-modified，Etag-last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。当然，用该方法也存在问题，比如修改时间有变化但实际内容没有变化，而服务器却再次将资源发送给浏览器。所以，使用Etag进行判断更好。-Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。--缓存协商的过程需要发起一起HTTP请求，如果返回304则继续使用缓存。对于移动端一次请求还是有代价的，所以我们需要避免304。对于很少进行更改的静态文件，可以在文件名中加入版本号，如get.v1.js，并且把Cache-Control的max-age设置成一年半载，这样就不会发送请求。需要注意的是，当这些文件更新的时候，我们需要更新其版本号，这样浏览器才会到服务器下载新资源。

如果是可以缓存的，这个响应则会被存储起来

URL包含的信息：协议、网络地址:端口号、资源路径、查询字符串？、片段标识符#

缓存分为彻底缓存和缓存协商，这里的确认是否过期是指彻底缓存（缓存失效之前不再需要跟服务器交互）。

解析html

服务器收到请求，从它的文档空间中查找资源并返回HTTP响应

1.若遇到link标签，开始加载css文件2.同时顺序解析DOM元素，并构建DOM树3.若后面有js脚本，则脚本会被阻塞，直到css加载并解析完毕才会执行js脚本4.若后面有外部js脚本，则并行加载js脚本，但会等css加载并解析完毕才会执行外部脚本。加载前会先将此script标签解析到Elements中5.若碰到img标签，则加载图片资源。但不会等待下载，还是继续向下解析。解析的同时若图片下载完则会占空间

浏览器接受 HTTP 响应，检查 HTTP header 里的状态码，并做出不同的处理方式

1.关于script和link的书写顺序，这样定义：link和style在head里，script在body最后。这是因为js一般用来操作DOM元素，而html会动态渲染样式。2.若script放在body之前任何位置，要是有对DOM的操作，包括样式操作，浏览器会重新去渲染这个元素，然后才继续向下渲染。要是此时DOM不存在则会报错。3.script放在body结尾处时，所有的DOM元素都已渲染完，此时js再操作DOM不会报错，且减少了DOM渲染次数。 

渲染

浏览器接收URL

已过期/无缓存

下一个目的地接受到数据后，从物理层得到数据然后经过逐层的解包 到 链路层 到 网络层，然后开始上述的处理，在经网络层 链路层 物理层将数据封装好继续传往下一个地址。到达最终目的地，再经过5层结构，逐层剥离，最终将数据送到目的主机的目的端口。

为什么需要进行四次挥手？第一次挥手是浏览器发完数据后，发送FIN请求断开连接。第二次挥手是服务器发送ACK表示同意，如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥，但考虑到服务器可能还有数据要发送，所以服务器发送FIN应该放在第三次挥手中。这样浏览器需要返回ACK表示同意，也就是第四次挥手。简而言之，一端断开连接需要两次挥手（请求和回应），两端断开连接就需要四次挥手了。

如果网络地址不是一个 IP 地址，通过DNS解析域名返回一个IP地址