输入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]分别从应用层到传输层.网络层和数据链路层 ...
随机推荐
- docker 使用总结
docker run asn@hadoop1:~/Desktop$ docker run --help Usage: docker run [OPTIONS] IMAGE [COMMAND] [ARG ...
- PyCharm indexing goes into infinite loop pycharm 不同的indexing
https://stackoverflow.com/questions/24955896/pycharm-indexing-goes-into-infinite-loop 5 1 I opened u ...
- SuperSocket主动从服务器端推送数据到客户端
关键字: 主动推送, 推送数据, 客户端推送, 获取Session, 发送数据, 回话快照 通过Session对象发送数据到客户端 前面已经说过,AppSession 代表了一个逻辑的 socke ...
- springmvc url处理映射的三种方式:
一.SpringMVC简介 SpringMVC是一种基于Spring实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,使用了MVC架构模式的思想,将web层进行职责解耦,并管理应用所需对象 ...
- [C++] 检查随机内存溢出
C++程序的随机内存溢出是非常难处理的,windows提供了一些工具来缓解这个问题. windows debuger提供的Global Flags可以设置"enable heap tail ...
- windows常用命令行命令
https://blog.csdn.net/qq_32451373/article/details/77743869 打开"运行"对话框(Win+R),输入cmd,打开控制台命令窗 ...
- 纯CSS绘制的图形一览
整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...
- 性能测试基础-SOCKET协议用例
1.首先在进行性能测试的时候,我们要了解软件的通信协议是什么,我们使用什么协议,如何去模拟.SOCKET协议主要应用于在C/S模式的系统. 作者本人已当初做过的C/S架构的系统做的脚本录制,在上面做脚 ...
- APK签名替换检测
APK二次打包的危害 APK二次打包是Android应用安全风险中的一部分, 一般是通过反编译工具向应用中插入广告代码与相关配置,再在第三方应用市场.论坛发布.打包党对移动App带来的危害有以下几种: ...
- vue移动端图片上传压缩
上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...