从输入网址到页面展现发生了什么（浏览器渲染机制）

想要知道这个问题，我们还需要先了解一些概念。

什么是url？

URL： URL是Uniform Resource Location的缩写，译为“统一资源定位符”。通俗地说，URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。

什么是IP？

IP：就像每个电话用户有一个全世界惟一的电话号码一样，Internet中的每一台计算机也有单一的地址。为了使信息能够在Internet上准确快捷地传送到目的地，连接到Internet上的每台计算机必须拥有一个惟一的地址。

什么是DNS？

DNS 是域名系统 (Domain Name System) 的缩写，该系统用于命名组织到域层次结构中的计算机和网络服务。DNS 命名用于 Internet 等 TCP/IP 网络中，通过用户友好的名称查找计算机和服务。当用户在应用程序中输入 DNS 名称时，DNS 服务可以将此名称解析为与之相关的其他信息，如 IP 地址。

了解了这些我们就开始解读一下从url的输入到网页最终的输入发生了什么。

1. 在浏览器中输入网址

2. 浏览器开始进行域名解析。

你在浏览器中输入网址浏览器并不知道你要做什么，或者你要到那里去。于是它需要对这个域名进行解析。所谓的解析域名就是查找到域名对应的ip地址。
解析流程：

• 浏览器缓存 – 浏览器会缓存DNS记录一段时间
• 系统缓存 - 从 Hosts 文件查找是否有该域名和对应 IP
• 路由器缓存 – 一般路由器也会缓存域名信息
• ISP DNS 缓存 – 去到互联网服务提供商的DNS上查找IP
• 如果都没有找到，则向根域名服务器查找域名对应 IP，根域名服务器把请求转发到下一级，直到找到 IP

3.服务器处理

服务器是一台安转服务器系统的计算机，常用的服务器系统如：Linux、windows server 2012
服务器里安装回应请求的应用是：Web sever
web server 担任管控的角色，对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等），然后返回后台程序处理产生的结果作为响应。

4.网站处理流程

MVC模型 模型(model)-视图(view)-控制器(controller)

5.浏览器处理

通过后台处理返回的html字符串结果会被浏览器读取解析，对应就是html页面加载、解析、渲染的工作。

• 加载
  浏览器对一个html页面的加载顺序是从上而下的，并在加载过程并行进行解析渲染处理。在这个过程中遇到link标签、image标签、script标签时，浏览器会再次向服务器发送请求获取css文件、图片资源、js文件，并执行js代码，同步进行加载解析。
• 解析、渲染
  解析的过程，其实就是生成解析树，即dom树。dom树是由dom元素及属性节点组成，加上css解析的样式对象和js解析后的动作实现。而渲染，就是将DOM树进行可视化表示。下一步就来到了绘制网页的工作阶段。

6.绘制网页

浏览器通过上面步骤计算得到渲染树，是DOM树的可视化表示，构建渲染树使页面以正确的顺序绘制出来，遵循一定的渲染规则，经过一系列的渲染工作，实现网站页面的绘制，由此最终完成了页面展示。