文档章节

关于输入URL到页面加载的一个简洁概括

小破孩丶
 小破孩丶
发布于 2016/05/19 19:22
字数 1708
阅读 11
收藏 0

一. 从输入URl到浏览器接受过程

.url到cpu

首先是URL(任何的一种传感器),当人们在传感器器上触摸,电子会影响该区域的电压变化,再由控制器总线接口将信号传到CPU上。比如此有Nexus 5 的列子。

如图是一种传感器的示列图。

 

clearpad-i2c

.cpu内部处理

 

i2c-wave

触屏控制器将电气信号发送到 CPU 对应的引脚上,接着就会触发 CPU 的中断机制

shell@flo:/ $ cat /proc/interrupts

            CPU0

  17:          0       GIC  dg_timer

 294:    1973609   msmgpio  elan-ktf3k

 314:        679   msmgpio  KEY_POWER

如图为Linux7的部分结果。因为是elan触屏控制器,所以结果中elan-ktf3k是中断请求信息,294是中断号,1973609是触发次数。

在不考虑优先级的问题,如ARMv7架构处理器,当中断发生,CPU会停下当前运行的程序,保持当前执行状态,然后跳转到对应中断程序处理

4.从操作系统 GUI 到浏览器

GUI框架的存在是方便应用程序开发,例如Android中的一套GUI框架中,有个EventHub服务会通过epoll来监听文件,然后将信息传递到Android的窗口管理服务。

二.浏览器向网卡发送数据

浏览器在接收到URL后会先进行判断,然后直接调用浏览器内核中对应方法,在通过HTTP的发送请求从应用层角度看主要有两种事情:通过DNS查询IP,通过Socket发送数据。

.DNS查询

; <<>> DiG 9.8.3-P1 <<>> +trace fex.baidu.com
;; global options: +cmd
.           11157   IN  NS  g.root-servers.net.
.           11157   IN  NS  i.root-servers.net.
.           11157   IN  NS  j.root-servers.net.
.           11157   IN  NS  a.root-servers.net.
.           11157   IN  NS  l.root-servers.net.
;; Received 228 bytes from 8.8.8.8#53(8.8.8.8) in 220 ms
 
com.            172800  IN  NS  a.gtld-servers.net.
com.            172800  IN  NS  c.gtld-servers.net.
com.            172800  IN  NS  m.gtld-servers.net.
com.            172800  IN  NS  h.gtld-servers.net.
com.            172800  IN  NS  e.gtld-servers.net.
;; Received 503 bytes from 192.36.148.17#53(192.36.148.17) in 185 ms
 
baidu.com.      172800  IN  NS  dns.baidu.com.
baidu.com.      172800  IN  NS  ns2.baidu.com.
baidu.com.      172800  IN  NS  ns3.baidu.com.
baidu.com.      172800  IN  NS  ns4.baidu.com.
baidu.com.      172800  IN  NS  ns7.baidu.com.
;; Received 201 bytes from 192.48.79.30#53(192.48.79.30) in 1237 ms
 
fex.baidu.com.      7200    IN  CNAME   fexteam.duapp.com.
fexteam.duapp.com.  300 IN  CNAME   duapp.n.shifen.com.
n.shifen.com.       86400   IN  NS  ns1.n.shifen.com.
n.shifen.com.       86400   IN  NS  ns4.n.shifen.com.
n.shifen.com.       86400   IN  NS  ns2.n.shifen.com.
n.shifen.com.       86400   IN  NS  ns5.n.shifen.com.
n.shifen.com.       86400   IN  NS  ns3.n.shifen.com.
;; Received 258 bytes from 61.135.165.235#53(61.135.165.235) in 2 ms

首先由本机所设置的 DNS 服务器(8.8.8.8)向 DNS 根节点查询负责 .com 区域的域务器,然后通过其中一个负责 .com 的服务器查询负责 baidu.com 的服务器,最后由其中一个 baidu.com 的域名服务器查询 fex.baidu.com 域名的地址。

.通过Socket发送数据

有了IP地址,就可以通过Socket API来发送数据,也就是可以通过TCP,UDP两种协议。

.底层网络协议具体例子

 

wireshark

最底下是实际的二进制数据,中间是解析出来的各个字段值,可以看到其中最底部为 HTTP 协议,在 HTTP 之前有 54 字节(0x36),这就是底层网络协议所带来的开销,我们接下来对这些协议进行分析。

在 HTTP 之上是 TCP 协议,它的具体内容如下图所示:

 

wireshark

通过底部的二进制数据,可以看到 TCP 协议是加在 HTTP 文本前面的,它有 20 个字节,其中定义了本地端口和目标端口、顺序序号、窗口长度等信息,以下是 TCP 协议各个部分数据的完整介绍:

 0                   1                   2                   3

 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|          Source Port          |       Destination Port        |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|                        Sequence Number                        |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|                    Acknowledgment Number                      |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|  Data |           |U|A|E|R|S|F|                               |

