从在地址栏中输入了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. 【学习总结】Python-3- 类型判断之 isinstance 和 type 的区别

    菜鸟教程-Python3-基本数据类型 关于类型查询: type() 函数:可以用来查询变量所指的对象类型 用 isinstance()函数:判断是否是某个类型 两者的区别: type()不会认为子类 ...

  2. HTML中的img标签属性

    <img>标签 标签用于插入图片.它是单独使用的,没有闭合标签. <img src="https://fakeimg.pl/350x200/ff0000,128/000,2 ...

  3. shell input value from console

    echo "Please enter some input: " read input_variable echo "You entered: $input_variab ...

  4. 前端学习(三十一)canvas(笔记)

    canvas             画布    画图.做动画.做游戏===========================================    canvas就是新标签 必须获取绘图 ...

  5. filter 过滤emoji

    拦截器 public class EmojiFilter implements Filter { private FilterConfig filterConfig; public void init ...

  6. 【leetcode】316. Remove Duplicate Letters

    题目如下: Given a string which contains only lowercase letters, remove duplicate letters so that every l ...

  7. docker 数据持久化

    confluence #!/bin/bash docker run \ --name confluence \ --volume "$PWD/data/opt":/opt \ -- ...

  8. cocos2D-X not config ndk path

    { 双击击那个error,那个路径就加上了 File = >local.properties }

  9. python--有参装饰器、迭代器

    有参装饰器的引入: import time import random from functools import wraps def timmer(func): @wraps(func) def w ...

  10. spring整合hibernate之买书小测试

    spring来整合hibernate就是用spring来管理hibernate的sessionFactory和让hibernate来使用spring的声明式事务. 一:加入相应的jar包. 二:写hi ...