系统性能优化

系统性能优化

1.减少http请求
1）图片地图
分为2种：服务端图片地图和客户端图片地图
服务端图片地图：所有的点击提交到一个目标url，以及用户点击的x，y坐标，web应用程序映射为相应的操作。
客户端图片地图：用户的点击映射到一个操作，无需向后台发送请求。映射通过标签来实现。
缺点：定义区域坐标，手工方式麻烦和易出错，且DHTML创建的图片地图internet explorer 不能使用。
2）css sprites
将多幅图片合成一幅图片，css通过background-position来获取对应图片。
优化效率和图片地图相差无几，优势明显，较为常用的优化手段。
3）内联图片
采用data：url的模式。无需请求额外的http请求。但是internet explorer 暂不支持。
data：url的模式是内联在页面中，跨页面请求是不会进行缓存。常用用法是用于css样式文件中做背景图。其实目前一些验证码展示的图片很多是从后台获取内联图片进行展示。
优化效率与图片地图和css sprites相差无几，值得关注和使用。
4）合并脚本和样式文件
相比于内联脚本和样式，使用外部脚本和样式性能更佳。（后续说明）
一般样式文件和脚本是分开压缩和合并，更容易管理，合并要根据项目情况来进行，确保组合的数量是可管理的。

2.使用内容分布网络
不建议使用cdn的情况：
1）适度用户群（少量）
2）本地化用户群
3）敏感和受监管的数据

3.使用浏览器缓存
使用Expires头。缺点：服务器和客户端时钟要严格同步。
HTTP1.1引入Cache-Control头的max-age解除Expires这个缺点。
如果两者同在，以max-age为准。（两者同时使用，兼容不支持HTTP1.1的浏览器的情况）
具有长效的Expires头的组件将被缓存，后续请求时浏览器会从硬盘中获取，避免HTTP请求。

4.压缩组件
原理：减少响应包的大小和传输时间，达到优化效果，尤其数据量大和传输效率差的网络尤其明显。
从HTTP1.1开始，web客户端可以通过HTTP请求的Accept-Encoding头来标示对压缩的支持。gzip目前是比较理想的压缩方式。
Accept-Encoding：gzip
web服务器通过响应的Content-Encoding头来通知web客户端。
Content-Encoding：gzip

5.将样式表放在顶部
样式表放于底部会阻止浏览器内容的逐步呈现。（容易白屏和无样式内容的闪烁）

6.将脚本放在底部
脚本会阻塞后面内容的呈现；脚本会阻塞后面组件的下载。

7.避免css表达式
css表达式带来的问题是在于求值的频率超出我们的期望，过于的频繁。
避免css表达式产生的这个问题，存在两种方法：一次性表达式和事件处理器。
因此在没有深入了解底层实现的基础上使用css表达式很危险。

8.外部使用javascript和css
外部引用的优势在于可以使用缓存复用文件，内联一般不会进行缓存，但是如果空缓存的情况，内联肯定会比外部引用更快。
内联的缺点在于不能利用缓存，有两种方式可以中和一下两者。
1）加载后下载。主页内联，后续动态下载外部文件，作为缓存文件。
2）动态内联。利用cookie作为指示器，存在则使用外部文件，不存在则使用内联文件。

9.减少DNS查找
Intenet通过ip查找服务器。但是ip地址很难记忆，通常使用主机名的url来代替。DNS的作用就是将主机名映射到ip地址上。
DNS解析需要时间，解析的过程是不允许从主机中下载东西。解析速度依赖带宽和你与它的距离（冗余程度）。
减少DNS查找的方式：
1）DNS缓存和TTL（存活时间）
2）通过keep-alive和较少的域名来减少DNS查找（合理的主机名2-4个比较合适）

10.精简javascript和css
1）精简（移除不必要的字符，包括注释，空白符和制表符，是一种安全和相对简单的行为）
2）混淆（移除不必要的字符和对代码进行转化。优点：更小的体积。缺点：可读性变差，可能引入错误）

11.避免重定向
重定向用于将用户从一个url重新路由到另一个url。
重定向在重定向完毕且html下载完成前，页面不会呈现任何东西。
重定向容易忽视的场景：缺少结尾的斜线（可避免的，但易忽视）。
重定向使用的场景：
1）连接网站（旧网站连接到新网站）
2）跟踪内部流量（另一种可以使用referer日志跟踪内部流量，可以避免向用户发送重定向，减少响应时间）
3）跟踪出站流量（另一种是使用信标——一个http请求，其url包含跟踪信息）

12.移除重复脚本

13.配置ETag
ETag是实体标签。是web服务器和浏览器用于确认缓存组件的有效的一种机制。
服务器在检测缓存的组件和原始服务器上的组件是否匹配有两种方式：
1）比较最新修改日期
2）比较实体标签
最新修改日期：
原始服务器通过Last-Modified响应头来返回组件的最新修改日期。
浏览器会使用If-Modified-Since头将最新修改日期传回原始服务器进行比较。如果两者进行匹配成功，会返回一个304响应。
实体标签：
ETag是唯一标识了一个组件的一个特定版本的字符串。HTTP1.1引入ETag。原始服务器使用ETag响应头来制定组件的ETag。浏览器验证一个组件使用If-None-Match响应头将ETag传回原始服务器进行验证。如果ETag是匹配的，那么返回一个304响应。
ETag带来的问题：
当浏览器从一台服务器获取了原始组件，之后又向另一台不同的服务器发送条件get请求时，ETag是不会进行匹配成功的。
而且If-None-Match比If-Modified-Since拥有更高的优先级。ETag不匹配但是Last-Modified相同是不会返回304响应的。
所以如果系统寄宿在多台服务器上，考虑移除一下ETag或者重新配置。

14.使ajax可缓存

结语：如果有表达不正确的地方欢迎各位指出，我会定时查看和修复。创作不易，如果各位觉得博文不错或者对自己有用希望可以得到大家点赞和打赏订阅。大家的赞赏是我持续的动力，感谢各位！