注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

性能优化总结  

2010-10-24 18:58:12|  分类: 网站性能 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

当然了,做优化的脱离不了浏览器,也脱离不了工具,为此,你手上得准备好一下几个工具:Google的Page Speed,Yahoo的YSlowHTTPWatchdynaTrace AJAXFiddlerFirebug。现在主流浏览器都集成了开发人员工具,提供了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代码是页面初始化的时候就需要实例化或者执行的,哪些又是不需要的,对于不需要页面初始化就执行的代码,建议是按需进行实例化或者执行,等到需要它的时候才进行实例化。

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

来源:http://www.ilovejs.net/
  评论这张
 
阅读(751)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017