今日完成的事

      调试消息接口

明日计划的事

      继续调试消息接口

收获

      Web页面加载，如何分析页面性能？如何进行优化？

一、浏览器加载过程：

1、建立连接过程      

(1) 浏览器查找域名的IP地址　　

(2) 浏览器给web服务器发送一个HTTP请求　　

(3) 服务器发送永久重定向响应　　

(4) 浏览器跟踪重定向地址　　

(5) 服务器“处理”请求　　

(6) 服务器发回一个HTML响应

2、浏览器渲染解析HTML        

↓构建DOM树       

 ↓渲染树构建       

 ↓渲染树布局       

 ↓绘制渲染树

二、优化方法

1、启用浏览器缓存　　

浏览器要根据域名找出IP地址，而DNS查找过程的第一步是在浏览器缓存中查找，根据Chrome的PageSpeed给出的建议：要利用浏览器缓存存储可缓存的资源。在 HTTP 标头中为静态资源设置有效期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。HTTP 1.1提供的缓存方法主要有两种：      

 (1) Expires和Cache-Control：max-age. 即内容在缓存中的生命有效期。第一次请求后将在生命有效期之内直接从本地缓存中拿取。　　

(2) Last-Modified和ETag.：Last-Modified标记文件最后一次修改的时间，浏览器请求是在头部加入上次请求缓存下来的Last-Modified时间，若两次请求期间服务器的内容没有修改，服务器返回304 Not Modified，则不下载资源，浏览器直接使用本地缓存；否则，服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列，其生成算法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息，服务器通过简单的比对就知道是否应该返回304还是200。PageSpeed建议，要为资源指定Last-Modified或ETag标头，以便启动缓存验证。

2、页面内容组织　　

① 为 HTML 文档指定字符集，可让浏览器立即开始执行脚本。　

② 将内嵌样式块和 <link> 元素从文档主体移至文档标题，可改善显示性能。　　

③ 将小型样式表或者脚本内嵌到主 HTML 网页中，可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。      ④ 正确地排列外部样式表与外部和内嵌脚本的顺序，可增加下载时同时加载的数据量，并提高浏览器显示网页的速度。为确保能够并行下载这CSS 文件，始终将外部 CSS 文件排在外部 JavaScript 文件前面。