1.用户输入url网址(URL)

用户输入url(也就是我们说的网址,也是统一资源定义符,用于定义互联网资源)

比如输入https://www.baidu.com

其中https为协议

baidu.com是域名

www:World Wide Web”首字母的缩写形式。“WWW”在我国曾被译为“环球网”、“环球信息网”、“超媒体环球信息网”等,为什么要加,我猜是规范,有些网址不加www也能访问

有时候域名后面会跟端口号如xxx.com:8080,8080就是端口号

互联网上的每一台计算机,都会分配到一个IP地址,规定网络地址的协议,叫做IP协议。它所定义的地址,就被称为IP地址,那为什么我们输入网址而不是IP地址?因为网址是语义化的好记忆,而IP是类似:192.168.1.0,不易人记忆.

  1. IP寻址:浏览器根据输入的网址去寻找它对应的IP地址

首先需了解

DNS(网域名称系统): 是互联网的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网,DNS使用TCP和UDP端口53

TCP:为了解决这个问题,提高网络可靠性,TCP协议就诞生了。这个协议非常复杂,但可以近似认为,它就是有确认机制的UDP协议,每发出一个数据包都要求确认。如果有一个数据包遗失,就收不到确认,发出方就知道有必要重发这个数据包了。因此TCP协议能够确保数据不会遗失。

它的缺点是过程复杂、实现困难、消耗较多的资源。TCP协议具体实现是"三次握手":如图:

UDP : 我们必须在数据包中加入端口信息,这就需要新的协议。最简单的实现叫做UDP协议,UDP数据包,也是由"标头"和"数据"UDP协议的优点是比较简单,容易实现.

缺点:可靠性较差,一旦数据包发出,无法知道对方是否收到。

网址到IP地址的转换,这个过程就是DNS解析,实现了网址到IP地址的转换,其步骤如下

域名解析:

1.先从浏览器缓存里找IP,因为浏览器会缓存DNS记录一段时间

2.如没找到,再从Hosts文件查找是否有该域名和对应IP

3.如没找到,再从路由器缓存找

4.如没好到,再从DNS缓存查找

5.如果都没找到,浏览器域名服务器向根域名服务器(baidu.com)查找域名对应IP,还没找到就把请求转发到下一级,直到找到IP

补充:什么是dns劫持:黑客攻击根域名服务器的节点,发生在上面第四步,从DNS缓存数据库里找时被恶意改为其他的网址,所以请求到的是其他网址.

3.服务器处理

服务器:是一台安排了系统的机器,常见的系统如linux,windows server2012,系统里安装的处理请求应用叫 Web server,常用Web服务器有Apache.

处理流程如图:

Rails路由匹配网址,通过控制器从数据里取出模型数据,显示到视图.简称为MVC模式.而前端开发者专注在上图的视图view的处理.

4 浏览器处理

服务器通过后台语言程序处理,找到数据返回给浏览器,HTML字符串被浏览器接受后被一句句读取解析,解析到link标签后重新发送请求获取css,解析到sript标签后发送请求获取js,并执行代码

5.绘制网页

关于浏览器引擎渲染,可以看这个:浏览器内核和javascript引擎

浏览器根据HTML和CSS计算得到渲染树,绘制到屏幕上,js会被执行

上述整个请求大致过程如下:涉及到DNS域名解析查找IP过程.

这篇文章涉及的东西太多太复杂,需花很长时间整体,但面试经常被问到,作为一个热爱前端开发者自然好奇想弄清其中真相.

备注:如需了解IP寻址的细节和htttp协议请点击:互联网协议入门(一),互联网协议入门(二)

参考资料:

阮一峰互联网协议入门 ;

DNS解析.

—————————————————————————————————————

"听很多大神说写博客可以提高技术水平,以后会养成写博客习惯,也是方便自己复习".