| Offset| Reserved  |R|C|O|S|Y|I|            Window             |

|       |           |G|K|L|T|N|N|                               |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|           Checksum            |         Urgent Pointer        |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|                    Options                    |    Padding    |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

|                             data                              |

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

在 TCP 协议中并没有 IP 地址信息,因为这是在上一层的 IP 协议中定义的,如下图所示:

 

wireshark

IP 协议同样是在 TCP 前面的,它也有 20 字节,在这里指明了版本号(Version)为 4,源IP 为 192.168.1.106,目标IP 为 119.75.217.56,因此 IP 协议最重要的作用就是确定 IP 地址。

但是,光靠 IP 地址是无法进行通信的,因为 IP 地址并不和某台设备绑定,所以在底层通信时需要使用一个固定的地址,这就是 MAC(media access control) 地址,每个网卡出厂时的 MAC 地址都是固定且唯一的。

因此再往上就是 MAC 协议,它有 14 字节,如下所示:

 

wireshark

当一台电脑加入网络时,需要通过ARP协议告诉其它网络设备它的 IP 及对应的 MAC 地址是什么,这样其它设备就能通过 IP 地址来查找对应的设备了。

最顶上的 Frame 是代表 Wireshark 的抓包序号,并不是网络协议

三.数据从本机网卡发送到服务器

.WIFI路由

Wi-Fi 网卡需要通过 Wi-Fi 路由来与外部通信,原理是基于无线电,通过电流变化来产生无线电,这个过程也叫「调制」,而反过来无线电可以引起电磁场变化,从而产生电流变化,利用这个原理就能将无线电中的信息解读出来就叫「解调」,其中单位时间内变化的次数就称为频率,目前在 Wi-Fi 中所采用的频率分为 2.4 GHz 和 5 GHz 两种。

.主干网间的传输

长线的数据传输一般取光纤作为介质,因为光纤的抗干扰性要强得多,并且能耗也小得多。

.IDC内网

数据通过光纤最终会来到服务器所在的 IDC 机房,进入 IDC 内网,光纤中的数据将进入集群(Cluster)交换机,然后再转发到机架(Rack)顶部的交换机,最后通过这个交换机的端口将数据发往机架中的服务器

 

rack

正面                                  侧面

 

 

 

四.服务器接收数据后的处理

.负载均衡

请求在进入到真正的应用服务器前,可能还会先经过负责负载均衡的机器,它的作用是将请求合理地分配到多个服务器上,同时具备具备防攻击等功能

.web server

请求经过前面的负载均衡后,将进入到对应服务器上的 Web Server,比如 Apache、Tomcat、Node.JS 等

 

 

五.服务器返回数据后浏览器处理

http请求返回到HTML传递到浏览器后,最主要的是进行编码,浏览器通过指定的UTF-8或者GBK等的指定来对页面进行一个编码。

 

六.浏览器的页面展现

这里最主要的就是内存区域的映射。然后就是一个LCD的原理,通过LED作为光源在电子的碰撞下,通过反射来呈现在屏幕上。

© 著作权归作者所有

小破孩丶
粉丝 0
博文 1
码字总数 1708
作品 0
峨眉山
私信 提问
记录从quicklink源码中发散出来的知识点

最近Google Chrome lab的一个开源项目quicklink很火,号称可以极大提升页面的加载速度,社区中也有很多使用该项目来做页面加载优化的尝试,但quicklink项目本身的实现其实极为简洁,源码总共...

墨筝
2018/12/22
0
0
shooke/corephp2

CorePHP 简介: CorePHP框架是一个快速,安全,灵活的php开源框架,主要是为了简化和快速开发小型项目和开源系统二次开发而诞生。它既可以完美的支持MVC模式,又可以不受限制的支持传统编程模...

shooke
2015/01/30
0
0
WebView深度学习(一)之WebView的基本使用以及Android和js的交互

前言:随着市场需求的不断变化,原生安卓已经无法满足客户的需要了,现在很多app都在使用Android和h5的交互实现某些功能,比如商品详情页,文章详情页面,商品点评页面,还有某些复杂的展示页...

aweiloveandroid
2017/07/01
0
0
Python分布式爬虫前菜(1):关于静态动态网页内容获取的N种方法

爬虫是我们快速获取需要的数据的一个非常有效的途径,而爬虫的第一步便是能够请求远方服务器为我们返回所需的网页信息。我们知道,正常情况下在浏览器上我们只要输入正确的统一资源定位器url...

happengft
2017/03/02
0
0
关于vue-router那些事

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

howgod
2018/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部