当浏览器的地址栏输入了URL并按下回车之后，用户看到页面之前，在浏览器和世界上的许多台服务器之间就有了许多次计算和操作。过程大概总结如下：
1.浏览器向DNS服务器查找输入的URL对应的IP地址（域名解析）
2.DNS服务器找到了IP地址返回给浏览器
3.浏览器根据该IP地址与目标服务器在80端口上建立TCP连接（三次握手）
4.浏览器获取请求页面的html文件
5.浏览器在窗口渲染html
6.关闭该页面时断开与服务器的连接（四次挥手）
页面请求过程
1.浏览器地址栏输入URL按下回车
2.进行域名解析
3.域名解析完成后得到目标IP地址，与该IP地址建立TCP连接
4.向目标服务器发送http请求（HTTP协议工作过程）
5.WEB服务器接受到请求，进行处理
6.WEB服务器处理完请求，并作出回应response
7.浏览器接收返回的信息，并开始准备页面渲染。
渲染页面开始（chrome使用webkit渲染引擎，firefox使用Geoko渲染引擎。两种引擎的渲染过程差不多）
8.解析html文件，先是head，后是body
9.如果头部有外部的css链接，就去下载该css，如果有js链接也去下载
10.解析body部分，并生成DOM树，同时浏览器主进程去下载CSS
11.CSS文件下载完成，解析CSS文件成树形的数据结构（CSSOM树），然后结合DOM树合并成RenderObject树
12.布局（layout）：布局RenderObject树，负责RenderObject树中的元素的尺寸，位置等计算
13.绘制（painting）：绘制RenderObject树，绘制页面的像素信息，绘制到页面上。用户可以看到了
页面渲染结束
页面渲染完成后
14.执行的onload事件（该事件可以由开发者自己写，在页面加载完成后立即执行。onload用处：网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以将js脚本放在网页底端，确保加载脚本的时候，对应节点已经加载完毕了，或者使用window.onload事件。）
15.整个页面load完成
整个过程中会有很多的分别请求，所以TCP连接会很多，并且每一个用完都会自己关了，除非是keep-live类型的可以请求多次才关闭。
对于以上过程，要怎样进行性能上的优化呢？可以有以下几点（以下来源于CSDN博主「cometwo」的原创文章）
一、尽量减少 HTTP 请求
1.合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。
2.CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。
二、使用浏览器缓存
在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。
根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态。
1、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。
2、服务器端没有给浏览器任何指示。
3、在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。
4、服务器强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。
我们要做的是尽量强制浏览器到第四种状态，特别是对于JS、CSS、图片等变动较少的文件。
三、使用压缩组件
IE和Firefox浏览器都支持客户端GZIP，传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。如果每个用户节约50%的带宽，那么租用来的那点带宽就可以服务多一倍的客户，并且缩短了数据的传输时间。
四、图片、JS的预载入
预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
可以在登录页面预载入JS和图片
五、将脚本放在底部
脚本放在顶部带来的问题，
1、 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞
2、 在下载脚本时会阻塞并行下载
放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。要综合考虑情况。
六、将样式文件放在页面顶部
如果样式表任在加载，构建呈现树就是一种浪费，样式文件放在页面底部可能会出现两种情况：
1、 白屏
2、 无样式内容的闪烁
七、使用外部的JS和CSS
将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。
八、切分组件到多个域
主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名。
九、精简JS
可以做到两个级别
1、精简：从代码中移除不必要的字符以减少其大小，
2、混淆：在精简的同时，还会改写代码，函数、变量名被转换成更短的字符串
可以使用ShrinkSafe来精简JS http://shrinksafe.dojotoolkit.org/
十、精简CSS
从代码中移除不必要的字符以减少其大小，
可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /
十一、精简图片、Flash
对大图片、Flash，要在效果和大小之间做出平衡
