本文作者：上海驻云开发总监 陈昂
浏览器工作原理
当你打开一个个设计漂亮、简洁大方的网页，有没有想过浏览器是如何展现这么一个网页的呢。当你在这些网页上输入你的淘宝账号登录购买东西的时候，有没有想过，你的账号密码、身份证号、手机号、真实姓名，这些信息会不会泄露，被黑客利用呢？在了解网络安全方面的知识之前我们先简单了解下浏览器的工作原理，以辅助我们更好的理解网络安全知识。
- 浏览器分类
现代浏览器从内核上来说，主要分为以下6大类：
- Trident内核，代表是IE
- EDGE内核，代表是微软的Edge浏览器
- Gecko内核，代表是Firefox
- WebKit内核，代表是Safari和Chrome
- Blink内核，代表是最新的Chrome
- Presto内核，代表是Opera
其中Trident、Gecko、Webkit、Presto已在市场存在多年。但是浏览器技术发展很是迅猛。随着微软最新浏览器Edge的诞生，采用Trident内核被诟病多年的IE浏览器终于要逐渐退出浏览器舞台了。而Blink是Google Chrome浏览器采用的新内核，由此，Google似乎也要和Webkit阵营分道扬镳，Opera也宣称要紧抱Blink的大腿，一场看不见硝烟的战争似乎又在酝酿。不过这里不再过多讨论。有兴趣的朋友可以关注下浏览器内核发展的最新动向。但不论浏览器怎么发展变化，浏览器的组成和浏览器加载网页的原理都是大同小异，不会有太大变化的。下图是浏览器的主要组成模块：
图 1浏览器组成模块
浏览器加载顺序
当我们在浏览器地址栏输入一个网址（比如：http://cloudcare.cn）， 点击回车后，浏览器是如何加载网页的呢？
- DNS Lookup
首先，点击回车后，浏览器是无法识别cloudcare.cn是什么的，它也不知道你要访问的cloudcare.cn这个网站放在哪里。这个时候，就需要有人告诉浏览器，你应该去哪台服务器访问这个网站。这个“人”就是DNS(Domain Name System，域名系统)，我们从图中看下DNS工作原理。
假如本地配置的DNS服务地址是223.5.5.5
大致步骤是这样的：
- 浏览器发送cloudcare.cn寻址请求给DNS服务器
- DNS服务返回数据告诉本地电脑cloudcare.cn的服务器地址是10.0.0.1
- 本地电脑缓存DNS数据，并发送cloudcare.cn访问请求给10.0.0.1这个服务器
- 服务器和本地电脑建立TCP连接，进行数据交互
注：关于DNS缓存和路由寻址，大家有兴趣可以Google
- TCP连接和HTTP
当TCP连接建立后，就可以进行数据传输了。而数据的传输是要满足HTTP协议的（分为1.0和1.1两个版本）,包含有连接、消息、请求、响应等一系列规定。
一个页面的加载少则数个HTTP请求，多则几十个甚至上百个HTTP请求。一个HTTP的请求头大概是这个样子的：
一个HTTP响应后的头大概是这个样子的：
我们常说的200、404、500就是相应的状态码了。
而我们最关心的可能就是HTTP 的响应Body了, 一个简单的相应body类似是这个样子的
是不是很熟悉？这就是我们预先编辑好的HTML页面代码。
当我们拿到这么一个页面代码后，浏览器是怎么渲染成一个功能丰富，简洁漂亮网页的呢？我们先看下HTML的代码结构
- HTML代码结构
一个完整的HTML代码，应该包含html, head, body 这三个标签
<html>
<head>
</head>
<body>
</body>
</html>
其中head标签定义文档的头部，可以引用脚本，指示样式表，提供原信息等。这里定义的东西不会真正展现在页面。
Body标签下面定义了页面需要展示的元素和布局。关于HTML大家可以自行搜索。
接下来，我们看下浏览器的渲染过程
- HTML页面渲染过程
假如cloudcare.cn的首页是这样的：
当浏览器从服务器第一次拿到页面数据时候，就是上面这个样子，我们称之为基础文档(document)，浏览器会把这个基础文档转化为称之DOM树的结构化对象存储在内存里面，然后根据这个DOM树，进行渲染，转化为浏览器可视化的东西。
在渲染的时候，浏览器会从上到下依次渲染DOM树，当发现有外链的资源或是脚本的时候（如：上图link、script、img标签），会异步发起外链资源HTTP请求。同时解析继续。
如果你的网络环境不好，网速很慢的话，可能会看到这样一个现象：
- 网页先呈现“Hello world” 字样
- 然后图片逐渐加载出来
- 如果样式表里面定义了类似 div {color: red;} 的样式。当样式表加载完后，”Hello world”字样会突然变成红色字体。
- Cookies
HTTP协议里面定义了Cookies的操作。Cookies的中文名称作“小型文本文件”，它以域名为隔离空间存储在浏览器所在电脑的本地磁盘上。他有两个重要的特点：
- 不能跨域访问（子级域名除外），例如，在cloudcare.cn域名下无法访问 baidu.com域名下面的cookies。
- 每次的HTTP请求都会在请求头里面自动带上cookies发送到后端服务器。
关于浏览器的具体工作原理，这里有一篇文章讲解的非常的详细：http://taligarsiel.com/Projects/howbrowserswork1.htm
这篇给大家总结介绍了浏览器相关的一系列知识，下篇将为大家带来重头的常见WEB攻击，敬请期待~~~同时如果喜欢我们的话就订阅我们吧，还可以关注微信公众号：架构云专家频道。每天新鲜干货定时推送噢~
