从输入一个URL到页面完全显示发生了什么?
这是经典的前端问题,主要是对浏览器的工作原理有个理解!
网络通信走的一般是五层因特网协议,详见下图。图片来自于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到页面完全显示发生了什么?的更多相关文章
- 输入一个URL到页面呈现其中发生的过程-------http过程详解
在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情. 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们 ...
- 从输入一个URL到页面渲染的流程简介
首先说明以下是我参考网上答案和自己的思考,给出自己的想法,如果有问题,欢迎大家吐槽从用户在浏览器中输入一个URL,到整个页面渲染,这个过程中究竟发生了什么呢?今天先简单写下整个过程,后面再一点点完善. ...
- 经典面试题:在浏览器地址栏输入一个 URL 后回车,背后发生了什么
尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 CS-Wiki(Gitee 官 ...
- 从输入一个URL到页面呈现,网络上都发生了什么?
归纳一下其中涉及到前端的一些基础知识,主要包括:http协议.web标准.w3c标准等. 这个问题虽然只有两个2个动作:输入URL和呈现页面,但这背后发生了很多"有趣" ...
- 笔试常考--浏览器输入一个URL点击回车之后发生了什么
解析URL:浏览器首先对拿到的URL进行识别,抽取出域名字段. DNS解析: 查询浏览器缓存(浏览器会缓存之前拿到的DNS 2-30分钟时间),如果没有找到, 检查系统缓存,检查hosts文件,这个文 ...
- 当在浏览器中输入一个url后回车,后台发生了什么?比如输入url后,你看到了百度的首页,那么这一切是如何发生的呢?
简单来书有以下步骤: 查找域名对应的IP地址.这一步会依次查找浏览器缓存,系统缓存,路由器缓存,ISPDNS缓存,13台根域名服务器. 向IP对应的服务器发送请求. 服务器响应请求,发回网页内容. 浏 ...
- 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1
[ASP.NET Core]EF Core - “影子属性” 有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...
- 网易笔试题:浏览器中输入一个url后回车到返回页面信息的过程
You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...
- 浏览器输入一个url到整个页面显示出来经历了哪些过程?
https://cloud.tencent.com/developer/article/1396399 https://www.cnblogs.com/haonanZhang/p/6362233.ht ...
随机推荐
- 使用C#+socket实现用移动设备控制的虚拟手柄
近期在和同学玩死神vs火影,以怀念小时候,突然觉得用键盘玩的不够畅快,因此萌生了写一个虚拟手柄的念头. 我的思路是在移动设备(iOS.Android)上实现手柄,在电脑上监听,利用socket建立持久 ...
- MySQL 如何使用索引 较为详细的分析和例子
在数据库表中,使用索引可以大大提高查询速度. 假如我们创建了一个 testIndex 表: CREATE TABLE testIndex(i_testID INT NOT NULL,vc_Name V ...
- Java数组的应用:案例:杨辉三角,三维数组,字符串数组
//import java.util.Arrays; //包含Arrays //import java.util.Random; public class HelloWorld { public st ...
- Android光线传感器-android学习之旅(65)
主要讲解光线传感器的使用,其实所有的传感器用法类似 主要是定义一个TextView用来显示光线强度,用完了以后记得在OnDestory里面释放资源 代码如下 public class MainActi ...
- Google浏览器设置搜索打开新的标签页
每次用google搜索的时候,点击进去原来的搜索页面就不见了 ,其实可以设置打开新的标签页 1.登陆Chrome 2.登陆这个网址https://www.google.com/preferences ...
- (四十二)tableView的滑动编辑和刷新 -局部刷新和删除刷新 -待解决问题
tableView的局部刷新有两个方法: 注意这个方法只能用于模型数据的行数不变,否则会出错. [self.tableView reloadRowsAtIndexPaths:<#(NSArray ...
- 《java入门第一季》之Random类和获取随机数案例
/* * Random:产生随机数的类 * * 构造方法: * public Random():没有给种子,用的是默认种子,是当前时间的毫秒值下的随机数,所以会一直变化 * public ...
- Java序列化Serializable和Externalizable
纸上得来终觉浅,绝知此事要躬行 --陆游 问渠那得清如许,为有源头活水来 --朱熹 什么是Java序列化?为什么出现Java序列化?怎样实现Java序列化? 一.什么是Java序列化 ...
- 【翻译】Ext JS 4——Ajax和Rest代理处理服务器端一场和消息的方法
原文:EXTJS4 - Handle Server-side exceptions and message from an Ajax or Rest proxy 作者:Raja 可能要处理的情况:su ...
- 【Android 应用开发】 Ubuntu 安装 Android Studio (旧版本|仅作参考)
. 果断换Ubuntu了, Ubuntu的截图效果不好, 不能设置阴影 ... 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article ...