从输入 URL 到浏览器接收的过程中发生了什么事情？

What really happens when you navigate to a URL

上面两篇文章都解读的很好，值得阅读。

接下来在总结一下这个过程：

1、首先，会查询缓存，如果缓存存在的话则直接响应，否则继续下面过程；

2、当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。DNS查找过程如下：浏览器缓存 、系统缓存、路由器缓存、ISP DNS 缓存、递归搜索

3、浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

　 4、一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

5、此时，`Web`服务器提供资源服务，客户端开始下载资源。如果资源可缓存则存入缓存。

　 6、响应返回后，便进入了我们关注的前端模块，浏览器决定如何处理这些响应（例如，它是HTML页面，一张图片，一段音乐）。简单来说，浏览器会解析`HTML`生成`DOM Tree`，其次会根据CSS生成CSS Rule Tree，而`javascript`又可以根据`DOM API`操作`DOM`

从输入 URL 到浏览器接收的过程中发生了什么事情？的更多相关文章

  1. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  2. [转]从输入url到页面加载完成的过程中都发生了什么事情

    第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器 ...

  3. 从输入URL到页面加载完成的过程中都发生了什么事情？

    为了便于理解,我将整个过程分为了六个问题来展开. 第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱 ...

  4. 在浏览器中输入url地址 -> 显示主页的过程

    -来自<图解HTTP> 最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么.仔细思 ...

  5. 【转】 从输入 URL 到页面加载完成的过程中都发生了什么事情？

    该问题总结 一. 往浏览器输入URL后给你一个页面,你天天在使用的东西,学过计算机网络的知道是怎么回事,就DNS解析然后页面的回馈,不过要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的 ...

  6. Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情？

    从输入URL到页面加载完成的过程中都发生了什么事情?--这是一个经典的面试题: 主要是关于计算机网络方面的知识基础,对于非科班计算机自学web开发的同学可能理解起来就很困难. StackOverFlo ...

  7. 一个网页从输入URL到页面加载完成的过程中都发生了什么事情？

    这是一个前端的经典面试题,很多大公司面试时都会被问及,涉及的面也是非常多. 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中 ...

  8. 《浏览器工作原理与实践》<04>从输入URL到页面展示，这中间发生了什么？

    “在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...

  9. 一文摸透从输入URL到页面渲染的过程

    一文摸透从输入URL到页面渲染的过程 从输入URL到页面渲染需要Chrome浏览器的多个进程配合,所以我们先来谈谈现阶段Chrome浏览器的多进程架构. 一.Chrome架构 目前Chrome采用的是 ...

随机推荐

  1. Navicat 的使用（一）

    1.创建连接 主机名 : 可以不写名称随意 主机名/IP地址:localhost或者127.0.0.1 都是本机的意思 端口:默认3306   尽量不要改怕与其余端口重复,如有重名端口系统会报错 用户 ...

  2. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  3. CSS------当内容超出div宽度后自动换行

    <div class="AllReceivers-normal" style="widht:100%;height:100%;word-wrap: break-wo ...

  4. Windows XP SP3 Professional 微软(MSDN)官方原版系统

    Windows XP SP3 Professional 微软(MSDN)官方原版系统 Windows XP(版本号:5.1,开发代号:Whistler)是微软公司推出供个人电脑使用的操作系统,其RTM ...

  5. 注释(Annotation)

    J2SE 5.0提供了很多新的特征.其中一个很重要的特征就是对元数据(Metadata)的支持.在J2SE 5.0中,这种元数据称为注释(Annotation).通过使用注释,程序开发人员可以在不改变 ...

  6. 改造rm命令为mv

    :刚在群里面看到小伙伴误操作把服务器上重要的文件给删掉了,于是google了下,找到一篇文章把rm命令改造成mv命令,源博客如下:http://blog.csdn.net/dataspark/arti ...

  7. yum安装指定(特定)版本(旧版本)软件包的方法

    在命令行里输入: yum list SDL 注意这里类库的名字是区别大小写的. 参考 http://www.dabu.info/yum-install-specific-version-old-pac ...

  8. ecshop show_message

    格式lib_main.php show_message(内容, array(返回列表,继续编辑), array(连接地址一,链接地址二, 'info',false); true:自动跳转 输出: fu ...

  9. Python之路【第十一篇续】前端初识之CSS

    css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...

  10. 关于http请求

    response的Head值:  200 : 请求已成功,请求所希望的响应头或数据体将随此响应返回  304 : Not Modified 客户端有缓冲的文档并发出了一个条件性的请求,原来缓冲的文档还 ...