浏览器工作原理：从URL输入到页面展现到底发生了什么？

这个时代，是互联网的时代。使用浏览器搜索，浏览网页对于每个人来说都不陌生。但是，当你打开浏览器地址栏输入网址（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 到页面加载完成的过程中都发生了什么？

1. 在浏览器输入URL
2. 域名解析（解析的过程由1 - 5，找到IP为止）
   1. 浏览器缓存 - 浏览器会缓存DNS记录一段时间
   2. 系统缓存 - 从Hosts 文件查找是否有该域名和对应IP
   3. 路由器缓存 - 一般路由器也会缓存域名信息
   4. ISP DNS缓存 - 比如到电信的DNS上查找缓存
   5. 如果都没有找到，则像根域名服务器查找域名对应IP，根域名服务器把请求转发到下一级，直到找到IP
3. 服务器处理
   Web服务器接受用户的 Request 交给网站代码，或者接受请求反向代理到其他Web服务器
   1
   如图1：发送一个http://jirengu.com的请求，Web服务器（Nginx）中写好的配置文件将http://jirengu.com与对应文件/var/www/jirengu下的代码匹配.

4. 网站处理流程
   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;

5. 浏览器处理
   1. HTML字符串被浏览器接受后被一句句读取解析
   2. 解析到<link>标签后重新发送请求获取 css
   3. 解析到<script>标签后发送请求获取 js，并执行代码
   4. 解析到<img>标签后发送请求获取图片资源
6. 绘制网页
   浏览器根据 HTML 和 CSS 计算得到渲染树，绘制到屏幕上 js 会被执行

结语：简单的操作背后，却不知道浏览器及服务器之间有着这么多的行为。越接近事物原理，越觉得自己对技术，甚至是世界的认知是多么的贫乏。在未知的道路上不断前进，并不知道路上会遇到什么，终点又在哪里，心中充满了敬畏却又忍不住亢奋。这大致就是每个程序员在学习技术的大道上越走越坚定的原因吧。