前端性能优化概要设计

1.简介

1.1 编写目的

部门还没有有性能优化的的指导规范,如何优化,以及优化的标准尚不明确,而性能优化直接关系用户体验且开发迭代过程当中不免会有所忽视，性能会伴随产品的迭代而有所衰减。随着页面的愈来愈大，功能愈来愈复杂，咱们须要一套准则和规范用语指导优化咱们的开发。
预期读者:产品经理 项目经理 前端开发 java 开发

1.2 背景

性能会伴随产品的迭代而有所衰减，公司多个项目都在不断更新迭代，尤为是9800项目,已经更新迭代至4.0版本，还有和能源前端组件，做为组件不只仅是功能上符合的，性能上也应该符合规范，因此制定性能优化的标准和规范就变得十分重要了。

1.3 参考资料

《雅虎网站页面性能优化的34条黄金守则》
《7 天打造前端性能监控系统》
《检测网站性能的利器window.performance》

2.整体架构

2.1 系统说明

以改善用户体验为终极目标，，以浏览器加载顺序为流程线，逐个优化，约定工做规范，给出优化方案。
根据性能黄金法则: 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的全部组件(图片，script，css，flash等等)进行的HTTP请求上。再对缓存、加载方式 和图片优化作下细化介绍。

2.2 运行环境

软件环境：
客户端浏览器：ie八、ie九、ie十、ie十一、chrome
客户端操做系统：window7 、window8
硬件环境：
CPU 双核、>=3G
内存 >=2G
网卡 100M以上以太网卡
2.3 基本设计概念以及处理流程
基本设计概念：根据用户体验为终极目标，从浏览器的加载顺序，分析每一个加载过程，优化每一个步骤，去优化整个页面。而后经过缓存、加载方式、图片这3个对性能影响较为重要的方面进行阐述。最后引入2个比较简单且十分好用的性能分析工具。
处理流程，见下图：

2.4 整体结构及模块划分

3.模块说明

3.1 PD-001用户体验

3.1.1 模块功能描述

对于用户来讲他感受到的为何页面打不开、为何按钮点击不了、为何图片显示这么慢。而对于工程师来讲，可能关注的是 DNS 查询、TCP 链接、服务响应等浏览器加载过程指标。咱们根据用户的痛点，将浏览器加载过程抽取出四个关键指标，即白屏时间、首屏时间、用户可操做、总下载时间。
3.1.2 模块框架设计以及处理流程

3.1.3 子模块设计说明
这4个模块的时间越少越好。

3.2 PD-002浏览器的加载顺序

3.2.1 模块功能描述

了解浏览器的加载顺序，从原理上去优化每一个步骤。

3.2.2 模块框架设计以及处理流程

便于咱们理解的流程图：

换个能够量化的流程图：

3.2.3 子模块设计说明

再细讲一下重棑和重绘的注意要点：

3.3 PD-003缓存

3.3.1 模块功能描述
浏览器缓存就是当你打开一个网页，浏览器会自动下载副本到你电脑上，就至关于你另存为网页到某个地方而已，只不过这里是自动而已。固然不是浏览器能把各类 网页都能下载到本地电脑上，它是有特殊状况。（这个后面会说到）固然客户端缓存是否须要是能够在服务端代码上控制的。那就是响应头。响应头告诉缓存器不要保留缓存，缓存器就不会缓存相应内容。
将数据存储在本地客户端，无需和服务器的交互，进而从本地获取数据而不是远程获取数据，既可下降网络流量，又可提高浏览器响应能力。数据库本地存储；---web SQL Database (ie 暂不支持，故不做考虑)。提升Ajxa性能的措施中最重要的方法就是使响应具备可缓存性。
3.3.2 模块框架设计以及处理流程

3.3.3 子模块划分列表
子模块编号 子模块名称 功能描述 是否关键模块
PD-003-001 响应头 经过控制响应头，控制客户端缓存 是
PD-003-002 本地缓存 localStorage与sessionStorage 是
PD-003-003 ajax缓存 使ajax响应具备可缓存性 是
3.3.4 子模块设计说明
经过响应头控制客户端的缓存；响应头各个值对缓存的影响，见下表：

