当我们输入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截图

 
浏览器接收响应,开始下载并渲染,将页面呈现在我们面前
  1. 解析HTML生成DOM树,
  2. 解析CSS文件生成CSSOM树,并解析Javascript代码
  3. CSS和DOM组合形成渲染树,
  4. 进行布局,在浏览器中绘制渲染树中节点的属性(位置,宽度,大小等)
  5. 绘制元素,绘制各个节点的可视属性(颜色背景等,此时可能会形成多个图层)
  6. 合并图层,将页面呈现给用户面前

输入URI,按下回车发生了什么?的更多相关文章

  1. 从输入URL按下回车到页面展现,中间发生了什么?

    从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...

  2. <用户输入url按下回车,一直到用户看到界面,这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...

  3. 在浏览器输入url后并回车发生了哪些过程

    1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...

  4. 转:从输入url到显示网页发生了什么

    在浏览器中输入url到显示网页主要包含两个部分: 网络通信和页面渲染 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信.分层由高到低 ...

  5. 从输入url到显示网页发生了什么

    原文链接:https://juejin.im/post/5bf23afa6fb9a049be5d1494 在浏览器中输入url到显示网页主要包含两个部分: 网络通信和页面渲染 互联网内各网络设备间的通 ...

  6. 在浏览器中输入Google.com并且按下回车之后发生了什么(转载)

    原文地址:https://github.com/skyline75489/what-happens-when-zh_CN#id9 本文试图回答一个古老的面试问题:当你在浏览器中输入google.com ...

  7. 在浏览器中输入Google.com并且按下回车之后发生了什么?

    作者: skyline75489  来源: skyline75489的博客  发布时间: 2015-03-26 16:57  阅读: 4163 次  推荐: 23   原文链接   [收藏]      ...

  8. 经典面试题:在浏览器地址栏输入一个 URL 后回车,背后发生了什么

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 CS-Wiki(Gitee 官 ...

  9. 在浏览器中输入URL按下回车键后发生了什么

    在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层 ...

随机推荐

  1. python基础之内置装饰器

    装饰器 简介 功能与格式 内置装饰器 @classmethod @propertry @staticmethod 其它 ---------------------------------------- ...

  2. laravel 学习笔记blog后台

    https://github.com/almasaeed2010/adminlte composer require "almasaeed2010/adminlte=~2.0"

  3. js获取当前时间戳以及前一天时间戳

    js获取当前时间戳以及前一天时间戳(毫秒) var timestamp = (new Date()).getTime(); console.log(timestamp);//打印当前时间戳 conso ...

  4. 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 ...

  5. 12627 - Erratic Expansion——[递归]

    Piotr found a magical box in heaven. Its magic power is that if you place any red balloon inside it ...

  6. H3C 链路聚合显示及维护

  7. tf.squeeze()

    转载自:https://www.cnblogs.com/mdumpling/p/8053376.html 原型 tf.squeeze(input, squeeze_dims=None, name=No ...

  8. jquery监听输入框只能输入数字

    $('#mm').bind('input propertychange',function(){ var val= $(this).val(); if(val!=''&& isNaN( ...

  9. JUnit 单元测试断言推荐 AssertJ

    文章转自:http://sgq0085.iteye.com/blog/2030609 前言 由于JUnit的Assert是公认的烂API,所以不推荐使用,目前推荐使用的是AssertJ. Assert ...

  10. vuejs 数据视图不更新

    由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除 可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性 数组 this.$set(ar ...