一、http请求当我们在web浏览器的地址栏中输入 www.baidu.com然后回车到底发生了什么过程概览1.对www.baidu.com这个网址进行DNS域名解析得到对应的IP地址2.根据这个IP找到对应的服务器发起TCP的三次握手3.建立TCP连接后发起HTTP请求4.服务器响应HTTP请求浏览器得到html代码5.浏览器解析html代码并请求html代码中的资源如js、css图片等先得到html代码才能去找这些资源6.浏览器对页面进行渲染呈现给用户注1.DNS域名解析采用的是递归查询的方式过程是先去找DNS缓存-缓存找不到就去找根域名服务器-根域名又会去找下一级这样递归查找之后找到了给我们的web浏览器2.为什么HTTP协议要基于TCP来实现 TCP是一个端到端的可靠的面相连接的协议HTTP基于传输层TCP协议不用担心数据传输的各种问题当发生错误时会重传3.最后一步浏览器是如何对页面进行渲染的 a解析html文件构成 DOM树b解析CSS文件构成渲染树 c边解析边渲染 dJS 单线程运行JS有可能修改DOM结构意味着JS执行完成前后续所有资源的下载是没有必要的所以JS是单线程会阻塞后续资源下载下面我们来详细看看这几个过程的具体细节1.域名解析a首先会搜索浏览器自身的DNS缓存缓存时间比较短大概只有1分钟且只能容纳1000条缓存b如果浏览器自身的缓存里面没有找到那么浏览器会搜索系统自身的DNS缓存c如果还没有找到那么尝试从 hosts文件里面去找d在前面三个过程都没获取到的情况下就递归地去域名服务器去查找具体过程如下DNS优化两个方面DNS缓存、DNS负载均衡2.TCP连接三次握手拿到域名对应的IP地址之后User-Agent一般指浏览器会以一个随机端口1024端口65535向服务器的WEB程序常用的有httpdnginx等的80端口。这个连接请求原始的http请求经过TCP/IP4层模型的层层封包到达服务器端后这中间有各种路由设备局域网内除外进入到网卡然后是进入到内核的TCP/IP协议栈用于识别连接请求解封包一层一层的剥开还有可能要经过Netfilter防火墙属于内核的模块的过滤最终达到WEB程序最终建立了TCP/IP的连接图解具体可以翻阅前面关于 TCP三次握手和四次挥手的博客3.建立TCP连接之后发起HTTP请求HTTP请求报文由三部分组成请求行请求头和请求正文请求行用于描述客户端的请求方式请求的资源名称以及使用的HTTP协议的版本号例GET/books/java.html HTTP/1.1请求头用于描述客户端请求哪台主机以及客户端的一些环境信息等注这里提一个请求头 ConnectionConnection设置为 keep-alive用于说明 客户端这边设置的是本次HTTP请求之后并不需要关闭TCP连接这样可以使下次HTTP请求使用相同的TCP通道节省TCP建立连接的时间请求正文当使用POST, PUT等方法时通常需要客户端向服务器传递数据。这些数据就储存在请求正文中GET方式是保存在url地址后面不会放到这里4.服务器端响应http请求浏览器得到html代码HTTP响应也由三部分组成状态码响应头和实体内容状态码状态码用于表示服务器对请求的处理结果列举几种常见的200没有问题 302要你去找别人 304要你去拿缓存 307要你去拿缓存 403有这个资源但是没有访问权限 404服务器没有这个资源 500服务器这边有问题若干响应头响应头用于描述服务器的基本信息以及客户端如何处理数据实体内容服务器返回给客户端的数据注html资源文件应该不是通过 HTTP响应直接返回去的应该是通过nginx通过io操作去拿到的吧5.浏览器解析html代码并请求html代码中的资源浏览器拿到html文件后就开始解析其中的html代码遇到js/css/image等静态资源时就向服务器端去请求下载会使用多线程下载每个浏览器的线程数不一样这是时候就用上 keep-alive特性了建立一次HTTP连接可以请求多个资源下载资源的顺序就是按照代码里面的顺序但是由于每个资源大小不一样而浏览器又是多线程请求请求资源所以这里显示的顺序并不一定是代码里面的顺序。6.浏览器对页面进行渲染呈现给用户最后浏览器利用自己内部的工作机制把请求的静态资源和html代码进行渲染渲染之后呈现给用户浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树然后解析CSS文件构建渲染树等到渲染树构建完成后浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在这些都需要浏览器去计算其位置和大小等这个过程称为relow;当盒模型的位置,大小以及其他属性如颜色,字体,等确定下来之后浏览器便开始绘制内容这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的尤其是在移动设备上它会破坏用户体验有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行JS有可能修改DOM结构意味着JS执行完成前后续所有资源的下载是没有必要的所以JS是单线程会阻塞后续资源下载二、from memory cache与from disk cache在chrome浏览器中的控制台Network中size栏通常会有三种状态1.from memory cache2.from disk cache3.资源本身的大小(如1.5k)状态状态说明200form memory cache不请求网络资源资源在内存当中一般脚本、字体、图片会存在内存当中200form disk ceche不请求网络资源在磁盘当中一般非脚本会存在内存当中如css等200资源大小数值从服务器下载最新资源304报文大小请求服务端发现资源没有更新与服务器资源进行一次对比并一致使用本地资源但是以上这种也只是针对chrome浏览器对于firefox浏览器没有这样的一说即Firefox下会缓存资源但是每次都会请求服务器对比当前缓存是否更改chrome不请求服务器直接拿过来用这有可能是chrome加载快一点的原因吧参考https://blog.csdn.net/Garrettzxd/article/details/80684880https://www.cnblogs.com/xuzekun/p/7527736.html