在浏览器输入url到页面打开，都做了些什么？

在浏览器输入url到页面打开，都做了些什么？

浏览器里输入网址
浏览器查找域名对应的IP地址
- （这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…）
  - 浏览器搜索自身DNS缓存
  - 搜索操作系统自身的DNS缓存（浏览器没有找到缓存或者缓存已失效）
  - 读取本地host文件（未找到）
  - 浏览器发起一个DNS的系统调用(向运营商DNS服务器发起域名解析请求)
    - 宽带运营商服务器查看自身缓存（未找到）
    - 运营商服务器发起一个迭代DNS解析请求（找根域DNS服务器->com域DNS服务器…）
    - 最后运营商服务器把结果返回给操作系统内核同时缓存起来
    - 操作系统内核把结果返回给浏览器
浏览器获取域名对应的IP地址后，发起HTTP“三次握手”
TCP/IP连接建立后，浏览器向web服务器发送一个HTTP请求
服务器的永久重定向响应（从http://example.com 到 http://www.example.com）
- 关于为什么要重定向。其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://example.com/和http://www.example.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。
浏览器跟踪重定向地址，发起GET请求
服务器”处理”请求，向浏览器发回一个HTML响应
浏览器解析显示HTML
浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
浏览器发送异步请求（ajax请求等）

查看浏览器DNS缓存（以chrome为例）
在chrome地址栏输入 chrome://net-internals/#dns

TCP/IP三次握手

DOM文档加载步骤

解析HTML结构
加载外部脚本和样式表文件
解析并执行脚本代码
构造HTML DOM模型 //ready
加载图片等外部文件
页面加载完毕//load

这里有一个坑我们在写脚本时候，以jQuery为例

1
2
3

$(document).ready(function(){
	//代码
})

1
2
3

$(document).load(function(){
	//代码
})

这两个是jQuery的文档加载方法，只是用ready就是在构建HTML DOM时候执行脚本用load就是页面加载完毕执行
更多内容可以看看jQuery源码的解析，这里顺带提一下
参考

慕课网 node.js基础 HTTP知识
 慕课网 Linux网络基础