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. 【译】C# 11 特性的早期预览

    原文 | Kathleen 翻译 | 郑子铭 Visual Studio 17.1(Visual Studio 2022 Update 1)和 .NET SDK 6.0.200 包含 C# 11 的预 ...

  2. Qt:QJsonParseError

    0.说明 QJsonParseError用于JSON解析时报告error. 1.模块和加载项 Header #include<QJsonParseError> qmake QT += co ...

  3. Leaflet:Event与Layer类属性、方法

    Event 之所以要说Event,是因为很多类都是继承自Layer--Marker.Popup.Tooltip.Path以及继承自Path的Circle.Polyline.Polygon...:而La ...

  4. Mattermost Server安装及配置AD/LADP

    一.安装Mattermost Server Mattermost is an open source, self-hosted Slack-alternative. 1.下载mattermost  s ...

  5. 面试官:Redis中列表的内部实现方式是什么?

    在面试间里等候时,感觉这可真暖和呀,我那冰冷的出租屋还得盖两层被子才能睡着.正要把外套脱下来,我突然听到了门外的脚步声,随即门被打开,一位眉毛弯弯嘴唇红红的小姐姐走了进来,甜甜的香水味立刻钻进了我的鼻 ...

  6. 矩池云 | 使用LightGBM来预测分子属性

    今天给大家介绍提升方法(Boosting), 提升算法是一种可以用来减小监督式学习中偏差的机器学习算法. 面对的问题是迈可·肯斯(Michael Kearns)提出的:一组"弱学习者&quo ...

  7. 『现学现忘』Docker基础 — 25、Docker镜像讲解

    目录 1.镜像是什么 2.Docker镜像获取的方式 3.Docker镜像加载原理 (1)UnionFS(联合文件系统) (2)Docker镜像加载原理 1.镜像是什么 镜像是一种轻量级.可执行的独立 ...

  8. LGP3449题解

    其实每个串都不是回文串也能做的说... 题意:给定 \(n\) 个互不相同的串,两两拼接一共能够拼出 \(n^2\) 个串,问这 \(n^2\) 个串中有几个回文串. 首先假设拼接出来的串是 \(AB ...

  9. ArcMap操作随记(5)

    1.[栅格转面]等工具的使用 若栅格数据为浮点型,需使用[转为整型]工具,将栅格转为整型,再进行操作. 2.人口密度分布趋势图 使用[核密度分析]工具,也可尝试插值 3.点要素做面 [点集转线][要素 ...

  10. pygame坦克大战前夕

    最近想自己写pygame版的坦克大战,今晚已经完成如下功能: 1,我方坦克,可手动移动:敌方坦克,自动转方向与移动 2,坦克颜色随机,坦克形态大小可调. 3,双方坦克速度可调. 4,刷新坦克的位置随机 ...