按下回车后，网页到底经历了什么

从按下enter键之后，到网页展现出来，到底经历了什么？

1.按下enter

2.浏览器将域名解析为ip（省略细节，hosts，dns）

3.浏览器通过ip向服务端发起一次http请求（省略复杂的过程和协议）

4.服务端接收请求，处理业务，查询数据，返回页面

5.浏览器获取页面，进行解析

6.解析dom结构，解析css，解析js，解析完毕后展现，触发domcontentloaded

7.继续加载页面多媒体内容，例如图片，记载完毕，触发load

1-6步页面已经展现出来，7加载图片。


网页调优工具
有很多网页调优工具，例如阿里测，站长工具等，
今天只说简单的工具，firebug的网络视图，chrome也有类似的network，
firebug的网络视图主要是看一张网页加载的过程，以及每次请求的耗时。



从一张图片说起
a.png加载完uikoo9.com的过程也就是多次请求的过程，

包裹访问域名请求html，到解析dom请求css，js，到请求图片为止，

都是一次次的单独请求。



请求
一个网页就是一次向服务器的请求，

网页中的每个js，css也都是一次请求，

那么一次请求分为哪些步骤，分为：

1.阻挡

2.域名解析

3.建立连接

4.发送请求

5.等待响应

6.接收数据



耗时比较
可以看出，

1耗时较多，解释下阻挡：浏览器避免向同一个地址同时发起过多连接请求。容易被判定为DDOS攻击 或 低级爬虫。

2-4耗时较少，

5-6耗时较多



如何优化
1，好像不可以优化

2.-4，找一个好的域名解析商（dnspod）+好的cdn，这个比较简单

5，等待响应，其实就是服务端做处理，查询数据，业务计算，优化可以考虑非阻塞IO，多线程，缓存，SQL优化等等，本文略过

6，接收数据，见下



接收数据优化
页面数据无非js，css，图片，多媒体之类静态文件，可以做的优化有：

1.js，css压缩（dev-->min）

2.图片压缩，图片合并（雪碧图）

3.图片单独cdn服务器（七牛云）

4.服务端再次压缩并缓存静态文件

再来看看发生了什么

从按下enter开始，就开始了一次次的请求之旅，
每次请求都包括（域名解析，建立连接，发送请求，等待响应，接收数据），
从最开始的地址栏中的域名请求，返回html dom并解析，
到请求js，css，图片等静态文件，都是一次次的请求循环。



html优化
1.采用html5精简的标签

2.尽量将css放到head中，js放到body末尾

3.开发完的html进行压缩，减小html文本大小

js优化

1.细分模块化减小js大小

所谓模块化，比如你需要用到bootstrap，bootstrap有很多组件，例如有1.js，2.js，。。。，100.js

A页面你只引入1-2.js

B页面你只引入3-4.js

这样每个页面的js都很小

2.利用缓存

另一个方向是将bootstrap全部引入，这样只在第一次比较慢，

以后每次都是读取缓存，以后的页面较快



以上两种各有利弊



css优化
和js优化相类似，模块化，缓存，。。好吧，有人不懂，见下：

A页面1.css 2.css 3.css--》压缩A.css
B页面1.css 2.css 4.css--》压缩B.css
C页面1.css 2.css 5.css--》压缩C.css
D页面1.css 2.css 6.css--》压缩D.css
A,B,C,D中1.css，2.css是相同的，但是由于各自有不同的css，
所压缩后是四个不同的css，也就是请求了4次，但是4次都是小文件

1.css 2.css 3.css 4.css--》压缩X.css
A页面--》X.css
B页面--》X.css
C页面--》X.css
D页面--》X.css
A页面请求1次，B,C,D三个页面使用缓存，请求了1次但是大文件



所以自己做取舍，js类似。



图片优化
1.字体图标

在可以用字体图标的地方不要用图片，见iconfont

2.雪碧图

非得用图片的时候，不会经常改变的小图标放到一起，压成一个雪碧图

3.压缩

在保证显示效果的前提下，进行压缩



静态文件优化（js，css，图片）
1.单独服务器

将静态文件放到一台单独的服务器上

2.cdn

给静态文件服务器添加cdn

3.服务端压缩和缓存

服务端在进行一次压缩，并缓存