从在地址栏中输入了URL,到浏览器展现出页面整个过程中,大概经历了如下过程:

  • 在浏览器地址中输入了URL并回车
  • 域名解析
  • 服务器处理请求
  • 浏览器处理
  • 网页的绘制

一、在浏览器地址中输入URL

首先解释一下URL的定义:

URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上的资源。

URL的格式一般为:协议类型://<主机名>:<端口>/<路径>/<文件名>

协议类型有http、https、ftp、file等等。其中http协议是最常见的网络传输协议,https则是进行加密的网络传输协议,安全性更高。

再来解释一下什么是IP:

IP 是Internet Protocol的缩写。也就是为计算机网络相互连接进行通信而设计的协议。在因特网中,它是能使连接到网上的所有计算机网络实现相互通信的一套规则,规定了计算机在因特网上进行通信时应当遵守的规则。

简单来说,每个处于互联网中的设备都有IP地址,比如192.168.0.1,127.0.0.1等等。

二、域名解析

域名解析过程中,域名指的是什么呢?

比如 https://www.baidu.com ,前面的"https"表示采用了https协议,而域名就是www.baidu.com,所以我们常说的网站名其实就是该网站的域名。同时域名www.baidu.com也在域名服务器绑定了一个IP,理论上输入与之对应的IP也是可以访问百度首页的,但是使用IP地址进行访问远不如使用域名方便,一个原因是域名更容易被人脑记住,同时域名也是很多公司的名字。

而域名解析这个过程,就是在键入了URL之后,把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站的一种服务。

浏览器具体会从以下几个缓存去查找域名对应的IP:

  • 浏览器缓存:浏览器会检查DNS缓存中是否有与该域名对应的IP
  • 系统缓存:从Hosts文件查找是否有对应域名和IP
  • 路由器缓存:路由器也会缓存DNS,从路由器的DNS中查找对应IP
  • IPS DNS:比如到8.8.8.8或者114.114.114.114,也就是谷歌或者互联网的应用提供商的DNS缓存服务器中查找IP

(DNS:Domain Name System,域名系统,因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。)

三、服务器处理

服务器是一台安装系统的机器,常见的系统有Linux、Windows Server 2012。而每台服务器的系统中都会安装处理请求的应用——Web server。

Web server可以解析接收到的HTTP请求(Rquest),返回一个HTTP响应(Response)给用户,或者接受请求后反向代理到其他的Web服务器进行别的解析。总而言之,服务器端都会产生相应的HTML响应让浏览器进行浏览。

具体接收到的HTTP请求则是在后台进行处理,后台处理的主流框架是按照MVC:模型(model)-视图(view)-控制器(controller)进行搭建的。

具体处理过程为:

四、浏览器处理

浏览器会接收到服务器处理返回的HTML字符串,然后进行解析,HTML页面经历了加载、解析、渲染过程。

比如浏览器解析到了link标签,浏览器会重新发送请求获取css文件;解析到了img标签,也会发送请求获取图片资源;当解析到了script标签,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。

五、绘制网页

浏览器根据HTML和css计算得到渲染树,最终绘制到屏幕上。也就是浏览器中我们能看到和进行交互的页面。

从URL输入到页面展现,过程中发生了什么?的更多相关文章

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

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

  2. 从URL输入到页面展现到底发生什么

    前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解!   从URL输入到页面展现 总体来说分为以下几个过程: DNS ...

  3. 从URL输入到页面展现到底发生什么?

    目录 前言 一.URL 到底是啥 二.域名解析(DNS) 1.IP 地址 2.什么是域名解析 3. 浏览器如何通过域名去查询 URL 对应的 IP 呢 4. 小结 三.TCP 三次握手 1.TCP 三 ...

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

    从输入 URL 到浏览器接收的过程中发生了什么事情? What really happens when you navigate to a URL 上面两篇文章都解读的很好,值得阅读. 接下来在总结一 ...

  5. 经典面试题:从 URL 输入到页面展现到底发生什么?

    前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解! 本文首发地址为GitHub 博客,写文章不易,请多多支持与关注 ...

  6. 从URL输入到页面展现到底发生什么?DNS 解析&TCP 连接

    DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 断开连接:TCP 四次挥手 一.什么是URL? ...

  7. 20170809-从URL输入到页面展现

    从URL输入到页面展现 1.输入URL URL:统一资源定位符,是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示. URL包含以下几部分:协议.服务器名称(或IP地址).路径.参数和查询. ...

  8. 在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合

    PHP程序的时候会在文件的最后加上一个闭合标签,如下: <?phpclass MyClass{public function test(){//do something, etc.}}?> ...

  9. 【转】SQL Server -- 已成功与服务器建立连接,但是在登录过程中发生错误

    SQL Server -- 已成功与服务器建立连接,但是在登录过程中发生错误 最近在VS2013上连接远程数据库时,突然连接不上,在跑MSTest下跑的时候,QTAgent32 crash.换成IIS ...

随机推荐

  1. git help

  2. Groovy学习:第二章 Groovy语言的关键特征

    1. 断言Assertion断言:用于判断预期的条件是否为真.例子:def list = [1,2,'x']assert list.size()==32. AST转换期使用的注释AST转换的注释:Gr ...

  3. js非数值的比较

    /** * 非数值的比较: * 1.对于非数值的比较时,会将其转换成数字然后再比较 * 2.如果符号两端是字符串的值进行比较时,不会将其转换为数字进行比较,而是 * 分别比较字符串中的字符的 unic ...

  4. 将一个对象赋值给另一个对象(使用element CheckBox中length报错)

    注意两个对象相似(比如form表单),千万不要直接赋值(会把对象的属性也变化),很容易漏掉一些属性.比如此次CheckBox报length的错误,就是因为用于存放checkbox复选框选项的数组进过赋 ...

  5. 个人公众号服务端开发Demo

    公众号出来很久了,也可以个人申请.知道公众号的服务端开发其实很简单,接口调用封装,数据存取,不外如是. 人一旦懒了,真的是 “无可救药” 了...现简单描述晚到的公众号HelloWorld 思路 公众 ...

  6. Vue路由组件vue-router

    一.路由介绍 Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are ...

  7. Cesium经纬度

    computed: { handler() { return new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas) } } ...

  8. 【网络】Vmware虚拟机下三种网络模式配置

    VMware虚拟机有三种网络模式,分别是Bridged(桥接模式).NAT(网络地址转换模式).Host-only(主机模式). VMware workstation安装好之后会多出两个网络连接,分别 ...

  9. Database基础(二):MySQL索引创建与删除、 MySQL存储引擎的配置

    一.MySQL索引创建与删除 目标: 本案例要求熟悉MySQL索引的类型及操作方法,主要练习以下任务: 普通索引.唯一索引.主键索引的创建/删除 自增主键索引的创建/删除 建立员工表yg.工资表gz, ...

  10. nginx调优配置

    nginx调优配置 user www www; #工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍于CPU. worker_processes 8; worker_cpu_affinity 0 ...