输入URI,按下回车发生了什么?
当我们输入URL,按下回车发生了什么? 这个题目很俗套- -但是是面试经常出现的题目了。今天听尼古拉斯•屌•大斌哥介绍关于从URI到浏览器呈现给我们页面发生了什么。感觉收获颇多。索性就翻阅了一些其他资料。在此总结下。这一晚上也算是没白白浪费。
当我们输入URL,发生了什么?
用一个例子来说明把。当我们打开 https://datura900607.github.io/home-automation/ 这个网页的时候发生了什么?
通过URI定位到主机。
当我们在浏览器输入url后,浏览器通过DNS服务器,将网站中的URl中的主机域名解析为,web服务器中所对应的IP地址。顺序差不多是:
- 先在浏览器缓存中查询,如果浏览器缓存中有就直接使用。
- 浏览器缓存中找不到 在系统缓存中查询。
- 系统缓存中没有在路由器缓存中查询。
- 路由器找不到在web服务器中查询,直到找到这个IP地址。
打包HTTP请求
好了,经过一番查询,我们找到了我家居网站的IP地址:151.101.100.133:443 这是我们打包的HTTP请求:

通过TCP协议,向服务器发送请求
通过TCP协议与Web服务器创建连接。(俗称三次握手),向服务器发送请求
web服务器接收请求,交给相关进程处理
这里要根据后台语言不同而分情况处理,我这个是HTML类型文件。web服务器接收请求后 找到服务器上相对应的html文件(一般是index.html)
如果后台语言是PHP类型,则web服务器在接收到用户的请求后将请求转交给PHP应用服务器来处理,(web服务器本身不能处理PHP动态语言文件)
服务器响应请求,通过TCP协议回传响应
这里因为此家居网站就是一个静态HTML。就直接找到HTML文件就会通过TCP协议回传了。如果是php文件。则还需要PHP应用服务器将PHP文件,翻译成HTML静态代码,传回Web服务器,然后再通过TCP协议回传响应。这是回传的响应head截图

浏览器接收响应,开始下载并渲染,将页面呈现在我们面前
- 解析HTML生成DOM树,
- 解析CSS文件生成CSSOM树,并解析Javascript代码
- CSS和DOM组合形成渲染树,
- 进行布局,在浏览器中绘制渲染树中节点的属性(位置,宽度,大小等)
- 绘制元素,绘制各个节点的可视属性(颜色背景等,此时可能会形成多个图层)
- 合并图层,将页面呈现给用户面前
输入URI,按下回车发生了什么?的更多相关文章
- 从输入URL按下回车到页面展现,中间发生了什么?
从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...
- <用户输入url按下回车,一直到用户看到界面,这期间经历了什么>
用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一. DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...
- 在浏览器输入url后并回车发生了哪些过程
1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...
- 转:从输入url到显示网页发生了什么
在浏览器中输入url到显示网页主要包含两个部分: 网络通信和页面渲染 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信.分层由高到低 ...
- 从输入url到显示网页发生了什么
原文链接:https://juejin.im/post/5bf23afa6fb9a049be5d1494 在浏览器中输入url到显示网页主要包含两个部分: 网络通信和页面渲染 互联网内各网络设备间的通 ...
- 在浏览器中输入Google.com并且按下回车之后发生了什么(转载)
原文地址:https://github.com/skyline75489/what-happens-when-zh_CN#id9 本文试图回答一个古老的面试问题:当你在浏览器中输入google.com ...
- 在浏览器中输入Google.com并且按下回车之后发生了什么?
作者: skyline75489 来源: skyline75489的博客 发布时间: 2015-03-26 16:57 阅读: 4163 次 推荐: 23 原文链接 [收藏] ...
- 经典面试题:在浏览器地址栏输入一个 URL 后回车,背后发生了什么
尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 CS-Wiki(Gitee 官 ...
- 在浏览器中输入URL按下回车键后发生了什么
在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层 ...
随机推荐
- python基础之内置装饰器
装饰器 简介 功能与格式 内置装饰器 @classmethod @propertry @staticmethod 其它 ---------------------------------------- ...
- laravel 学习笔记blog后台
https://github.com/almasaeed2010/adminlte composer require "almasaeed2010/adminlte=~2.0"
- js获取当前时间戳以及前一天时间戳
js获取当前时间戳以及前一天时间戳(毫秒) var timestamp = (new Date()).getTime(); console.log(timestamp);//打印当前时间戳 conso ...
- requires php ~7.1 -> your PHP version (7.0.18) does not satisfy that requirement
一个大兄弟本地用了 PHP 7.1 进行开发,而我本地是 PHP 7.0, 于是悲剧发生了. composer install 之后报错 Loading composer repositories w ...
- 12627 - Erratic Expansion——[递归]
Piotr found a magical box in heaven. Its magic power is that if you place any red balloon inside it ...
- H3C 链路聚合显示及维护
- tf.squeeze()
转载自:https://www.cnblogs.com/mdumpling/p/8053376.html 原型 tf.squeeze(input, squeeze_dims=None, name=No ...
- jquery监听输入框只能输入数字
$('#mm').bind('input propertychange',function(){ var val= $(this).val(); if(val!=''&& isNaN( ...
- JUnit 单元测试断言推荐 AssertJ
文章转自:http://sgq0085.iteye.com/blog/2030609 前言 由于JUnit的Assert是公认的烂API,所以不推荐使用,目前推荐使用的是AssertJ. Assert ...
- vuejs 数据视图不更新
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除 可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性 数组 this.$set(ar ...