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. canvas焰火特效

    之前在抖音上看到了一个很漂亮的焰火效果.这会儿有时间就用canvas实现了一下. 演示地址:http://suohb.com/work/firework4.htm 先看效果:(静态图片看不太出效果,请 ...

  2. UVa11426 最大公约数之和(正版)

    题面 求\(\sum_{i=1}^{n-1}\sum_{j=i+1}^{n}gcd(i, j)\) n<=4000000,数据组数T<=100 答案保证在64位带符号整数范围内(long ...

  3. Vue-开发工具的安装

    1. github官网下载vue工具:https://github.com/vuejs/vue-devtools.并解压 2.  在有package.json的文件夹下,按住shift右键,选择&qu ...

  4. mysql5.6版本备份报错

    MySQL5.6版本备份报错,密码不安全 [root@centos199 mysql]# mysqldump -uroot -ppassword cz-office > mysql38.sqlW ...

  5. A brief introduction to weakly supervised learning(简要介绍弱监督学习)

    by 南大周志华 摘要 监督学习技术通过学习大量训练数据来构建预测模型,其中每个训练样本都有其对应的真值输出.尽管现有的技术已经取得了巨大的成功,但值得注意的是,由于数据标注过程的高成本,很多任务很难 ...

  6. mount挂接命令使用

    挂接 操作系统 1.-t vfstype 指定文件系统的类型,通常不必指定.mount 会自动选择正确的类型.常用类型有: 光盘或光盘镜像:iso9660 DOS fat16文件系统:msdos Wi ...

  7. VMware下安装centos7及网络配置

    之前遇到过用虚拟机安装上centos7上不了网,昨天解决了,但是手抽删错了,把centos7误删了,今天就一起安装下. 首先打开VMware,我这里用的版本是VMware12,然后我们新建虚拟机 下一 ...

  8. css学习の第五弹—单位和值

    一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是 ...

  9. Pycharm头部注释添加

    1.第一步 2.第二步 搜索框输入:File and Code Templates 然后右边找到 Python Script 3.第三步 将下面内容复制到图中红框内,然后点击OK #!/usr/bin ...

  10. 属性动画 ValueAnimator 运行原理全解析

    最近下班时间都用来健身还有看书了,博客被晾了一段时间了,原谅我~~~~ 提问环节 好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行 ...