性能优化总结

关于性能优化方面的关注点，每天都能够朗朗上口，但是当具体拿出一个页面给你去优化的时候，有可能你会不知道如何去展开优化工作和步骤（前几天有个朋友让我去优化一个网站首页，开始我就处于这种状态，很杯具~），也可能是想到一点就优化一点，乱套了。从而缺乏一个整体思路性的优化步骤。当我想到了这一点，就开始着手去总结这个一个优化流程的东西。

当然了，做优化的脱离不了浏览器，也脱离不了工具，为此，你手上得准备好一下几个工具：Google的Page Speed，Yahoo的YSlow，HTTPWatch，dynaTrace AJAX，Fiddler，Firebug。现在主流浏览器都集成了开发人员工具，提供了NET面板可以查看HTTP请求瀑布图，这是个好事情。

一切前提条件都就绪了，那么接下来罗列一下我认为的优化的流程，也是将来会指导我是思维的一个流程步骤吧：

一、查看HTTP瀑布图，一个是查看页面的加载时间，二是查看关键点：造成HTTP请求不能够并行加载的那些资源加载断层图（非IE：Firebug，IE：HTTPWatch；通用的是Fiddler；IE9自带了HTTP加载瀑布图）。

1. 查看JavaScript的加载效果：js文件的加载、行内脚本是否阻塞其他资源的加载和页面渲染
2. 查看CSS文件的加载：是否跟在行内脚本的后面，阻塞了后面资源的加载
3. 第三方广告内容的加载是否影响了主页面资源的加载。这个可以通过是否存在过多的第三方域名造成的阻塞加载的请求
4. 是否进行了多域名分发加载资源。
5. 页面在第二次加载的时候是否是从缓存中读取静态资源
6. 查看资源加载是否有404s错误
7. 查看页面是否造成了重定向（包含301、302请求状态码）
8. 资源的加载顺序是否正常：是否按照重要的优先级正确的顺序加载（CSS、js文件的加载方式是否正确）。

二、查看静态资源的请求头和响应头。特别是js、css、html文档，以及图片是否设置了Expires、max-age、Last-Modified、Etag请求头。

1. 是否启用了gzip压缩
2. 查看请求头中是否存在了多大的cookie
3. 是否对静态资源启用了缓存机制（Expires、cache-control、max-age、Last-Modified、Etag等请求头）
4. 是否有Transfer-Encoding:chunked响应头。这个响应头的作用是使得HTML文档可以边加载内容边解析页面

三、查看页面图片。

1. 查看页面中图片是否被强制进行了缩放，并且查看页面的img标签是否设置了跟图片尺寸一样的height、width属性。
2. CSS背景修饰图片是否sprites了
3. 图片是否经过优化（清除元数据），通过Page Speed就可以检测出来

四、查看DOM文档树以及页面源代码

1. 页面是否存在过多的iframe
2. Minify CSS、HTML、JavaScript，是否对CSS、Javascript进行了压缩，包括行内和外联的文件的代码，以及是否对HTML也进行了压缩
3. 是否使用了HTML5的doctype声明方式
4. 是否显示声明了charset
5. 查看页面中css、js文件以及行内样式、行内脚本的位置是否正确。
6. 查看body标签内是否存在过多的style行内样式。因为body标签内的行业样式一方面会造成整体样式的重绘、造成页面样式的闪白，另一方面也可能会阻塞页面的渲染和资源的加载。
7. 查看body标签中（除了底部的之外）是否存在过多的script行内脚本阻塞页面资源的渲染和加载。行内脚本所造成的阻塞是全局性的，在解析js代码期间，页面也一切行为都会受到阻塞。
8. 通过dynaTrace AJAX工具查看页面初始化的情况，查看页面渲染时间、脚本解析时间等等方面的信息，查看脚本的执行时间是否过长。

五、在表面可以直接看到的之后，再根据页面的特点和功能，在不改变页面功能的情况下，改善代码，优化页面的初始化速度。

1. 服务端代码是否进行了优化，比如刷新输出……
2. 比如一些需要按用户需求来驱动的功能，这样的一些资源有两种方案可以解决：一是用户操作之后，就开始初始化组件，并给予一个良好的提示信息；而是使用页面的onload事件之后加载额外的内容。综合各方面的原因，推荐使用第一种方式，因为它是按需加载的，只要需要它的时候才加载资源，不需要的话就不加载，这样可以尽可能的减少页面的流量。
3. 一些内容在页面初始化过程中是隐藏的话，那么就可以在页面初始化的时候，这些隐藏的内容就不随页面的初始化而加载进来了，特别是图片资源的记载。
4. 尽量拆分页面中js文件，哪些是需要页面在初始化的时候就必须要执行的代码，哪些不是页面初始化所必须的；还有一种情况是那些js代码是页面初始化的时候就需要实例化或者执行的，哪些又是不需要的，对于不需要页面初始化就执行的代码，建议是按需进行实例化或者执行，等到需要它的时候才进行实例化。

上面所罗列的优化步骤，也只是一个指导，还有很多可优化的方面还没有涉及到，有待逐步完善，而且随着性能优化逐渐深入，可优化的空间还会越来越多的，关注点也会越来越细。