网页性能优化

　这篇文章主要说的是网页性能优化方面的知识，在其中穿插了一些网络请求与相应的基础知识。

一、chrome浏览器调试工具介绍

　　chrome浏览器调试面板上包含了Console面板、Elements面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板等这些功能面板。

这些按钮的功能点如下：

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Sources:断点调试JS。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。（参考文章：http://www.cnblogs.com/cherryblossom/p/5502591.html）
Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

1.1、network面板（可以参考文章：http://www.cnblogs.com/ys-ys/p/5625409.html）

　　Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

右键可以选择展示的属性。各种属性介绍：

　　Name：请求文件名称
　　Method：方法（常见的是get post）
　　Status：请求完成的状态
　　Type：请求的类型
　　Domain:访问的域名或者ip地址
　　remote Address:远程ip:端口
　　Initiator：请求源也就是说该链接通过什么发送（常见的是Parser、Script）
　　Size：下载文件或者请求占的资源大小
　　Time：请求或下载的时间
　　Waterfall：该链接在发送过程中的时间状态轴（我们可以把鼠标移动到这些红红绿绿的时间轴上，对应的会有它的详细信息：开始下载时间，等待加载时间，自身下载耗时）

　通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能：

① 查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

② 查看资源预览信息

在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

③ 查看资源HTTP的Response信息

在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

⑤ 分析资源在请求的生命周期内各部分时间花费信息

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。
Proxy Negotiation 与代理服务器连接的时间花费。
DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。
Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。
SSL 完成SSL握手的时间花费。
Request sent 发起请求的时间。
Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
Content Download 获取Response响应数据的时间花费。

　　TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了。

二、网页性能优化简介

　　对于普通的网页访问，80%的响应时间消耗在前端（Yahoo），动态请求时间占比较少，优化难度大；静态请求时间占比大，优化难度低、效果显著，且有成熟的优化手段和工具。

三、网页优化规则

参考文档：https://developer.yahoo.com/performance/rules.html

3.1、使用更少的http请求

　　页面加载过程发起一个HTTP页面请求，发起多个请求获取页面资源（css、js、图片、ajax等）

减少http请求有这样几个优点:

(1) 减少DNS请求所耗费的时间。

(2) 减少服务器压力。

(3) 减少http请求头。

优化手段
1、合并文件
方法：合并css、js文件
要点：文件的合并要在项目前期开展，性能优化阶段合并容易导致Bug产生

2、合并图片
方法：将多个图片合并在一个文件中，采用css技术切分图片
（切割图片这里不是真正的切割，只是用CSS取图片中的一部分，这样做的好处就是减少了打开网页时请求图片的次数）

3.2、添加Expires头

　　添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能，能在后续的页面中有效避免很多不必要的Http请求，WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。expires用于设定网页的过期时间,一旦过期就必须从服务器上重新加载.时间必须使用GMT格式。

浏览器初次访问服务器---------------服务器返回200状态

浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中取，服务器收到请求后，判断文件是否被修改过，若是则直接返回200，否则返回304，浏览器将从缓存中获取文件

3.3、使用gzip压缩

gzip压缩可以牺牲较小的CPU资源，对css、js等进行压缩，节约带宽资源（对图片、pdf等已压缩格式gzip无法节约带宽）

Tomcat配置
<Connector port="81" proxyPort="80" protocol="HTTP/1.1“ compression="on"
compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,application/javascript" />

Nginx配置
gzip on;
gzip_min_length 1024;
gzip_types text/plain text/css application/x-javascript application/javascript;

3.4、最小化CSS、JavaScript、图片

1、CSS、Java Script文件压缩
手段：删除空格、换行、注释
工具：JSMin、YUI CSS Compressor

使用压缩工具可以减少Javascript和CSS尽一半的文件大小，推荐使用yui压缩，参考文档：https://blog.csdn.net/baidu_25343343/article/details/53396756

在线yui压缩js/css地址：http://ganquan.info/yui/?hl=zh-CN

2、图片压缩
手段：在不改变视觉效果下压缩图片大小
工具：https://tinypng.com/（单张照片最大支持5M）

图片压缩原因，参考文章：https://blog.csdn.net/newchenxf/article/details/51693753

其他优化手段：

将CSS和JavaScript独立成外部文件：
　　将可复用的css、js独立成外部文件，在各个页面共享。减少页面大小，并利用浏览器缓存节约下载带宽

移除重复的CSS和JavaScript：
　　浪费下载资源（IE）和CPU时间（IE、FireFox）注：除此之外，还要避免引用不同js库的不同版本和含有大量重复内容的css

将CSS放在顶部：
　　用户不必等待网页全部下载完，就可以逐步看到网页的呈现，加强用户体验

将JavaScript放在底部：
　　脚本下载将会阻塞其他内容下载

避免CSS Expression：
　　CSS表达式会消耗CPU资源（网页滚动、鼠标移动等将触发多次计算）、体验不一致（仅IE5-7支持）

四、网页优化工具--YSlow

　　Yslow（读做Why Slow）是Yahoo发布的一款插件。能对网站页面进行分析，并告知如何进行优化。

　　下载地址：http://yslow.org/

chrome浏览器当中添加的拓展程序会默认展示在左上角，点击YSlow图标可打开YSlow

点击Run Test会对当前打开的网页进行数据分析。

YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。

以下是说明的等级、组件、统计信息。

4.1、等级视图

查看一个分析,选择页面的性能等级标签或点击网页的字母等级在状态栏这页纸的底部。
视图显示了等级为网页的成绩单。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。
下面是一个等级的例子：

如果页面与某一个规则无关，则显示 N/A ，表示不适用。

点击每一规则，都给出了改进建议。

4.2、组件视图

分组显示页面组件，表格列出组件的信息，点击 Expand All展开显示给个分组内各的组件信息。

下面简要列在组件检视表：

TYPE：该组件的类型。该网页是由组成部分的下列类型：doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB)：该组件的大小以千字节。

GZIP(KB)：该组件的gzip压缩的大小以千字节。

COOKIE RECEIVED(bytes)：字节数在HTTP设置的Cookie响应头。

COOKIE SENT(bytes)：节数的Cookie在HTTP请求报头

HEADERS：HTTP信息头，点击放大镜查看全面信息。

URL：链接地址

EXPIRES(Y/M/D)：日期的Expires头，属于缓存设置一种。

RESPONSE TIME (ms)：响应时间

ETAG：ETag响应头，也是缓存设置的一种

ACTION：额外的性能分析

4.3、统计信息视图

左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。我们可以看到，页面元素缓存后的使页面的http请求和页面总大小都减少，从而加快了页面打开时间。