从输入一个url到加载页面发生了什么?

  惭愧了,很久之前被面试的时候也有面试官问了我这个问题,但是当时回答的很不满意,于是回头看了很多资料,现在也整理一下。

  大致可总结为以下几个步骤:

  1. DNS解析。

  2. TCP链接。

  3. 发送HTTP请求。

  4. 服务器处理并且返回HTTP请求。

  5. 浏览器渲染界面。

  6. 连接结束

一 DNS解析

  简单点说就是寻找域名对应的IP的这个过程。在这个过程中经历了一下几个环节,浏览器缓存=>系统缓存=>路由器缓存=>IPS服务器缓存=>根域名服务器缓存=>顶级域名服务器缓存=>主域名服务器缓存。

  1. 浏览器缓存。在谷歌浏览器下搜索chrome://net-internals/#dns,可以看到dns缓存信息。

  2. 系统缓存。系统缓存可以在命令行中输入 vi  /etc/hosts (linux中),查看,并且设置,当然可以设置假的,用于本地调试。

  DNS负载均衡

  DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等,这种过程就是DNS负载均衡,又叫做DNS重定向。大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术,DNS服务器会返回一个跟用户最接近的点的IP地址给用户,CDN节点的服务器负责响应用户的请求,提供所需的内容。

二 TCP连接

  三次握手,确保连接可靠性。

三 HTTP相关

  当服务器与主机建立了连接之后,下面主机便与服务器进行通信。网页请求是一个单向请求的过程,即是一个主机向服务器请求数据,服务器返回相应的数据的过程。

  1. 浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;
  2. 服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
  3. 服务器将得到的 HTML 文件发送给浏览器;
  4. 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
  5. 在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML ;

原文地址:https://www.cnblogs.com/zhouwenbo/p/8404259.html

时间: 2024-10-10 13:50:58

从输入一个url到加载页面发生了什么?的相关文章

笔试常考--浏览器输入一个URL点击回车之后发生了什么

解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段. DNS解析: 查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到, 检查系统缓存,检查hosts文件,这个文件保存了一些以前访问过的网站的域名和IP的数据.它就像是一个本地的数据库.如果找到就可以直接获取目标主机的IP地址了.没有找到的话,需要 检查路由器缓存,路由器有自己的DNS缓存,可能就包括了这在查询的内容:如果没有,要 查询ISP DNS 缓存:ISP服务商DNS缓存(本地服务器缓存)那里可能有相

加载页面遮挡耗时操作任务页面--第三方开源--AndroidProgressLayout

在Android的开发中,往往有这种需求,比如一个耗时的操作,联网获取网络图片.内容,数据库耗时读写等等,在此耗时操作过程中,开发者也许不希望用户再进行其他操作(其他操作可能会引起逻辑混乱),而此时需要给用户一个额外的加载页面遮挡住主逻辑代码的运行,待主页面的耗时操作完成后,自动消失这样加载过度页面,恢复出正常应该显示的页面. 举个实际的例子,如代码使用Android WebView打开一个网页链接试图加载某个网站,但网络质量不佳,需要耗时很久,那么在这个过程中,较好的用户体验做法是:给用户一个

输入url到页面加载都发生了什么事情?(一道软件测试面试题)

文章首发于公众号:软件测试er 输入url到页面加载都发生了什么事情?这是一道软件测试面试题,且相关知识其实还有多种问法: Question 1请讲一下tcp三次握手 OK等你把这个记好了,下次面试:Question 2 tcp和http有什么区别?? Question 3 http和https区别? Question 4 http请求方法? Question 5常见的返回状态码有哪些?都是什么含义?...一开始我也只是应付面试,去了解这些问题,但是发现自己并不能很好的理解.而在平时测试中需要定

webclient 比浏览器加载页面慢的一个问题

测试中发现webclient 比浏览器加载页面慢的一个问题:原因WebClient 支持 gzip, deflate,但是未设置 解决方案: class WebClientEx : WebClient { int timeout = 60; public WebClientEx(int timeout = 60) { this.timeout = timeout * 1000; this.Encoding = Encoding.UTF8; } protected override WebRequ

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

事先声明:本文由初学者撰写,为一次探索的过程,可能有不严谨和准确的地方,望读者多多谅解并积极指正! 场景描述: 在一次前端开发过程中,我使用了一个网页模板,该模板包含一个主页和四个子页面,如下图: 具体的效果是,点击主页中的一个按钮会在弹框内显示子页面的内容,如下图: 具体的实现是在主页面中留出面板,并在点击按钮时通过jquery的load方法将子页面加载到面板中: index.html 部分代码 <div class="cd-folding-panel"> <div

屏蔽电信流氓广告造成的诡异的问题--Android WebView 长时间不能加载页面

发现在家里的时候用Android App里的WebView打开网站很慢,会有十几秒甚至更长时间的卡住. 但是在电脑上打开同样的网页却很快. 查找这个问题的过程比较曲折,记录下来. 抓取Android网络数据 为了调试这个问题,首先要抓取Android的网络包数据.开始时,是想用Wireshark来抓包的,但是很麻烦,tcpdump在手机要root权限. 于是转换思路,能不能在Android上设置代理,来抓包? 但是fiddler没有linux版本,于是转用BurpSuite了. 设置Androi

爬虫再探实战(三)———爬取动态加载页面——selenium

自学python爬虫也快半年了,在目前看来,我面临着三个待解决的爬虫技术方面的问题:动态加载,多线程并发抓取,模拟登陆.目前正在不断学习相关知识.下面简单写一下用selenium处理动态加载页面相关的知识.目标——抓取页面所有的高考录取分数信息. 对于动态加载,开始的时候是看到Selenium+Phantomjs的强大,直接就学的这个.打开网页查看网页源码(注意不是检查元素)会发现要爬取的信息并不在源码里面.也就是说,从网页源码无法通过解析得到数据.Selenium+Phantomjs的强大一方

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录

Ace admin 如何实现类似于freamset加载页面

如上标题所述,ace admin做后台页面的时候,可以实现类似于用freamset的功能,但是ace admin做的比freamset更好,他可以用异步加载的形式展示,而加载的页面的内容可以尽可能的少(或者说按需加载). 这个主要是使用了pjax的功能,pjax的实现原理如下: history API中有几个新特性,分别是history.pushState和history.replaceState,我们把pushState+AJAX进行封装,合起来简单点叫,就是PJAX~ 虽说实现技术上没什么新