从 输入网址(URL)到页面展示的过程
1.用户输入url网址(URL)
用户输入url(也就是我们说的网址,也是统一资源定义符,用于定义互联网资源)
其中https为协议
baidu.com是域名
www:World Wide Web”首字母的缩写形式。“WWW”在我国曾被译为“环球网”、“环球信息网”、“超媒体环球信息网”等,为什么要加,我猜是规范,有些网址不加www也能访问
有时候域名后面会跟端口号如xxx.com:8080,8080就是端口号
互联网上的每一台计算机,都会分配到一个IP地址,规定网络地址的协议,叫做IP协议。它所定义的地址,就被称为IP地址,那为什么我们输入网址而不是IP地址?因为网址是语义化的好记忆,而IP是类似:192.168.1.0,不易人记忆.
- 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)到页面展示的过程的更多相关文章
- 【原】老生常谈-从输入url到页面展示到底发生了什么
刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...
- 【转】老生常谈-从输入url到页面展示到底发生了什么
今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...
- (转)老生常谈-从输入url到页面展示到底发生了什么
刚开始写这篇文章还是挺纠结的,因为网上搜索"从输入url到页面展示到底发生了什么",你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么 ...
- 转载--从输入URL到页面展示到底发生了什么
最近我也在看http协议, tcp相关知识, 在吃饭时无意看到来一篇文章讲解“从输入URL到页面展示到底发生了什么”, 细细看完, 很值得回味, 所以转载, 以供日后在温习. (PS, 作者这篇文章发 ...
- 从输入 URL 到页面展示,到底发生了什么
从输入 URL 到页面展示,到底发生了什么 1.输入URL 当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应 ...
- 13.从url 输入网址到最终页面渲染完成
从url 输入网址到最终页面渲染完成,发生了什么? 1.DNS解析:将域名地址解析为IP地址 先读取: -浏览器DNS缓存 -系统DNS缓存 -路由器DNS缓存 -网络运营商DNS缓存 -递归搜索:b ...
- 《浏览器工作原理与实践》<04>从输入URL到页面展示,这中间发生了什么?
“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...
- 从输入 URL 到页面展示,这中间发生了什么?
当面试官问到,请你说说看"从输入 URL 到页面展示,这中间发生了什么?" 以前的我是这样回答的: 用户输入URL后,向服务器端发起请求.如果顺利,得到网络响应之后,浏览器对资源进 ...
- 从输入URL到页面展示,这中间都发生了什么?
前言 在浏览器里,从用户输入URL到页面展示,这中间都发生了什么?这是一道非常经典的面试题.这里边涉及很多知识点,比如:网络协议.页面渲染.操作系统等.所以这是很好很全面的考察一个前端的知识.下面我将 ...
随机推荐
- QT之HTTP
概述 QT的HTTP操作都是异步的,内部通过线程实现. 相关类: QNetworkAccessManager [发送网络请求并接收响应] QNetworkReply [服务响应] QNetworkRe ...
- (七)目标检测算法之SSD
系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...
- docker学习笔记(1)- 架构概述
微服务架构 微服务VS传统分层架构 传统分层架构 优点 对于简单系统: 容易部署 容易测试 容易横向扩展 缺点 对于复杂系统: 耦合度高 不易快速维护 启动慢,部署慢 模块变更引起的回归问题多 难以持 ...
- HelloWorld:通过demo,构建黑盒模型
在<源码阅读四步走,这才是阅读源码的正确姿势>一文中,给出了源码阅读的完整步骤. 本篇是<如何高效阅读源码>专题的第四篇,正式开始讲解阅读源码的具体方法! 程序界有个老传统,学 ...
- 实战:Spring AOP实现多数据源动态切换
需求背景 去年底,公司项目有一个需求中有个接口需要用到平台.算法.大数据等三个不同数据库的数据进行计算.组装以及最后的展示,当时这个需求是另一个老同事在做,我只是负责自己的部分. 直到今年回来了,这个 ...
- freeswitch tts_commandline模块介绍
概述 freeswitch是开源.免费的VOIP软交换平台,自带了很多功能各异的模块. mod_tts_commandline模块,本身没有TTS能力,而是通过调用TTS引擎的命令生成语音文件,tts ...
- 【OpenHarmony移植案例与原理】XTS子系统之应用兼容性测试用例开发
摘要:本文主要介绍ACTS应用兼容性测试用例开发编译. 本文分享自华为云社区<移植案例与原理 - XTS子系统之应用兼容性测试用例开发>,作者: zhushy . XTS(X Test S ...
- [源码解析] TensorFlow 分布式环境(4) --- WorkerCache
[源码解析] TensorFlow 分布式环境(4) --- WorkerCache 目录 [源码解析] TensorFlow 分布式环境(4) --- WorkerCache 1. WorkerCa ...
- Kubernetes:存储管理
Blog:博客园 个人 参考:Volumes | Kubernetes.Persistent Volumes | Kubernetes.Kubernetes 基础入门实战 简单来说,存储卷是定义在Po ...
- SpringMVC实现文件上传功能
文件上传 文件上传要求form表单的请求方式必须为post,并且添加属性enctype="multipart/form-data" SpringMVC中将上传的文件封装到Multi ...