从 输入网址(URL)到页面展示的过程的更多相关文章

  1. 【原】老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...

  2. 【转】老生常谈-从输入url到页面展示到底发生了什么

    今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...

  3. (转)老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索"从输入url到页面展示到底发生了什么",你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么 ...

  4. 转载--从输入URL到页面展示到底发生了什么

    最近我也在看http协议, tcp相关知识, 在吃饭时无意看到来一篇文章讲解“从输入URL到页面展示到底发生了什么”, 细细看完, 很值得回味, 所以转载, 以供日后在温习. (PS, 作者这篇文章发 ...

  5. 从输入 URL 到页面展示,到底发生了什么

    从输入 URL 到页面展示,到底发生了什么 1.输入URL 当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应 ...

  6. 13.从url 输入网址到最终页面渲染完成

    从url 输入网址到最终页面渲染完成,发生了什么? 1.DNS解析:将域名地址解析为IP地址 先读取: -浏览器DNS缓存 -系统DNS缓存 -路由器DNS缓存 -网络运营商DNS缓存 -递归搜索:b ...

  7. 《浏览器工作原理与实践》<04>从输入URL到页面展示,这中间发生了什么?

    “在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...

  8. 从输入 URL 到页面展示,这中间发生了什么?

    当面试官问到,请你说说看"从输入 URL 到页面展示,这中间发生了什么?" 以前的我是这样回答的: 用户输入URL后,向服务器端发起请求.如果顺利,得到网络响应之后,浏览器对资源进 ...

  9. 从输入URL到页面展示,这中间都发生了什么?

    前言 在浏览器里,从用户输入URL到页面展示,这中间都发生了什么?这是一道非常经典的面试题.这里边涉及很多知识点,比如:网络协议.页面渲染.操作系统等.所以这是很好很全面的考察一个前端的知识.下面我将 ...

随机推荐

  1. kafka 事务代码实现(生产者到server端的事务)

    kafka的事务指的是2个点   ① 生产者到kafka服务端的事务保障    ②消费者从kafka拉取数据的事务 kafka提供的事务机制是 第①点,  对于第②点来说 只能自己在消费端实现幂等性. ...

  2. Java 替换PDF中的字体

    文档中可通过应用不同的字体来呈现不一样的视觉效果,通过字体来实现文档布局.排版等设计需要.应用字体时,可在创建文档时指定字体,也可以用新字体去替换文档中已有的字体.下面,以Java代码展示如何来替换P ...

  3. Tableau学习Step6一如何制作炫彩地图

    Tableau学习Step6一如何制作炫彩地图 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一.统计地图概述 1.1 统计地图的基本概念 统计地图的本质:数据的正确对应 将数据信息和地理 ...

  4. 查询 docker 主机的 IP 地址

    在 Windows 下查询docker 主机的 IP 地址需要直接去网络中心查找虚拟机的 IP 地址,具体步骤: 进入网络中心 进入适配器更改选项 进入虚拟机 WSL 点击 属性 选中 IPv4 协议 ...

  5. 面试官:Java中对象都存放在堆中吗?你知道逃逸分析?

    面试官:Java虚拟机的内存分为哪几个区域? 我(微笑着):程序计数器.虚拟机栈.本地方法栈.堆.方法区 面试官:对象一般存放在哪个区域? 我:堆. 面试官:对象都存放在堆中吗? 我:是的. 面试官: ...

  6. tp5 商城商品模型删除

    1:控制器代码 public function delete($id) { //验证id是否正确 $id if (!intval($id)) { return getJsonData(10010, ' ...

  7. Fiddler抓取https协议的证书导入过程

    fildder抓取https的设置以及证书导出 打开fiddler界面,选择左上角菜单栏Tools-Options 出现Options界面后,选择HTTPS选项卡 勾选上Capture HTTPS C ...

  8. java 中判断输入是否合法 if (变量名.hasNextInt())

    //案例: Scanner sc = new Scanner(System.in); System.out.println("你选择了新修改商品功能!"); System.out. ...

  9. vtk网格剖分

    #include <vtkSmartPointer.h> #include <vtkSimplePointsReader.h> #include <vtkPolyData ...

  10. SQLserver建表规则

    --执行环境:生产环境 / beta环境--备注:文件开头写上描述或者原因.项目USE database --例如 USE LZB GO CREATE TABLE Ymtable1 ( iOrderI ...