操做	行为
打开新窗口	若是指定cache- control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会从新访问服务器。而若是指定了 max-age值,那么在此值内的时间里就不会从新访问服务器,例如：Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器.
在地址栏回车	若是值为private或must-revalidate,则只有第一次访问时会访问服务器,之后就再也不访问。若是值为no-cache,那么每次都会访问。若是值为max-age,则在过时以前不会重复访问。
按后退按扭	若是值为private、must-revalidate、max-age,则不会重访问,而若是为no-cache,则每次都重复访问.
按刷新按扭	不管为什么值,都会重复访问.

使用本地缓存取代cookie缓存，本地缓存的优势：以下图

1. ajax也要进行缓存；

3.4 PD-004加载方式

3.4.1 模块功能描述
根据须要，根据场景不一样选择不一样的加载方式，达到提高用户体验的效果。
3.4.2 模块框架设计以及处理流程

3.4.3 子模块划分列表
子模块编号 子模块名称 功能描述 是否关键模块
PD-004-001 同步加载 都加载完才给用户看 是
PD-004-002 分级加载 同步异步相结合，重要的写加载 是
PD-004-003 按需加载 根据须要加载，用户不触发该功能就不加载 是
3.4.4 子模块设计说明

3.5 PD-005图片优化

3.5.1 模块功能描述
性能黄金法则: 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的全部组件(图片，script，css，flash等等)进行的HTTP请求上。其中图片又是文档组件中的重重之重；故图片的优化，对性能的提高有直接的影响。
3.5.2 模块框架设计以及处理流程

3.5.3 子模块划分列表
子模块编号 子模块名称 功能描述 是否关键模块
PD-005-001 css sprite 多个图片合成一张图 是
PD-005-002 ps的web格式 经过ps的web格式对其进行压缩，保存 是
PD-005-003 加载方式 根据须要选择加载方式，提升用户体验 是
PD-005-004 不在html中缩放 不在html中缩放图片 是
PD-005-005 favicon.ico 网站的标识符图标，要有且小且可缓存 是
PD-005-006 图片base 64 将图片进行64位编码 是
3.5.4 子模块设计说明

1. css sprite，就是讲多个图片合成一张图，用于减小http请求和便于管理；
2. ps的web格式，主要是不影响图片质量的状况下，且能很好的压缩图片；
3. 加载方式：经过加载方式的选择，使用户体验提高。常见方法有：①监听滚动加载；②先用默认图占位，而后置换模糊图，最后高清图提升用户体验。
4. 不要在html中缩放图片，由于①HTML只是缩小尺寸，图片会失真甚至产生锯齿；② 图片须要缩放意味着图片大小过大，网页加载速度会变慢。
5. favicon.ico要有且小且可缓存；要有：favicon.ico①可让浏览器的收藏夹中除显示相应的标题外；②还以图标的方式区别不一样的网站，③不管有否，浏览器都会找，若无，查找便更加耗时且还可能返回４０４错误。至于小，那是不言而喻的了，最好小于１ｋ。缓存的缘由也是不药而愈的了，这里暂不讲。
6. 图片base 64 ，就是讲将图片想文字同样进行编码，进行传输。其优势就是减小http请求。这个是比较新的知识，下面将经过图进行展现。

3.6 PD-006性能分析工具

3.6.1 模块功能描述
工欲善其事必先利其器，页面性能的评估中有不少成熟优秀的工具，合理利用已有工具能达到事半功倍的效果。下面简单介绍几个经常使用的工具：
Chrome浏览器开发者工具的Timeline面板和window.performance。
Chrome浏览器开发者工具的Timeline面板，你们都比较熟悉，这里不作介绍。
window.performance详情请见我曾经写的：《检测网站性能的利器window.performance》。
3.6.2 模块框架设计以及处理流程
无

4.接口说明

4.1 用户接口

用户 window.performance 帮助用户进行性能检测