这个时代，是互联网的时代。使用浏览器搜索，浏览网页对于每个人来说都不陌生。但是，当你打开浏览器地址栏输入网址（URL），敲下回车时，浏览器就将你想要检索的网站呈现在了页面上。等一等，这个过程发生了什么？太酷了，下面将带你一一了解浏览器的工作原理。
基本概念
什么是URL
- URL(Uniform Resource Locator)：统一资源定位符，用于定位互联网上的资源。比如
https://www.baidu.com就是URL。URL通常对应协议、域名、端口号及一些其他信息。 - http、https、ftp、file协议
http://jirengu.com/blog //明文传输，定位网络上某个资源
file://Users/zuodong/Desktop/index.html //定位本地电脑上的一个文件
https://www.baidu.com //经过加密后的http协议，是个安全的http协议
//jirengu.com/static/imgs/a.png //当前文件URL的协议与当前页面协议一致
-
域名：对于
http://jirengu.com:8080/blog这个URL，jinrengu.com就是域名，浏览器实际上并不知道jirengu.com到底是什么。所以需要查找jirengu.com网站所在的服务器的IP地址，才能找到目标。 -
IP地址：每一个处于互联网中的设备都有IP地址，形如
192.168.0.1（127.0.0.1代表本机的IP）。
DNS（Domain Name System）
是域名解析服务，DNS可以将域名映射到对应的IP地址。
那么为什么不直接使用IP呢？因为域名相较于IP，有语义化的作用，所以要发明域名。
服务器
服务器是一台安装系统的机器，常见的系统如 Linux、windows server 2012。
Web服务器
系统里安装的处理请求的应用叫 Web server，常见的 Web服务器有 Apache、Nginx、IIS、Lighttpd。
对这些专有名词有一定的了解后，我们来看看浏览器的工作原理吧
从输入 URL 到页面加载完成的过程中都发生了什么？
- 在浏览器输入URL
- 域名解析（解析的过程由1 - 5，找到IP为止）
- 浏览器缓存 - 浏览器会缓存DNS记录一段时间
- 系统缓存 - 从Hosts 文件查找是否有该域名和对应IP
- 路由器缓存 - 一般路由器也会缓存域名信息
- ISP DNS缓存 - 比如到电信的DNS上查找缓存
- 如果都没有找到，则像根域名服务器查找域名对应IP，根域名服务器把请求转发到下一级，直到找到IP
- 服务器处理
Web服务器接受用户的 Request 交给网站代码，或者接受请求反向代理到其他Web服务器
1
如图1：发送一个http://jirengu.com的请求，Web服务器（Nginx）中写好的配置文件将http://jirengu.com与对应文件/var/www/jirengu下的代码匹配. -
网站处理流程
MVC 模型(model)-视图(view)-控制器(controller)
- 模型（Model）：数据保存，如访问数据库
- 视图（View）：用户界面，实现数据有目的显示
- 控制器（Controller）：业务逻辑，不同层面的组织作用，控制应用程序的流程。
/** 模拟Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 负责存放数据 */
M.data = "hello world";
/** View 负责将数据输出到页面上 */
V.render = (M) => { alert(M.data); }
/** Controller 作为一个 M 和 V 的桥梁 */
C.handleOnload = () => { V.render(M); }
/** 在网页读取时触发 Controller */
window.onload = C.handleOnload;
- 浏览器处理
- HTML字符串被浏览器接受后被一句句读取解析
- 解析到
<link>标签后重新发送请求获取 css - 解析到
<script>标签后发送请求获取 js，并执行代码 - 解析到
<img>标签后发送请求获取图片资源
- 绘制网页
浏览器根据 HTML 和 CSS 计算得到渲染树，绘制到屏幕上 js 会被执行
结语：简单的操作背后，却不知道浏览器及服务器之间有着这么多的行为。越接近事物原理，越觉得自己对技术，甚至是世界的认知是多么的贫乏。在未知的道路上不断前进，并不知道路上会遇到什么，终点又在哪里，心中充满了敬畏却又忍不住亢奋。这大致就是每个程序员在学习技术的大道上越走越坚定的原因吧。
网友评论