1. 解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段。
  2. DNS解析

    查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到,

    检查系统缓存,检查hosts文件,这个文件保存了一些以前访问过的网站的域名和IP的数据。它就像是一个本地的数据库。如果找到就可以直接获取目标主机的IP地址了。没有找到的话,需要

    检查路由器缓存,路由器有自己的DNS缓存,可能就包括了这在查询的内容;如果没有,要

    查询ISP DNS 缓存:ISP服务商DNS缓存(本地服务器缓存)那里可能有相关的内容,如果还不行的话,需要,

    递归查询:从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索哦对应目标域名的IP。

  3. 浏览器与网站之间建立TCP链接(三次握手):

    第一次握手:客户端向服务器端发送请求(SYN=1) 等待服务器确认;

    第二次握手:服务器收到请求并确认,回复一个指令(SYN=1,ACK=1);

    第三次握手:客户端收到服务器的回复指令并返回确认(ACK=1)。

    通过三次握手,建立了客户端和服务器之间的连接,现在可以请求和传输数据了。

  4. 请求和传输数据

通过GET请求和服务器的响应,可以将服务器上的目标文件传输到浏览器进行渲染。

5. 浏览器渲染页面

           

客户端拿到服务器端传输来的文件,找到HTML和MIME文件,通过MIME文件,浏览器知道要用页面渲染引擎来处理HTML文件。

            a.浏览器会解析html源码,然后创建一个 DOM树。

在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。

            b.浏览器解析CSS代码,计算出最终的样式数据,形成css对象模型CSSOM。

首先会忽略非法的CSS代码,之后按照浏览器默认设置——用户设置——外链样式——内联样式——HTML中的style样式顺序进行渲染。

            c.利用DOM和CSSOM构建一个渲染树(rendering tree)。
            渲染树和DOM树有点像,但是是有区别的。

DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。

而且一大段文本中的每一个行在渲染树中都是独立的一个节点。
            渲染树中的每一个节点都存储有对应的css属性。

            d.浏览器就根据渲染树直接把页面绘制到屏幕上。

笔试常考--浏览器输入一个URL点击回车之后发生了什么的更多相关文章

  1. 2020-07-02:在浏览器输入一个url后按回车,会发生什么?

    福哥答案2020-07-02: 简单回答: 域名解析. 建立TCP连接. 请求. 处理. 响应. 释放TCP连接. 页面渲染. 中级回答: 域名解析 浏览器DNS缓存. 操作系统DNS缓存. 路由器缓 ...

  2. 浏览器输入一个url到整个页面显示出来经历了哪些过程?

    https://cloud.tencent.com/developer/article/1396399 https://www.cnblogs.com/haonanZhang/p/6362233.ht ...

  3. 浏览器输入一个url的过程,以及加载完html文件和js文件的标志

    简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二 ...

  4. 输入一个URL到页面呈现其中发生的过程-------http过程详解

    在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情. 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们 ...

  5. 笔试常考--浏览器兼容性问题及解决方案(CSS)

    问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也 ...

  6. 当在浏览器输入一个url访问后发生了什么

    首先根据DNS获取该url的ip地址,ip地址的获取可能通过本地缓存,路由缓存等得到. 然后在网络层通过路由选择查找一条可达路径,最后利用tcp/ip协议来进行数据的传输. 其中在传输层将信息添加源端 ...

  7. 从输入一个URL到页面完全显示发生了什么?

    这是经典的前端问题,主要是对浏览器的工作原理有个理解! 网络通信走的一般是五层因特网协议,详见下图.图片来自于https://images2018.cnblogs.com/blog/882926/20 ...

  8. 网易笔试题:浏览器中输入一个url后回车到返回页面信息的过程

    You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...

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

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

随机推荐

  1. 第一次C语言实验报告

    一.实验题目,设计思路,实现方法 实验四4-2-9三个数由小到大输出,要求比较三数大小并按顺序输出.运用穷举法列举所有可能性再对应输出.运用多分支结构. 实验四4-2-4 三天打鱼两天晒网,运用循环结 ...

  2. iOS - Bluetooth 蓝牙

    1.蓝牙介绍 具体讲解见 蓝牙 技术信息 蓝牙协议栈 2.iBeacon 具体讲解见 Beacon iBeacon 是苹果公司 2013 年 9 月发布的移动设备用 OS(iOS7)上配备的新功能.其 ...

  3. WPF基础篇之移动特效

    前一段时间,在做动画特效的时候,在网上看到了一个水平移动控件的例子.里面用到了RenderTransform特效.在网上查找资料发现了一篇基础的文章: 文章源地址:http://www.ithao12 ...

  4. TestLink和RedMine的集成

    1.              TestLink的安装 1.1. TestLink简介 TestLink是一个php语言开发的开源免费的测试管理工具,包括产品测试需求,测试计划,测试用例的创建和执行, ...

  5. 【Elasticsearch全文搜索引擎实战】之Kibana搭建

    1. Kibana介绍 Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在Elasticsearch索引中的数据.使用Kibana,可以通过各种图表进行高 ...

  6. MySQL的B树索引与索引优化

    MySQL的MyISAM.InnoDB引擎默认均使用B+树索引(查询时都显示为"BTREE"),本文讨论两个问题: 为什么MySQL等主流数据库选择B+树的索引结构? 如何基于索引 ...

  7. 【SDOI2009】HH的项链 (莫队)

    题面 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此, 他的 ...

  8. C++通过COM接口操作PPT

    一. 背景 在VS环境下,开发C++代码操作PPT,支持对PPT模板的修改.包括修改文本标签.图表.表格.满足大多数软件生成PPT报告的要求,先手工创建好PPT模板,在程序中修改模板数据. 二. 开发 ...

  9. Java 容器之Hashset 详解

    Java 容器之Hashset 详解.http://blog.csdn.net/nvd11/article/details/27716511

  10. UWP 使用Telerik Grid控件

    还是老规矩,看一下最终效果. 数据是从SQLite中读取,然后绑定到DataGrid中显示的. 先看一下XAML <grid:RadDataGrid Grid.Row="1" ...