浏览器加载过程
(1)、浏览器通过DNS获取域名对应IP
(2)、建立TCP连接
(3)、发送http请求
(4)、html边下载边渲染
(5)、碰到内嵌JS 和 CSS，启动新的连接下载，阻塞渲染和JS执行(因此要把脚本放后面)
(6)、获取到CSS后，重新渲染
(7)、JS按标签顺序下载并执行
(8)、碰到内嵌img，启动新的连接下载，不会阻塞渲染
(9)、获取到img后，重新渲染
DNS: (1)客户机向本地域名服务器dns.company.com发出解析域名www.linejet.com的请求报文。 (2)本地域名服务器查询本地缓存, 假设没有该纪录, 则向根域名服务器NS.INTER.NET发出请求。 (3)根域名服务器查询本地记录得到如下结果：linejet.com NS dns.linejet.com （表示linejet.com域中的域名服务器为dns.linejet.com)
渲染
1、HTML代码转化成DOM
2、CSS代码转化成CSSOM（CSS Object Model）
3、cascade级联DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4、生成布局（layout），即将所有渲染树的所有节点进行平面合成
5、将布局绘制（paint）在屏幕上
页面发生变化时，要重新渲染reflow（重新生成布局并绘制）。有元素位置发生变化或滚动时，需要重排并重绘。元素位置都没发生变化时，只需重绘repain。
浏览器会将几个连续的改变累积起来，再一次重新渲染，以减少重新渲染的次数。
脚本读取位置，尺寸等信息时，浏览器不得不把之前累积的变化，重新渲染一次，再返回最新的位置和尺寸。
优化
1、读取位置和尺寸的脚本最好放在一起，不要与改变页面的脚本穿插
2、缓存位置和尺寸信息， 不要重复读取
3、对离线DOM 操作完后，再加入DOM树。不用加入后再操作。
4、对DOM的复杂改变，可以先隐藏，再操作，再显示
5、position属性为absolute或fixed的元素重排开销较小，动画最好设置在它们身上
6、window.requestAnimationFrame(function(){写操作}) ，把这次写操作放到下一次渲染
7、尽量避免写在HTML标签中写Style属性，会阻塞渲染
加载完成
当 HTML 文档解析绘制完成就会触发 DOMContentLoaded，而所有资源（图片和非阻塞脚本）加载完成之后，load 事件才会被触发。
另外需要提一下的是，我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。
在chrome network 左下方能看到，打开overview能看到两条对应的线