浏览器如何查看返回时间

要优化网页的加载速度，首先要知道从用户发起请求到页面被完全展现都发生了什么：

1. 域名解析

2. Http链接建立

3. 浏览器发起Http链接请求

4. 服务器接收请求，返回请求资源

5. 浏览器接收返回内容，页面展现，下载静态资源如：图片，CSS，JS等

6. 浏览器进行渲染

知道了网页加载请求的一个过程，页面加载缓慢时，就可以针对如上六点依次进行检查和判断。

1、域名解析和网络链接检查
DNS服务器将域名解析为IP地址，浏览器通过IP地址和服务器建立链接，这一过程耗费的时间一般在20-120ms。通过ping命令可以方便的查看域名解析是否正确，网络连接是否正常以及网络时延，如果有问题，需要联系相应的服务商。如果你用的是Mac os或者Linux os则可以用dig命令来判断解析域名的Query time。

虽然浏览器会缓存域名解析的，但是用户首次访问网站时缓存不会命中，因此如果在页面资源中使用太多不同的域名，也会增加DNS解析时间，从而降低页面加载速度。

2、服务器返回页面内容
通过浏览器中的开发者工具可以方便的查看页面资源载入的先后顺序和花费的时间，例如图1是访问开源技术社区的网络请求时序分析。其中开源技术社区所在行是服务器返回页面内容所花费的时间，剩余是浏览器载入其他静态资源的时间。如果服务器返回页面内容所花费的时间很长，那么应该想办法提高服务性能，可以从如下几个方面入手：

• 数据缓存

• 页面静态化

• 数据库索引优化

• 数据库读写分离

• 数据库拆分

• 服务化

给定网络传输速度，对响应内容进行压缩可以大大减少传输数据大小，从而达到缩短网络传输时间的目的。Gzip是目前最流行也最有效的压缩技术，能够减少70%左右的数据大小，并且90%的浏览器都支持gzip。

3.静态资源下载

按照雅虎的调查，页面载入时间的80%用在了载入静态资源：图片，CSS文件，JS文件，Flash等，因此优化静态资源载入时间最能改进页面载入速度。比如图片我们就可以托管到七牛这样的CDN互联网服务商，让我们的资源得到加速！

用户距离资源服务器的物理距离会影响到资源载入时间，距离越近，则载入越快，使用CDN技术可以很好地减少静态资源载入时间。

浏览器可以缓存http请求结果，缓存命中时浏览器直接使用缓存中的结果而不用再次发起http请求。web服务器应该在响应请求头部告诉浏览器哪些资源是可以被缓存的，可以缓存多少时间，当缓存命中时可以大大减少资源载入时间。

除了压缩以外，另一种减少CSS文件或者JS文件数据大小的方式就是减少文件中的注释，空格符，换行符等不必要的字符，目前jquery的发布就采取这种形式。常用的去除CSS文件或者JS文件不必要的字符的工具是YUI Compressor。

http本身是无状态的，因此很多网页使用cookies来保存用户的登录状态或者个性化信息，cookie中的内容通过http头部在浏览器和服务器之间进行交换，因此尽可能的减小cookie中存储的内容可以降低页面载入时间。如果静态资源和页面内容在同一个域名下，浏览器访问静态资源时也会在请求中带上cookie中的内容，因此静态资源需要使用与web服务不同的域名。

在给定展示效果的前提下，适当调整图片的尺寸和对图片进行压缩。例如商品列表页使用的图片尺寸往往要小于商品详情页的图片尺寸。

当然现在都还有一些前端资源优化的手段比如预加载技术，还有图片多域名独立拆分等，都可以达到加载速度的优化，从而提高用户体验！

4.渲染

将CSS文件放在页面的头部可以使得页面看起来载入更快，因为这样浏览器可以先渲染部分内容，而不是等到整个页面都载入以后再进行渲染。不要一次载入页面中所有的图片，而只是载入用户焦点所在区域的图片，因为很多时候用户不会往下拉，即使图片被载入了，用户还是不会看到。

来源：开源技术社区

邀请加入hadoop学习、交流、答疑群：361654649