这是经典的前端问题,主要是对浏览器的工作原理有个理解!


网络通信走的一般是五层因特网协议,详见下图。图片来自于https://images2018.cnblogs.com/blog/882926/201711/882926-20171127181032128-471806615.png


大致步骤如下:

1.域名解析

浏览器查找域名的IP地址,这一步包括DNS的具体查找过程,DNS属于应用层协议。客户端会检查本地是否有对应的IP地址,若存在则返回,否则请求上级DNS服务器,一直到找到为止或者最终到根节点。
显然这一过程可能非常耗时,所以很多网站都会采用dns-prefetch,使浏览器在空闲时间就将这些域名转化为ip地址,这样就能有效减少时间。以淘宝网为例:

其实DNS的查找过程包括:浏览器缓存-》系统缓存-》路由器缓存...

2.TCP三次握手,客户端向服务器发送http请求

服务器可能会有永久服务器重定向相应,客户端随之继续追踪重定向地址。

3.服务器返回一个http响应

4.客户端得到html代码

5.客户端解析HTML代码,并请求html代码中的资源(图片,音频,css,js等)

6.浏览器对页面进行渲染,展现给用户

主要是解析html构成dom树,解析css构成render树,dom树和render树结合进行布局和绘制!


参考链接:

从输入一个URL到页面完全显示发生了什么?的更多相关文章

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

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

  2. 从输入一个URL到页面渲染的流程简介

    首先说明以下是我参考网上答案和自己的思考,给出自己的想法,如果有问题,欢迎大家吐槽从用户在浏览器中输入一个URL,到整个页面渲染,这个过程中究竟发生了什么呢?今天先简单写下整个过程,后面再一点点完善. ...

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

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

  4. 从输入一个URL到页面呈现,网络上都发生了什么?

    归纳一下其中涉及到前端的一些基础知识,主要包括:http协议.web标准.w3c标准等.       这个问题虽然只有两个2个动作:输入URL和呈现页面,但这背后发生了很多"有趣" ...

  5. 笔试常考--浏览器输入一个URL点击回车之后发生了什么

    解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段. DNS解析: 查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到, 检查系统缓存,检查hosts文件,这个文 ...

  6. 当在浏览器中输入一个url后回车,后台发生了什么?比如输入url后,你看到了百度的首页,那么这一切是如何发生的呢?

    简单来书有以下步骤: 查找域名对应的IP地址.这一步会依次查找浏览器缓存,系统缓存,路由器缓存,ISPDNS缓存,13台根域名服务器. 向IP对应的服务器发送请求. 服务器响应请求,发回网页内容. 浏 ...

  7. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

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

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

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

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

随机推荐

  1. iOS中 UITabBarController中自定义UITabBar

    1.创建多个视图控制器,放如UITabBarController中 AViewController *aa = [[AViewController alloc] init]; UINavigation ...

  2. Java最最常用的100个类排序(非官方)

    下面这句话是引用"大部分的 Java 软件开发都会使用到各种不同的库.近日我们从一万个开源的 Java 项目中进行分析,从中提取出最常用的 Java 类,这些类有来自于 Java 的标准库, ...

  3. (五十六)iOS多线程之NSOperation

    NSOpertation是一套OC的API,是对GCD进行的Cocoa抽象. NSOperation有两种不同类型的队列,主队列和自定义队列. 主队列运行于主线程上,自定义队列在后台运行. [NSBl ...

  4. ssh连接原理介绍( 无密码连接登录的原理)

    SSH(Secure  Shell)一种在不安全网络上提供安全远程登录及其它安全网络服务的协议.由客户端和服务端的软件组成的,有两个不兼容的版本分别是:1.x和2.x.(SSH 2.x的客户程序是不能 ...

  5. Unity 5.X扩展编辑器之打包assetbundle

    5.x的assetbundle与4.x以及之前的版本有些不同,不过本质是一样的,只不过5.x打包assetbundle更为简单和人性化了,总体来说只需要三个步骤: 第一步:创建打包资源 //这里是一个 ...

  6. react-native-android之初次相识

    作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒. 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开发周期长,开发成本高,升级代价大的语言一定会 ...

  7. Java集合之Hashtable

    和HashMap一样,Hashtable也是一个散列表,存储的内容也是键值对key-value映射.它继承了Dictionary,并实现了Map.Cloneable.io.Serializable接口 ...

  8. 非阻塞IO模式原理

    与阻塞模式对应的另一种模式叫非阻塞IO模式,在整个通信过程中读和写操作不会阻塞,当前处理线程不存在阻塞情况.从A机器到B机器它的通信过程是:A机器一条线程将通道设置为写事件后往下执行,而另外一条线程遍 ...

  9. Global Financial Applications uses the following Public tables

    来自文档: Oracle  Financial Applications Technical Reference Manual  更多明细参考文档 Table Name                 ...

  10. Java I/O最简单的几个类

    今天把I/O中最简单的几个类整理了一下,之所以整理最简单的,是因为这样会让我更加快速方便的理顺这里面的东西,以前每一次用的时候都要先百度一下,觉得很烦. 首先需要先看一下Read,Write和Stre ...