浏览器加载网页的过程

一、浏览器的功能

浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，通过DNS查询，将网址转换为IP地址。

二、为何要了解网页加载过程

如果想写出一个最佳实践的页面，就要好好了解浏览器是如何加载网页的。

• 了解浏览器如何进行加载：可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。
• 了解浏览器如何进行解析：可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
• 了解浏览器如何进行渲染：明白渲染的过程，在设置元素属性，编写js文件时，可以减少”reflow“”repaint“的消耗。

三、浏览器加载网页的步骤

输入网址后，实际经历以下几个步骤。

1、浏览器查找IP地址

（1）DNS服务器

第一步是找到我们输入的网址，即域名，所对应的IP地址。将域名和IP地址进行转换的地方，就是DNS服务器。

DNS（Domain Name Server，域名服务器）是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器。DNS中保存了一张域名(domain name)和与之相对应的IP地址 (IP address)的表，以解析消息的域名。 域名是Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。域名是由一串用点分隔的名字组成的，通常包含组织名，而且始终包括两到三个字母的后缀，以指明组织的类型或该域所在的国家或地区。

DNS查找过程如下：

• 浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
• 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
• 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
• ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

2、浏览器给web服务器发送HTTP请求

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档， 也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。目前最主流的三个Web服务器是Apache Nginx IIS。

3、网站服务的永久重定向响应

服务器给浏览器响应一个301永久重定向响应，为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://www.igoro.com/
和http://igoro.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。

4、浏览器跟踪重定向地址

现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。请求头部一般包括：
Accept
Accept-language
Accept-Encoding
Connection
User-Agent
Cookie
Host

5、 服务器“处理”请求

服务器接收到获取请求，然后处理并返回一个响应。

6、 服务器发回一个HTML响应

7、浏览器开始显示HTML

8、 浏览器发送请求，以获取嵌入在HTML中的对象

在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

9、 浏览器发送异步（AJAX）请求