浏览器输入url后发生的事情以及每步可以做的优化

首先总结下输入url按下回车后的大致流程：

查询url的ip地址。
建立tcp连接，连接服务器。
浏览器发起http/https请求。
服务器响应浏览器的请求。
网页的解析与渲染。

下面分析每个过程

查询url的ip地址详细过程：

浏览器解析出url中的域名。
查询浏览器的DNS缓存。
浏览器中没有DNS缓存，则查找本地客户端hosts文件有无对应的ip地址。
hosts中无，则查找本地DNS服务器有无对应的缓存。
若本地DNS服务器没有缓存，则向根服务器查询，进行递归查找。
递归查找从顶级域名开始（如.com）,一步步缩小范围，最终客户端取得ip地址。

这个过程的目的就是想知道url对应的ip地址，想加快这个过程可以从两方面考虑。

对于从未访问过的url

主要看DNS服务器 (比如阿里云，dnspod，腾讯云) 本身的解析速度，使用这几个大厂的服务，解析速度差别几乎可以忽略不计，使用哪个都可以，有条件的甚至可以搭建自己的DNS服务器。

对于二次访问的url可以利用缓存

关于DNS缓存的机制这里再啰嗦一下，一条域名的DNS记录会在本地有两种缓存：浏览器缓存和操作系统(OS)缓存。上面也说了在浏览器中访问的时候，会优先访问浏览器缓存，如果未命中则访问OS缓存，最后再访问DNS服务器，然后DNS服务器会递归式的查找域名记录，然后返回。 DNS记录中会有一个TTL值(time to live)，单位是秒，意思是这个记录最大有效期是多少，经过实验，OS缓存会参考TTL值，但是不完全等于TTL值，而浏览器DNS缓存的时间跟TTL值无关，每种浏览器都使用一个固定值。
对于浏览器缓存我们无能为力，但是可以设置下操作系统缓存，即设置TTL的值。

那么域名解析的TTL只应该设置为多少合适呢，下面有两个建议，你可以结合自己参考一下：

一.增大TTL值，以节约域名解析时间，给网站访问加速。一般情况下，域名的各种记录是极少更改的，很可能几个月、几年内都不会有什么变化。你可以增大域名记录的TTL值让记录在各地DNS服务器中缓存的时间加长，这样在更长的一段时间内，访问这个网站时，本地的DNS服务器就不需要向域名的DNS服务器发出解析请求，而直接从缓存中返回域名解析记录。国内和国际上很多平台的TTL值都是以秒为单位的，很多的默认值都是3600，也就是默认缓存1小时，这个值实在有点小了，难道会有人一个小时就改一次域名记录吗？你可以根据自己的需要把这个值适当的扩大，例如要缓存一天就设置成86400。
二.减小TTL值，减少更换空间时的不可访问时间。更换空间因为TTL缓存的问题，新的域名记录，在有的地方可能生效了，有的地方可能等上一两天甚至更久才生效。结果就是有的人访问到了新服务器，有的人访问到了旧服务器。如果原来的域名TTL值设置的小，各地的域名缓存服务器服务器就会很快的访问你域名的权威DNS解析服务器，尽快把你域名的DNS解析IP返回给查询者。这就是说如果想要解析速度，各地ISP的DNS服务器缓存你的域名，你就需要把TTL值设置大一些，如果想让域名更换空间或者IP后能尽快解析到新的IP上，就需要把TTL值设置小一些。对于IP地址相对固定，或短期内不会变更IP地址的用户来说TTL值设置的大些如几个小时或更大些为宜。调大TTL值可以显著的提高域名的解析稳定性和速度。而对于近期有计划变更IP地址的用户需要提前把TTL值改小，以便使缓存在世界各地DNS服务器上的旧域名记录迅速过期，等IP地址固定下来后再把TTL值改大。以阿里云为例，阿里云设置TTL的方法可以看这里

另外如果页面还有其他域名的，可以使用DNS预解析，这样就提前对域名进行了解析，使用方法如下：

<meta http-equiv="x-dns-prefetch-control" content="on">

另外说下修改本地的hosts文件这个，这一般只有开发同学才会用，不过在修改hosts的时候，有可能会修改完，发现没效果，这应该就是浏览器缓存，或者操作系统缓存导致的了，清除缓存就可以了。

建立tcp连接

这个过程网上其他文章讲的也不错这里就不讨论了，可以看这里

加速tcp连接的策略

笔者还没做过这方面的实践，据我了解，关于tpc加速的方法一般都是采用锐速和BBR加速，需要在服务端进行相关的配置，有兴趣的同学可以查阅相关资料，自己试下。

浏览器发请求与服务器响请求

打开浏览器的调试工具，看下NetWork，到这步的时候，还没出现任何请求，也就是还没请求到任何资源，如果这么过程慢了，就会发现浏览器左上角一直在加载，但是NetWork下没有任何请求，这是因为服务器还没把请求返回回来。影响这个过程速度的原因有以下几点：

用户本身的网络速度

这个是硬伤，可以使用某些加速软件。

页面发送的请求过多

页面第一加载，发送的请求过多，就会导致服务器的崩溃，服务器一次性处理不了这么多请求，就变呆了，所以要很长时间才给浏览器反馈。

服务器的配置

服务器本身的配置，包括带宽，CPU，内存等，服务器说到底也是一个电脑，客户端把这么多请求发送到服务器，服务器也得接收并处理，然后才能返回给客户端。

网页的解析与渲染

这一步终于在NewWork下可以看到有资源在下载了，下载的时间都会显示出来，这里以简书首页为例：

域名的加载时间好长，这时候就需要后端同学协助了，可以让后端同学进行相关优化，比如数据库方面的。
再看看其他资源的加载时间，如果是接口加载的时间长就找后端，如果是前端相关的就找前端，前端可以把常见的大文件包括html, js, css，图片，对于这些的优化html可以开启GZIP压缩，js,css，图片都进行压缩，小的图片可以使用雪碧图，或者转成base64格式的这样就减少了图片请求。
考虑到css 和js 会阻塞渲染，会把css放在头部，js放在尾部或者延迟加载。
静态资源使用缓存，缓存这个说起来也挺多的，直接引用其他作者的文章了，看这里一般情况下对于静态资源，我们打包的时候都会带上类似于hash的标识，比如

nav-logo-4c7bbafe27adc892f3046e6978459bac.png

每次打包的时候要确保变化的资源才改变hsah值，对于不变的资源，hash值就不要改变了了，不然缓存就没意义了，就是所谓的持久化缓存。