前端性能测试项目实战
优化技术
一、减少http请求
- 合并图片
- 合并js
- 合并css
- 去掉不必要的请求连接
- 缓存
图片技术
尽可能使用PNG格式的图片（体积小）
png使用pngcrash优化，jpg使用jpgtran优化
如QQ聊天表情，使用的是CSS Sprites，在鼠标没有经过表情时，都是从一张图上绝对定位出来的，只有在鼠标放到某一张表情上，才会从服务器下载gif图片，这样可以减少请求与下载量，如果把常用的缓存到本地后压力就更小了
QQ表情.png
CSS Sprites实现方法：利用偏移量来定位
image.png
二、Add an Expires Header （增加过期头）
http响应数据头中包含一个Expires域，该域的值用于指示返回数据的到期时间，比如http响应头中包含“Expires:Sat,18,Dec 2017 08:56:23”信息，这是服务器告诉浏览器，返回的html文件内容到2017年12月18日8点56分23秒到期
我们都知道，这个浏览器的缓存机制在起作用，但是缓存机制如何工作呢，浏览器又怎么知道什么时候要使用缓存中的数据，什么时候该从服务器重新获取数据？
Expires头给出的信息就是一句：当前时间小于Expires的指定时间时，浏览器从缓存中直接获取相应的资源文件或HTML文档，否则浏览器像服务器发送请求获取该资源（过期前可以走缓存，过期后重新请求）
另外也要避免空请求
三、图片压缩使用gzip
如果图片不是非常大，就没必要用gzip了
四、将样式表的引用（CSS文件）放在html文档的开头
比如放在<head>标签中，可以让样式表在一开始就下载下来，一旦样式表下载完成，浏览器就可以使用样式表中的定义开始在屏幕上显示页面元素，同时也避免了信阳市可能带来的屏幕显示的重绘
五、将js的引用放在html的最后
js文件的下载与执行会在所有页面下载完成后，不会组织其他页面元素的显示，用户感观不到
六、避免CSS@import
使用@import方法引用CSS文件可能会带来一些影响页面加载速度的问题，比如导致文件按顺序加载（一个加载文成后才会加载另一个），而无法并行加载
2种加载方法：
@import url("style.css")
<link rel="style.css" href="style.css" type="text/css">
http://www.feedthebot.com/tools/css-delivery
可以用上述网址来检测
七、优化DNS查找
HostnameLookups设置为off，尽量较少DNS查询的次数
八、精简js、css
压缩js、css；合并js、css
可利用的方法、工具：tool.oschina.net/jscompress
Minify
yui compressor
gzip
九、尽量避免重定向
比如涉及到业务、产品设计、统计信息等都需要用到重定向，所以说是尽量避免
301和302就是所谓的重定向，即访问A然后重定向到B，多了一次请求跳转
访问聚美网站.png
十、ETag
使用的比较少，带来的副作用比较多，关闭即可，在配置文件中假如FileETag=none
十一、favicon.ico
通常每个网站都应该有这个文件，如没有一定要添加上，使它尽量在1KB左右
要创建favicon.ico文件，可以去http://www.favicon.cc，提供在线免费服务
由于该文件使用很频繁，所以缓存显得很重要
将该文件放在单独的主机中，如images.mydomain.com，这样可以避免请求该文件时发送cookie
十二、使用无cookie域名
将js、css、图片放到独立服务器上，单独使用一个域名，避免每次请求中带cookie
如下图所示：访问京东网站，在开发者工具里选择图片，看到的域名是360buying.com
京东网站.png
十三、KeepAlive
KeepAlive是一个布尔值，on表示打开，off表示关闭
KeepAlive配置指令决定当处理完用户发起当HTTP请求后是否立即关闭TCP连接，若为on，那么用户完成一次访问后，不会立即断开连接，如果还有请求，那么会继续在这一次TCP连接中完成，而不用重复建立新的TCP连接和关闭TCP连接，可以提高用户访问速度
常见三种情况：
1、用户浏览一个网页时，除了网页本身外，还引用了多个javascript文件，多个css文件，多个图片文件，并且这些文件都在同一个HTTP服务器上
2、用户浏览一个网页时，除了网页本身外，还引用了一个javascript文件，一个css文件
3、用户浏览的是一个动态网页，由程序即时生成内容，并且不引用其他内容
针对以上3种情况，建议1最适合打开，2随意，3最适合关闭
在内存非常充足的服务器上，不管是否关闭，服务器性能都不会有明显变化
如果服务器内存较少，或者主要处理动态网页服务，关闭后可以节省很多内存，而节省出的内存可用于文件系统Cache，可以提高文件系统访问的性能，并且系统会更加稳定
如果前端有类似squid的服务，一定要选择on
架构与代码优化方法：
拆分接口，主要是对后端提供数据的接口进行拆分，不要都放在一个里面，效率很低，比如：
提供所有航班信息及最低价的摘要接口
提供指定航班详细信息数据接口
重构前端核心部分代码：
比如：删除低价计算方法，由后端提供
实战关键：业务分析（页面选取）
比如淘宝首页、商品搜索页
