- 浏览: 603018 次
- 性别:
- 来自: 杭州,长沙
文章分类
- 全部博客 (279)
- Java (30)
- Jsp、Servlet (18)
- Web前端 (56)
- Oracle (31)
- SqlServer (1)
- Jetty (3)
- Tomcat (6)
- Weblogic (11)
- Websphere (2)
- Struts2 (13)
- Spring (5)
- Ibatis (8)
- Hibernate (3)
- Webservice (1)
- C/C++ (2)
- Linux (13)
- Android (1)
- 正则表达式 (3)
- 网络组建 (3)
- 软件工程 (11)
- IDE使用技巧 (20)
- Windows操作技巧 (18)
- 养生之道 (1)
- 杂七杂八 (15)
- 心理保健 (1)
最新评论
-
50854319:
elements[i] = tagArr[i]; 这个需要修改 ...
document.getElementsByName在IE下的bug解决 -
mengsina:
通过楼主的介绍,能够启动client了。但是又遇到了cisco ...
(转)Cisco Systems, Inc. VPN使用过程中常见问题解决方案 -
zzz_robinson:
谢谢,关闭-启动-启动。这个循序对的,否则每次都提示服务没打开 ...
(转)Cisco Systems, Inc. VPN使用过程中常见问题解决方案 -
wuchunjiesp:
总算解决了,THANK楼主,空值问题是TYPE里面参数类型定义 ...
(原创)Ibatis2调用数据库存储过程的相关示例 -
wuchunjiesp:
存储里面是这样的
FOR I IN 1..P_GOODSDI ...
(原创)Ibatis2调用数据库存储过程的相关示例
18 预先加载组件 (Preload Components)
tag:content
预加载看起来和后加载原则是个矛盾,但它其实是为了另外一个目的。预加载组件让你可以利用浏览器的空闲时间来加载之后需要的组件(比如图片,样式表和脚本)。这样当用户浏览下一个页面的时候,大部分组件都已经在缓存里了而页面会加载的更快。
有几种预加载的类型:
- 无条件预加载-当原本内容加载完成时,立刻开始获取一些额外的组件。比如到google.com看下一个sprite图片怎样被在onload事件后请求的。在google.com的首页里并没有用到sprite图片,但被用在接下来的结果页面里。
- 有条件的预加载-根据用户的行为来猜测用户什么时候到达下个页面然后据此预加载。在search.yahoo.com上,你可以看到额外的组件在你在输入框中输入时是怎样被加载的。
- 有预期的加载-当登录重新设计的网站时进行加载。你通常会在重新设计网站后听到:“新网站很酷,但它比以前的要慢”。这个问题的部分原因是用户访问旧网站时有所有的缓存,而对于新的来说,缓存是空的。你可以通过在登录重新设计的网站前预加载一些组件来缓解这方面的影响。你的旧网站可以用浏览器空闲的时间来请求新网站中用到的脚本和图片。
19 减小DOM元素的数量 (Reduce the Number of DOM Elements)
tag:content
复杂的页面意味着更多的字节需要被下载而且也意味着在JavaScript中遍历DOM更慢。比如你在页面中添加一个事件,让它在500或者5000个DOM元素中循环,它们的效率是不同的。
更多的DOM元素表明有些标签需要被改良而并不一定需要移除实际内容。你是否为了布局而使用繁琐的网一样的表格?你是否只是为了弥补一些布局的问题而使用了更多的div标签?也许还有更好和更符合语义的标签可以使用。
YUI CSS utilities可以很好的帮助进行布局:grid.css 可以帮助你进行所有的布局,front.css 和 reset.css 可以帮助你去除浏览器默认的格式。这是你开始重新审视你的标签的机会,比如只在语义符合时使用div标签,而不是用它来另起一行。
DOM元素的数量很好检测,只要在Firebug的控制台里输入:
document.getElementsByTagName('*').length
那么多少DOM元素算多呢?查看下类似的使用较好的标签的页面。比如Yahoo! Home Page是一个很丰富的页面但只有700以下的DOM元素(HTML标签)。
20 分域部署部件:Split Components Across Domains
tag:内容
将部件分割能使你获得最大的并行下载效率。但你同时需要注意不使用多于2~4个域名,以避免DNS查询导致的问题。例如,你可以将HTML内容和动态的组建放于www.example.org域名下,将静态组件分别放于static1.example.org和static2.example.org之下。
查看Tenni Theurer和Patty Chi的"Maximizing Parallel Downloads in the Carpool Lane"获取更多关于并行下载的信息。
21 减少Iframe的数量 Minimize the Number of iframes
tag:内容
Iframes 能够使HTML文档被插入进父级文档中。首先需要明确iframe的工作方式,才能有效的利用这一形式。
<iframe>的优点:
- 对于第三方内容,比如广告,能够在不影响父级设计的情况下快捷插入。
- 提供安全沙箱,不影响父级。
- 能够并行下载脚本。
<iframe>的缺点:
- 即使是空的也会有消耗。
- 会锁住页面的onload事件。
- 不支持语义表达。
22 避免404错误 No 404s
tag:内容
一个获得没用的404响应的HTTP请求对于宝贵的HTTP请求资源来说是完全不必要的,而且这样还会减慢用户的体验。
有的网站提供了有帮助的404错误信息,比如"你是否在寻找……?",这样虽然能提高用户体验,但同样浪费了服务端资源(比如数据库)。尤其不妙的是在请求一个外部的Javascript脚本文件失败时获得的一个404错误,因为这样不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码。
23 减少Cookie的大小 Reduce Cookie Size
tag:cookie
有多种理由让我们应用HTTP cookie,比如身份验证,或者个性化设置。Cookie中的信息在服务端和浏览器间被放在HTTP头中交换。尽量减少cookie的体积对减少用户获得响应的时间十分重要。
查看Tenni Theurer和Patty Chi的"When the Cookie Crumbles"获取更多信息。
- 去除不必要的cookie。
- 尽量减少cookie的大小。
- 留心将cookie设置在适当的域名下,避免影响到其他网站。
- 设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快的删除cookie,从而减少用户的响应时间。
24 为部件使用没有cookie的域名 Use Cookie-free Domains for Components
tag:cookie
当浏览其请求一个静态图片并一同发送cookie时,服务器并不需要这些cookie。这样只是毫无益处的创建了多余的网络流量。应当保证静态的部件在请求时没有携带cookie,所以需要把你的静态部件放在另一个子域名下。
如果你的域名是www.example.org,你可以将你的静态部件放在static.example.org中。如果你把cookie设置在顶级域名example.org上而不是www.example.org,那么所有发送至static.example.org的请求会包括那些cookie。在这种情况下,你可以买一个全新的没有cookie的域名来放置你的静态部件。Yahoo!使用了yimg.com,YouTube试用了ytimg.com,Amazon使用的是images-amazon.com。
将静态部件放于没有cookie的域名下的另一个好处是一些代理服务器会拒绝缓存有cookie的部件。于此相关的一点是,如果你怀疑你应该为你的首页使用example.org还是www.example.org,考虑cookie的赢下。省略www会让你不得不把cookie写到*.example.org下,所以考虑性能,最好使用www.子域名,然后把cookie写到这个子域名下。
25 减少DOM的读取 Minimize DOM Access
tag:javascript
利用Javascript读取DOM元素很慢,所以为了获得响应更快的页面,你应该:
- 缓存被读取的元素的引用。
- 脱机更新节点然后把它们加回到树结构中。
- 避免利用Javascript定位布局。
查看Julien Lecomte的"High Performance Ajax Applications"获得更多信息。
26 开发灵巧的事件处理程序 Develop Smart Event Handlers
tag:javascript
如果有太多的事件处理逻辑部署在DOM树的不同元素上,它们的频繁执行会拖慢页面的响应速度。而使用事件委托是一个好的解决方法。如果在一个Div中有10个按钮,与其在每个按钮上都放一个事件处理程序,步入只在Div上放一个事件处理程序。事件会冒泡上溯,这样你就会捕获这一事件,并找出是哪个按钮发起的它。
同样,你并不需要等待onload事件来启动一些操作DOM树的程序。你只需要保证你需要操作的元素可用就可以了。你不需要等待所有的图片下载完毕,你应当使用DOMContentLoaded事件来替代onload事件,当然,目前并不是所有浏览器都支持这一事件,你可以使用YUI Event组件,其中包含了一个onAvailable
函数。
查看Julien Lecomte的"High Performance Ajax Applications"获取更多信息。
27 选择<link>而不是@import Choose <link> over @import
tag:css
前面提到把CSS应当放在最顶端来提供预显。在IE中,放在页面底部的@import和<link>效果是一样的,所以最好不要用它。
28 不使用过滤器 Avoid Filters
tag:css
IE专有的AlphaImageLoader
过滤器是为了解决半透明真色PNG图片在IE7之前的版本中显示的问题。这个过滤器会在图片下载时堵塞住展示。而且它会消耗内存并影响每个元素而不仅仅是每张图片,所以这个过滤器的问题很多。
所以最好在IE中完全不使用AlphaImageLoader过滤器,而使用渐淡的PNG8图片。如果你明确需要AlphaImageLoader,请使用hack _filter,从而不影响到你的IE7+的用户。
29 优化图片
Optimize Images
tag:images
当设计师制作好网站的图片后,还有些事情应该是你在把这些图片上传到服务器之前做的。
- 你可以检查GIF图片中的调色板是否和图片中的色彩数一致。使用imagemagick来帮助你方便的检查:
identify -verbose image.gif
如果你看到一个4色的图片却有一个256色的调色板,那么还有很大的空间来做性能优化。 - 试试把GIF转换成PNG是否会节省空间,这是常有的事情。由于浏览器支持的限制,开发者往往怀疑是否该使用PNG,但这是过去的事情了。唯一的问题是真色的PNG图片的半透明问题,但同样,GIF不是真色的而且也不支持丰富的透明效果。所以GIF可以做的,PNG或者PNG8同样可以做到(除了动画)。一条简单的imagemagick语句就可以提供可用的PNG:
convert image.gif image.png
“我们强调的是,给PNG一个机会!” - 使用pngcrush或者任何的PNG优化工具,例如:
pngcrush image.png -rem alla -reduce -brute result.png
- 使用jpegtran处理JPEG图片。这个工具会无损操作JPEG图片,比如旋转,而且可以用来优化图片,比如去除图片中的注释和其他无用的信息(比如EXIF信息)。
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
30 优化CSS精灵 Optimize CSS Sprites
tag:images
- 横向布局Sprite中的图片往往比纵向布局会减少文件大小。
- 在一个Sprite中组合相近的颜色会降低颜色的数量,从而达到适合PNG8的低于256色的标准。
- “对移动设备友好”,不在Sprite里留下大的空隙。这并不十分影响文件的大小,但会减少客户端代理将图片解压为像素映射的内存消耗,100*100的图片是一万像素,而1000*1000则是一百万像素。
31 不要在HTML中缩放图片 Don't Scale Images in HTML
tag:images
不要使用大小超过需要的图片,即使你能够在HTML中设置它的属性。如果你需要
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么就使用恰好100*100px的图片,而不是使用缩放后的500*500的图片。
32 使用小的可缓存的Favicon.ico Make favicon.ico Small and Cacheable
tag:images
favicon.icon是放在服务器根目录的一个图片,它是个麻烦却不得不处理,因为即使你不关心,浏览器依然会请求这张图片,所以最好不要提供一个404的错误。而且由于它是在同一服务器下的,Cookie也会随着每次请求一并发送。这张图片同样干扰下载队列,比如在IE中,当你在onload事件中请求额外的组件时,favicon会在这些额外组件之前下载。
所以为了减少favicon.ico的不利影响,我们应当:
- 使用小图片,小于1k为佳。
- 设置你认为合适的过期时间(因为你如果更新了图片,你并不能修改它的名字)。你可以设置过期为未来的几个月。你可以借鉴下你当前的favicon.ico的最后更新时间来作为设置依据。
Imagemagick 能够帮助你创建小图片。
33 保证组件大小小于25K Keep Components under 25K
tag:mobile
这一限制是因为iPone不会缓存大于25K的组件,注意这里指的是未压缩前的大小。这就是为什么缩小大小很重要,因为单单gzip并不足够。
查看Wayne Shea和Tenni Theurer的"Performance Research, Part 5: iPhone Cacheability - Making it Stick"获取更多信息。
34 把组件打包进多部分文档中 Pack Components into a Multipart Document
tag:mobile
把组件打包进多部分文档类似一封包含有附件的邮件,它能让你通过一个HTTP请求获取多个组件(记住HTTP请求是很昂贵的)。当你使用这一技术,请先检查客户端是否支持它(iPone不支持)。
发表评论
-
List of mine types
2010-08-03 18:44 1325List of mine types &qu ... -
document.getElementsByName在IE下的bug解决
2010-06-17 09:23 3768那天封装一个ajax边输入边提示标签,在JS脚本中使用到了do ... -
JS文件中获取contextPath的方法
2010-06-11 15:48 3099function getContextPath() { ... -
javascript获取当前鼠标在屏幕上的会标(转)
2010-06-11 14:35 990<script>function mouseMov ... -
HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响
2010-06-09 13:09 2208在上一节中发现,背景图片似乎还有些需要研究的地方。 代码 ... -
HTML页面元素加载顺序研究报告(4)----用JavaScript插入图片
2010-06-09 13:08 33744.下面我们试试用Javascript插入图片 代码: ... -
HTML页面元素加载顺序研究报告(3)----Script标签与背景图片(转)
2010-06-09 12:08 23433、看下Javascript对图片加载顺序的影响 采用和 ... -
HTML页面元素加载顺序研究报告(2)----背景图片(转)
2010-06-09 11:39 26532、接下来考察背景图片的加载: 一般来说,添加背景图片有 ... -
HTML页面元素加载顺序研究报告(1)----简单Div罗列(转)
2010-06-09 11:37 1876一直没有意识到HTML页面的元素加载顺序有什么重要性,至多 ... -
提高网站访问速度的34条军规一 (转)
2010-06-09 11:28 13061 减少HTTP请求数量 (Minimize HTTP Req ... -
JavaScript输出中文乱码的解决方法
2010-06-08 16:27 1367当页面中包含的js文件中有中文输出时,在页面中会出现乱码. ... -
javascript动态循环添加行及行中的事件调用带参数的函数
2010-06-03 16:33 1935今天在做一个动态循环添加行,并在新行添加onclick事件,调 ... -
(转)a href=#与 a href=javascript:void(0) 的区别
2010-02-23 15:53 2236<a href="#"> 点击 ... -
树型对象的table展现形式思考
2009-10-20 13:57 1021如图所示:近日项目中需要将一个动态树型结构以表格动态合并行 ... -
Javascript实现web表格宽度拖动(分固定宽度和不固定宽度)
2009-06-30 19:47 2036<html><head><tit ... -
JSeclipse最新的update地址
2009-03-30 10:22 1452http://www.interaktonline.com/P ... -
Javascript窗口与提示大全
2009-03-19 15:40 1124//-----------按钮提示框----------// ... -
web标准:div+css命名规则
2009-03-16 11:41 1172SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很 ... -
四种悬浮DIV提示效果
2009-03-11 09:55 7071<html> <head> <t ... -
javascript中数组去除重复值
2008-09-08 19:44 3395<script> Array.prototyp ...
相关推荐
提高网站访问速度的34条军规。本文讲述的是如何让访问速度增加的一些方法。
提高网站访问速度的34条军规。本文讲述的是如何提高网站访问速度
Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt
成为编程高手的二十二条军规 成为编程高手的二十二条军规
收集来的技术管理军规,和提高情商的军规,只为给大家提供便利。在文档中,通过作者幽默的语言和技术易懂的语言,告诉每一个做技术管理的人,此功法参透必将能成一番霸业。
移动app测试的22条军规
征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规
运维的 85 条军规
04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规....
58 到家数据库 30 条军规
MySQL DBA运维开发30条军规
移动app测试的22条军规. 学习开发必须读
员工福利系列模板-改家乐福32条军规.doc
MySQL数据库开发的三十六条军规_石展_完整
mySql36条军规 主讲Mysql规范和优化对程序员很有帮助。
介绍移动APP测试22条军规读书分享,初步了解APP测试的基本方法和注意事项,希望对大家有所帮助。
SQL Server数据库开发的二十一条军规 SQL Server数据库开发的二十一条军规
自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化网站性能的。以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了“怀孕,出生,毕业,结婚...