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


网络通信走的一般是五层因特网协议,详见下图。图片来自于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. www-authenticate与BASE-64认证技术

    www-authenticate是一种简单的用户身份认证技术.很多验证都采用这种验证方式,尤其在嵌入式领域中.优点:方便缺点:这种认证方式在传输过程中采用的用户名密码加密方式为BASE-64,其解码过 ...

  2. SVM 使用朗格朗日乘子得到权重向量

    紧跟前一篇SVM博文,下面我们用数学推导来导出权重的计算方法.

  3. String之常量池小结

    1.String 常量池 String使用private final char value[ ]实现字符串的存储,也就是说String创建对象之后不能够再次修改此对象中存储的字符串内容,因而Strin ...

  4. Socket层实现系列 — connect()的实现

    主要内容:connect()的Socket层实现.期间进程的睡眠和唤醒. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 应用层 int connect( ...

  5. MinerUtil.java 爬虫工具类

    MinerUtil.java 爬虫工具类 package com.iteye.injavawetrust.miner; import java.io.File; import java.io.File ...

  6. C语言中的sizeof解析

    1. 定义:sizeof是C/C++中的一个操作符(operator),作用就是返回一个对象或者类型所占的内存字节数.返回 值类型为size_t,在头文件stddef.h中定义.这是一个依赖于编译系统 ...

  7. (十六)TableView常见属性

    千万不要忘记设置TableView的数据源. 1.分割线的样式: separatorStyle与separatorColor. 颜色:十六进制表示 32bit:argb各占8位. #aarrggbb ...

  8. React Native开发必备的10个插件包

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  9. 开发资源库(repositiory)

    1.. 52研发网MTK软件 2.一流研发 3. android+MTK/华为的源代码及资料库(CryToCry96) 点击打开链接 4.android+MTK/华为/联想的源代码及资料库(lucka ...

  10. .NET(C#)连接各类数据库代码-集锦

    1.C#连接连接Access 复制代码代码如下: using System.Data;   using System.Data.OleDb;   ..   string strConnection=& ...