一、减少HTTP请求
1.图片地图的使用
2.css sprites
将多个图片合成一张,减少网络请求数量
3.内联图片
使用data:URL(Base64)模式可以在网页中包含图片但无需额外的http请求(IE可能不支持)。这种做法图片不会被缓存,适合较小的小图标。
4.合并脚本和样式表
多个js和css文件应该合并成一个,减少请求数量
二、使用内容发布网络 CDN(content delivery network)
内容发布网络是一组分部在多个不同地理位置的web服务器,用于更加有效地向用户发布内容。CDN有助于缓和web流量压力。
三、添加Expires头
四、压缩组件
五、将样式表放到头部
防止白屏和闪烁,造成不好的用户体验
六、将脚本放在底部
脚本会阻塞后面内容的呈现。脚本会阻塞后面组件的下载。如果将脚本放页面头部,整个页面的呈现和下载都会被阻塞,直到脚本加载完成。
七、避免css表达式
css表达式是动态设置css属性的一种强大(并且危险)的方式。
八、使用外部的javascript和css
纯粹而言,内联快一些。
因为外部需要承担多个http请求带来的开销,但是内联无法进行缓存。
九、减少DNS查找
Internet是通过ip地址查找服务器的。由于ip地址很难记,通常使用包含主机名的url来取代它,当浏览器发送请求时,ip地址仍然是必须的。这就是Domain Name System(DNS)所处的角色。DNS将主机名映射到ip地址上,就像电话簿上面将人名映射到电话号码上一样。
通常浏览器查找一个给的的主机名的ip地址要花费20-120毫秒。在DNS查找完成之前,浏览器不能从主机那里下载到任何东西。响应时间依赖DNS解析器、它所承担的请求压力、你与它之间的距离和带宽等。
DNS查找可以被缓存起来以提高性能。
十、精简javascript
压缩合并js
十一、避免重定向
重定向是将用户从一个url重新路由到另一个url。重定向有很多种,301和302是最常用的两种。 304并不真的是重定向,它用来响应get请求,避免下载已经存在于浏览器的数据。
重定向使web页面变慢,它延迟了整个html文档的传输。
十二、移除重复脚本
重复脚本损伤性能的方式有两种:不必要的http请求和执行javascript所浪费的时间。
十三、配置ETag
ETag(Entity Tag)是web服务器和浏览器用于确认缓存组件有效性的一种机制。