Web前端优化方法

一、尽可能的减少http请求数，提高访问速度。这些请求包括html文件、CSS文件、JS文件和图片文件等外部资源。
1、可以将多个CSS或JS文件合并、压缩
　　a.合并引入。如：<link  type="text/css"   rel="stylesheet"  href="css/a.css,css/b.css"> //淘宝的服务器技术，目前只有tengine可以支持这种模式。
　　　　（1）DOS命令：copy a.css+b.css ab.css /b，就可以得到合并的“ab.css”文件。
　  　　 （2）可以采用雅虎的工具包YUI Compressor压缩（http://tool.oschina.net/jscompress）。该工具可以去掉CSS文件、JS文件和html文件中的一些不必要的空格和注释，减少文件的字节数；还可以合并多个js文件。
　　b.可以用minify工具合并。

2、可以将多个图片文件整合到一个图片文件，然后用CSS读取需要的某一部分图像。

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

实现方法：首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;

 

其实影响网站访问速度最主要的是我们的网络环境，我们大部分时间花在了网络阻塞和等待响应上，而真正用在接收数据上的时间还真不多。但是我们做前端优化的，你不能去要求用户的网络环境，你要接受用户网络状况差的事实，在其他方面进行优化。

PS：
Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些 不必要的空格和注释，进行gzip压缩，并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service 非常像，不过Minify可以合并任何你想要合并的JavaScript和CSS文件