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


网络通信走的一般是五层因特网协议,详见下图。图片来自于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. Uva - 804 - Petri Net Simulation

    Input: petri.in A Petri net is a computational model used to illustrate concurrent activity. Each Pe ...

  2. STL:set/multiset用法详解

    集合 使用set或multiset之前,必须加入头文件<set> Set.multiset都是集合类,差别在与set中不允许有重复元素,multiset中允许有重复元素. sets和mul ...

  3. [问与答]怎样在 Android Stuido中删除一个project

    sof Remove Project from Android Studio 问 第一次用Android Stuido,建立一个项目,却不知道怎么删除? 答 大概有3种方式 方式一 (简单实用) 点击 ...

  4. chrome "Provisional headers are shown"

    我的问题的,每次打开浏览器,点开有视频的页面(云平台的存储),然后当视频还没有加载完,就马上关闭,连续操作很多次(测试的暴力测试把),F12查看就有很多很多在加载中的连接,因为连续点击太多次了,第一个 ...

  5. javascript语法之for-in语句

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Android ViewManager解读之requestLayout() 详解

    尊重原创: http://blog.csdn.net/sk719887916/article/details/48464035 上篇<Android View 中invalidate() 你所不 ...

  7. 队列顺序存储 - 设计与实现 - API函数

    队列是一种特殊的线性表 队列仅在线性表的两端进行操作 队头(Front):取出数据元素的一端 队尾(Rear):插入数据元素的一端 队列不允许在中间部位进行操作! queue常用操作 销毁队列 清空队 ...

  8. Erlang Rebar 使用指南之一:入门篇

    Erlang Rebar 使用指南之一:入门篇 全文目录: https://github.com/rebar/rebar/wiki 本章原文: https://github.com/rebar/reb ...

  9. BMP 转 YUV (BMP2YUV)

    本文介绍BMP 转 YUV.其实这是以前"数据压缩"实验课上的内容,前几天有人问我相关的问题,突然发现自己有一段时间没有接触BMP也有些生疏了,因此翻出资料总结一下. BMP文件格 ...

  10. C++语言之构造函数

    #include <iostream> using namespace std ; class Cat { public: char name[20]; void Say_Name(voi ...