网页性能优化

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

1、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.一、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，则应该考虑对网络进行性能优化了。

2、网页性能优化简介

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

　　　　　　　　　　　　　　　　

 　　

3、网页优化规则

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

3.一、使用更少的http请求

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

　　　　　　　　　　

 

减小http请求有这样几个优势:

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

(2) 减小服务器压力。

(3) 减小http请求头。

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

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

 3.二、添加Expires头

　　<meta http-equiv="expires" content="Sunday 26 October 2010 01:00 GMT" />

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

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

　　　　　　　　

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

　　　　　　

 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.四、最小化CSS、JavaScript、图片

一、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

二、图片压缩
手段：在不改变视觉效果下压缩图片大小
工具：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支持）

4、网页优化工具--YSlow

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

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

　　　　　　　　　　　　　　

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

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　

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

 

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

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

4.一、等级视图

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

 　　　　　　　　　　　　　　

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

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

4.二、组件视图

 　　　　　　　　　　　

分组显示页面组件，表格列出组件的信息，点击 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.三、统计信息视图

 　　　　　　　　　　　　　　　　 

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