从输入URL到页面展现发生了什么

作为一道经典的前端面试题，从URL输入到页面展现具体发生了什么，有哪些步骤,是一个合格的前端攻城狮必须掌握透彻的一个点。我自己也google了很多文章，下面从一个纯小白的角度去谈谈自己的理解。

大体分为以下几个步骤：

1. 在浏览器中输入URL
2. DNS解析
3. 服务器处理
4. 浏览器处理
5. 绘制网页

1. 在浏览器中输入URL

• 什么是URL

URL：统一资源定位符，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

• URL的组成

URL结构

protocol

访问协议：它告诉浏览器如何处理将要打开的文件。web站点中最常用的模式是超文本传输协议http，其次为https协议。在URL中（http://xxx.xx/xx）协议的分隔符为//，匹配值包含 :。

hostname

域名一般由英文字母和阿拉伯数字以及横"－"组成，最长可达67个字符（包括后缀），并且字母的大小写没有区别，每个层次最长不能超过22个字母。这些符号构成了域名的前缀，主体和后缀等几个部分，组合在一起构成一个完整的域名。当然，IP也可以充当domain的作用。

port

端口对应的是服务器当前应用正在监听的网络接口，浏览器默认值为80。分隔符为hostname后的:。

pathname

路径名部分，用于指明资源位于服务器的位置（相对的）。类似于分层级的文件系统。

search

查询，通过提供参数缩小数据库的检索范围，在url中search以?开始，每对参数以&分割，参数的键值分隔符为=，如?act=del&id=21。

hash

hash作为锚点，用来标记文档内的位置，此段标记仅体现在浏览器上，http请求会忽略此段内容，修改hash不会触发页面的跳转刷新。也由于其特性，目前越来越多的用在单页组件中。

更多细节请参考原文。

• 用户输入URL

当用户想访问某一个页面,例如百度,就会在浏览器中输入URL（网址） www.baidu.com。实际上浏览器并不知道这个网址是什么，这时就需要查找网址所在服务器的ip地址，找到所对应的资源文件。这个过程就是 DNS解析(域名解析)。

2. DNS解析

• 什么是DNS

DNS:Domain Name System，域名系统。是互联网上的一种服务。它作为将域名和IP地址相互映射的分布式数据库，能够使人更方便的访问互联网。

• DNS解析

人们习惯记忆域名，但机器间互相只认IP地址，域名与IP地址之间是多对一的关系，一个ip地址不一定只对应一个域名，且一个域名只可以对应一个ip地址，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器来完成，整个过程是自动进行的。

• DNS解析流程

1. 浏览器缓存 :浏览器会缓存DNS记录一段时间.
2. 系统缓存:从本地hosts文件查找是否有该域名和对应IP.
3. 路由器缓存:一般路由器也会缓存域名信息
4. IPS DNS缓存:例如在电信的服务器上查找缓存.

如果都没有找到,则向根域名服务器查找对应IP,根域名服务器把请求发到下一级.直到找到IP.具体流程如下

DNS解析流程

关于DNS的几个基本概念以及解析流程参考链接.

3. 服务器处理

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

常见的Web服务器有:Apache 、Nginx、IIS等。

• Web服务器接受用户请求
  大概来讲就是接受用户请求，查找对应资源，比如一个html文件。或者反向代理到其他Web服务器。具体过程请参考链接：Web处理请求。

4. 浏览器处理

• HTML字符串被浏览器接收后一句句读取解析。
• 解析到<link>标签重新发送请求获取CSS。
• 解析到<script>标签发送请求获取js.并执行代码。
• 解析到<img>标签后发送请求获取图片资源。

5. 绘制网页

浏览器根据HTML和CSS计算得到渲染树，绘制并执行js。

小结

在写文章的同时自己的思路也越来越清晰。发现了自己很多知识盲区。以后还会不定期更新本文，查漏补缺，希望自己能做一个优秀的前段攻城狮！