一、减少HTTP请求
1、图片地图
假设导航栏上有5张图片，每张图片对应一个链接，既有5个HTTP请求。
服务端图片地图思想是：使用一张图片（包含5张小图片），这张图片对应一个链接，5个点击提交对应到一个url，同时提交用户点击时的鼠标x、y坐标值，根据鼠标坐标值服务器映射响应。
2、CSS Sprites （css精灵、图片合并技术）
当页面中的图片比较多时，如果全部加载的话，HTTP请求太多了。
css Sprites：将多张图片合并成一张大图片，只加载一张图片，大大提升了页面加载速度。最后通过设置background-position属性来显示出不同的图片。
3、字体图标
在可以使用字体图标的地方尽量使用字体图标，这样可以减少图片的HTTP请求。另外字体图标还可以设置不同的颜色，方便使用
二、使用CDN（内容分发网络）
如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。
CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。
CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。
CDN的主要技术是内容存储技术、内容分发技术、负载均衡技术。
三、使用Expires头。（HTTP1.1 使用cache-control： max-age）
页面初次加载时会产生很多HTTP请求，Web服务端通过设置一个Expires头可以将当前页面缓存在客户端，在有效期内再次访问该页面时是可以直接在客户端获取副本资源，不会产生HTTP请求。
Expires缺点： 它要求服务器和客户端时钟严格同步；过期日期需要经常检查。
HTTP1.1中引入Cache-Control来克服Expires头的限制，使用max-age指定组件被缓存多久。
Cache-Control： max-age=12345600
若同时制定Cache-Control和Expires，则max-age将覆盖Expires头。
四、压缩组件
从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持
Accept-Encoding: gzip,deflate
如果Web服务器看到请求中有这个头，就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。
Content-Encoding: gzip
五、将样式表放在头部
将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。
六、将脚本放在底部
更样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。
七、避免CSS表达式
CSS表达式具备求值计算能力，然而每次页面发生重绘时，CSS表达式会影响页面的加载时间。
八、使用外部的JavaScript和CSS
内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。
九、避免重定向
十、配置ETag（last-modified）
浏览器缓存过期后，通过ETag或Last-Modified判断请求资源是否有更改。（协商缓存）
十一、减少DOM操作，减少重排、重绘的次数
十二、ajax请求缓存
GET请求方式可以缓存
POST请求方式不可以缓存
网友评论