关于性能优化方面的关注点,每天都能够朗朗上口,但是当具体拿出一个页面给你去优化的时候,有可能你会不知道如何去展开优化工作和步骤(前几天有个朋友让我去优化一个网站首页,开始我就处于这种状态,很杯具~),也可能是想到一点就优化一点,乱套了。从而缺乏一个整体思路性的优化步骤。当我想到了这一点,就开始着手去总结这个一个优化流程的东西。
当然了,做优化的脱离不了浏览器,也脱离不了工具,为此,你手上得准备好一下几个工具:Google的Page Speed,Yahoo的YSlow,HTTPWatch,dynaTrace AJAX,Fiddler,Firebug。现在主流浏览器都集成了开发人员工具,提供了NET面板可以查看HTTP请求瀑布图,这是个好事情。
一切前提条件都就绪了,那么接下来罗列一下我认为的优化的流程,也是将来会指导我是思维的一个流程步骤吧:
一、查看HTTP瀑布图,一个是查看页面的加载时间,二是查看关键点:造成HTTP请求不能够并行加载的那些资源加载断层图(非IE:Firebug,IE:HTTPWatch;通用的是Fiddler;IE9自带了HTTP加载瀑布图)。
- 查看JavaScript的加载效果:js文件的加载、行内脚本是否阻塞其他资源的加载和页面渲染
- 查看CSS文件的加载:是否跟在行内脚本的后面,阻塞了后面资源的加载
- 第三方广告内容的加载是否影响了主页面资源的加载。这个可以通过是否存在过多的第三方域名造成的阻塞加载的请求
- 是否进行了多域名分发加载资源。
- 页面在第二次加载的时候是否是从缓存中读取静态资源
- 查看资源加载是否有404s错误
- 查看页面是否造成了重定向(包含301、302请求状态码)
- 资源的加载顺序是否正常:是否按照重要的优先级正确的顺序加载(CSS、js文件的加载方式是否正确)。
二、查看静态资源的请求头和响应头。特别是js、css、html文档,以及图片是否设置了Expires、max-age、Last-Modified、Etag请求头。
- 是否启用了gzip压缩
- 查看请求头中是否存在了多大的cookie
- 是否对静态资源启用了缓存机制(Expires、cache-control、max-age、Last-Modified、Etag等请求头)
- 是否有Transfer-Encoding:chunked响应头。这个响应头的作用是使得HTML文档可以边加载内容边解析页面
三、查看页面图片。
- 查看页面中图片是否被强制进行了缩放,并且查看页面的img标签是否设置了跟图片尺寸一样的height、width属性。
- CSS背景修饰图片是否sprites了
- 图片是否经过优化(清除元数据),通过Page Speed就可以检测出来
四、查看DOM文档树以及页面源代码
- 页面是否存在过多的iframe
- Minify CSS、HTML、JavaScript,是否对CSS、Javascript进行了压缩,包括行内和外联的文件的代码,以及是否对HTML也进行了压缩
- 是否使用了HTML5的doctype声明方式
- 是否显示声明了charset
- 查看页面中css、js文件以及行内样式、行内脚本的位置是否正确。
- 查看body标签内是否存在过多的style行内样式。因为body标签内的行业样式一方面会造成整体样式的重绘、造成页面样式的闪白,另一方面也可能会阻塞页面的渲染和资源的加载。
- 查看body标签中(除了底部的之外)是否存在过多的script行内脚本阻塞页面资源的渲染和加载。行内脚本所造成的阻塞是全局性的,在解析js代码期间,页面也一切行为都会受到阻塞。
- 通过dynaTrace AJAX工具查看页面初始化的情况,查看页面渲染时间、脚本解析时间等等方面的信息,查看脚本的执行时间是否过长。
五、在表面可以直接看到的之后,再根据页面的特点和功能,在不改变页面功能的情况下,改善代码,优化页面的初始化速度。
- 服务端代码是否进行了优化,比如刷新输出……
- 比如一些需要按用户需求来驱动的功能,这样的一些资源有两种方案可以解决:一是用户操作之后,就开始初始化组件,并给予一个良好的提示信息;而是使用页面的onload事件之后加载额外的内容。综合各方面的原因,推荐使用第一种方式,因为它是按需加载的,只要需要它的时候才加载资源,不需要的话就不加载,这样可以尽可能的减少页面的流量。
- 一些内容在页面初始化过程中是隐藏的话,那么就可以在页面初始化的时候,这些隐藏的内容就不随页面的初始化而加载进来了,特别是图片资源的记载。
- 尽量拆分页面中js文件,哪些是需要页面在初始化的时候就必须要执行的代码,哪些不是页面初始化所必须的;还有一种情况是那些js代码是页面初始化的时候就需要实例化或者执行的,哪些又是不需要的,对于不需要页面初始化就执行的代码,建议是按需进行实例化或者执行,等到需要它的时候才进行实例化。
上面所罗列的优化步骤,也只是一个指导,还有很多可优化的方面还没有涉及到,有待逐步完善,而且随着性能优化逐渐深入,可优化的空间还会越来越多的,关注点也会越来越细。
来源: http://www.ilovejs.net/