前言
扯一扯从你输入网址到网页呈现发生了什么。
一. 输入URL
URL(Uniform Resource Locator)，统一资源定位符,它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。它也包含协议部分，是浏览器和万维网之间沟通的方式，常见的协议有http、https、ftp、file····
二 .域名的解析
当你输入http://baidu.com时，实际上浏览器并不知道baidu.com是什么东西，它需要查找baidu.com的所在服务器的IP地址才能找到目标。
1.什么是域名
例如在http://baidu.com中，baidu.com就是该网址的域名。
2.为什么不直接使用IP地址而发明域名
因为域名比一串数字的IP地址更容易记住，所以使用域名。
3.IP地址是什么
IP地址是指互联网协议地址（Internet Protocol Address）。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。
- 每个网络上的设备都有IP地址例如
192.168.0.1。 - 局域网的IP地址和公网的IP地址是有差异的。
-
127.0.0.1代表本机的IP地址。
4.域名解析的流程
- 浏览器会自动缓存DNS记录一段时间，浏览器会检查缓存中有没有这个域名对应的解析过的IP地址，如果有解析过程就此结束。
- 系统缓存，从系统Hosts文件中查找是否有该域名和对应的IP。
- 路由器缓存，一般路由器也会缓存域名信息。
- IPS DNS缓存- 比如到电信的DNS 上查找缓存。
- 如果以上方法都没有找到，则向根域名服务器查找对应的IP地址，根域名服务器把请求转发到下一级，一直到找到IP。
问：当电脑上不了网了，为什么修改DNS为
8.8.8.8或者114.114.114.114?
答：
8.8.8.8是谷歌提供的DNS服务器，跳过上述步骤1-5，直接在谷歌提供的DNS服务器里查找该域名。同理114.114.114.114是电信提供的DNS服务器。
经过以上IP寻址的过程，目标URL查找到对应的IP地址之后，通过IP地址查找到对应的服务器，浏览器将用户发起的http请求发送给服务器。下一步就到了服务器处理阶段的工作。
三.服务器处理
每台服务器上都会安装处理请求的应用web server，常见的web server产品有Apache、Nginx、IIS、Lighttpd····
web server 担任管控的角色，对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，Node.js，或者一些其它的服务器端技术等），然后返回后台程序处理产生的结果作为响应。
四.网站处理阶段
MVC
MVC是一种使用MVC（Model-View-Control 模型-视图-控制器）设计创建web程序的模式。
- Model（模型）模型是将实际开发中的业务规则和所涉及的数据格式模型化，应用于模型的代码只需写一次就可以被多个视图重用。在MVC的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。*
- View（视图）是应用程序中用于处理程序数据逻辑部分。
- Control（控制器）控制器接受用户的输入并调用模型和视图去完成用户的需求。Controller处于管理角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据。
总结而言，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。因此，下一步就来到浏览器处理阶段。
浏览器处理
HTML字符串被浏览器接受后被一句句读取解析，解析到link 标签后重新发送请求获取css，解析到，script标签后发送请求获取 js，并执行代码，解析到img 标签后发送请求获取图片资源。
加载
浏览器对html页面的加载是自顶向下的，并在加载的过程中进行解析与渲染。遇到link，image，script标签时浏览器会再次向服务器发送请求获取相应的css文件，图片文件，js文件，并执行js代码。
解析与渲染
将html文档解析生成解析树（DOM树），这是由DOM元素以及属性节点组成，树根是document对象。
构建渲染树是DOM树可视化的表示，目的是为了以正确的顺序绘制文档内容。不可见的DOM元素不会被插入渲染树中（例如display:none;）,还有像一些节点的位置为绝对或浮动定位，这些节点会在文本流之外，因此会在两棵树上的不同位置，渲染树标识出真实的位置，并用一个占位结构标识出他们原来的位置。
六. 绘制网站
浏览器根据渲染树绘制网站并最终展现在浏览器上。
