1.首先会进行 url 解析，根据 dns 系统进行 ip 查找。
1.1 浏览器中输入www.baidu.com 域名，操作系统会先查hosts件是否有记录，有的话就会把相对应映射的IP返回。
1.2 hosts文件没有就去查本地dns解析器有没有缓存。（这个我没答上来）
1.3 然后就去找我们计算机上配置的dns服务器上有或者有缓存，就返回
1.4 还没有的话就去找根DNS服务器(全球13台，固定ip地址)，然后判断.com域名是哪个服务器管理，如果无法 解析，就查找.baidu.com服务器是否能解析，直到查到www.baidu.com的IP地址
2.查找到IP之后，就是http协议的三次握手（以及后面会涉及到四次分手）
第一次握手：主机A发送位码为SYN＝1的TCP包给服务器，并且随机产生一个作为确认号（这是tcp包的一部分），主机B收到SYN码后直到A要求建立连接;
第二次握手：主机B收到请求后，向A发送确认号（主机A的seq+1），syn=1，seq = 随机数 的TCP包；
主机A收到后检查确认号是否正确，即第一次A发送的确认号是否+1了，以及位码ack是否为1，若正确，主机A会再发送确认号(主机B的seq+1)，ack=1，主机B收到后确认seq值与ack=1则连接建立成功。
3.建立完链接，去请求html文件，如果html文件在缓存里面浏览器直接返回，如果没有，就去后台拿
关于缓存
浏览器首次加载资源成功时，服务器返回200，此时浏览器不仅将资源下载下来，而且把response的header(里面的date属性非常重要，用来计算第二次相同资源时当前时间和date的时间差)一并缓存;
下一次加载资源时，首先要经过强缓存的处理，cache-control的优先级最高，比如cache-control：no-cache,就直接进入到协商缓存的步骤了，如果cache-control：max-age=xxx,就会先比较当前时间和上一次返回200时的时间差，如果没有超过max-age，命中强缓存，不发请求直接从本地缓存读取该文件（这里需要注意，如果没有cache-control，会取expires的值，来对比是否过期），过期的话会进入下一个阶段，协商缓存
协商缓存阶段，则向服务器发送header带有If-None-Match和If-Modified-Since的请求，服务器会比较Etag，如果相同，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200;
协商缓存第二个重要的字段是，If-Modified-Since，如果客户端发送的If-Modified-Since的值跟服务器端获取的文件最近改动的时间，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200;
4.返回html之后，会对html进行解析
- 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
- 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
- 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
- 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
- 渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
- 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
- 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；
5.页面渲染优化
- HTML文档结构层次尽量少，最好不深于六层；
- 脚本尽量后放，放在前即可；
- 少量首屏样式内联放在标签内；
- 样式结构层次尽量简单；
- 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；
- 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
- 动画尽量使用在绝对定位或固定定位的元素上；
- 隐藏在屏幕外，或在页面滚动时，尽量停止动画；
- 尽量缓存DOM查找，查找器尽量简洁；
- 涉及多域名的网站，可以开启域名预解析
305纪念册
为什么data是一个函数
版权声明：《 从url输入到返回请求的过程 》为胡光喆原创文章，转载请注明出处！
最后编辑:2021-9-28 07:09:45