码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-08 09:23:44      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:工具   持久化   软件   img   lan   策略   网站   文件   浏览器缓存   

首先总结下输入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值就不要改变了了,不然缓存就没意义了,就是所谓的持久化缓存。

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

标签:工具   持久化   软件   img   lan   策略   网站   文件   浏览器缓存   

原文地址:https://www.cnblogs.com/yalong/p/11484291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!