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. Flex的 Event中属性currentTarget与target的区别

    Flex的 Event中属性currentTarget与target的区别 1.区别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  2. SQL错误:ORA-12899

    1.错误描述 SQL错误:ORA-12899:列"USER"."T_USER_TAB"."USER_ID"的值太大(实际值:4,最大值:2) ...

  3. 芝麻HTTP:Gerapy的安装

    Gerapy是一个Scrapy分布式管理模块,本节就来介绍一下它的安装方式. 1. 相关链接 GitHub:https://github.com/Gerapy 2. pip安装 这里推荐使用pip安装 ...

  4. 【转】Swagger2 添加HTTP head参数

    大家使用swagger往往会和JWT一起使用,而一般使用jwt会将token放在head里,这样我们在使用swagger测试的时候并不方便,因为跨域问题它默认不能自定义head参数.然后自己去网上找, ...

  5. 回滚 - 每天5分钟玩转 Docker 容器技术(141)

    kubectl apply 每次更新应用时 Kubernetes 都会记录下当前的配置,保存为一个 revision(版次),这样就可以回滚到某个特定 revision. 默认配置下,Kubernet ...

  6. Nancy启用跨站攻击防护(CSRF)

    什么是CSRF(跨站攻击) 可能很多人已经对CSRF有所了解,就简单的介绍下: CSRF全程是 Cross-Site Request Forgery .大概意思就是在登录用户不知情的情况下,由一个网站 ...

  7. EF+Redis(StackExchange.Redis)实现分布式锁,自测可行

    电商平台 都会有抢购的情况,比如 1元抢购. 而抢购 最重要的 就是库存,很多情况下  库存处理不好,就会出现超卖现象. 本文将用redis为缓存,StackExchange 框架,消息队列方式 实现 ...

  8. 如何恢复(初始化)android studio所有设置

    android studio是个大家伙,安装的时候经常出现一些问题,使用的时候也经常出现一些问题,如果,我是说如果,当你遇见一些问题不能解决的时候,可以试试重置android studio来解决问题, ...

  9. 抓取Android应用的log

    今天测试软件时,遇到一个bug,因为开发说那边不复现,所以为了更好追踪这个问题,需要抓取复现步骤地log. 在网上查了相关资料,同时结合自己遇到的问题,总结如下. 1. 抓取Android 应用log ...

  10. SpringtMVC运行流程:@RequestMapping 方法中的 Map、HttpServletRequest等参数信息是如何封装和传递的(源码理解)

    在平时开发SpringtMVC程序时,在Controller的方法上,通常会传入如Map.HttpServletRequest类型的参数,并且可以方便地向里面添加数据.同时,在Jsp中还可以直接使用r ...