前端文件优化方案

1.网站性能工具Yslow的使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件，

安装Yslow要先安装 Firebug（本地址以火狐为例），两种方法启动Yslow：1、打开Firebug窗口，选择Yslow选项。2、直接点击火狐右下角的Yslow启动按钮。

Grade(等级视图)—Yslow的第二个选项卡

Yslow给出的网站性能评分，从F~A，A是最好的

Components（组件视图）—Yslow的第三个选项卡

Components考验查看网页各个元素占用的空间大小

Statistics（统计信息视图）—Yslow的第四个选项卡
Tools（辅助工具）—Yslow的第五个选项卡

JSLint是一个强大的工具，它可以检验HTML代码以及内联的Javascript代码，通过JSLint发现了google analytics上的一个js错误。

ALL JS：查看你这个网页上一共引用了多少JS。

All JS Beautified：把所有JS放在打开的页面中，利用站长统一检查（我感觉作用不大）。

All JS Minified：同上，但它显示的是压缩过的js代码，如果你要JS优化，它已经给你优化好了，来过来直接用。

All CSS：显示你网页所有CSS文件。

YUI CSS Compressor：显示网页压缩后的CSS文件，也是拿过来可以直接用的。

All Smush.it™：图片在线优化网站，点击它后会自动跳到smushit网站上给你自动优化CSS图片，该网站提供了优化前与优化后的对比，点击直接下载优化后的图片，在覆盖到自己网站上就可以了，强烈推荐。

Printable View：这个是打印用的，部门开会、前端设计师讨论、向老板汇报时估计用的上。

smushit网站

网站图片优化地址：http://www.smushit.com/ysmush.it/ 

 

 

1.减少一个页面访问所产生的http连接次数

合并css和合并js文件

2.css放在顶端 js放在低端 更加需要可以调整部分js的放置

3.js最小化 ，不要引用太多的外部文件，减少DNS查询 ,一次DNS查询要消耗20-120毫秒

4.给静态文件添加较长的过期时间 ，给css和js放在单独的文件中，减少重定向