原文:best practices for speeding up your web site
7 不使用CSS表达式 (Avoid CSS Expressions)
tag:css
CSS表达式是一种有力的(同时也很危险的)动态设置CSS属性的方法。从IE5开始支持CSS表达式。比如,使用CSS表达式可以实现背景颜色每小时变换的效果。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示,表达式方法采用了Javascript的表达。CSS属性则被设为Javascript表达式的结果。其它的浏览器会忽略CSS表达式,所以对于设置专属IE的属性以便在不同浏览器间能有一致的体验是有用的。
而CSS表达式的问题是它比大多数人期望的执行次数更频繁。表达式不仅仅在页面展现和重新设置大小的时候执行,在页面滚动,甚至用户在页面上挪动鼠标时都会执行。给CSS表达式添加一个计数器可以跟踪CSS在什么时候和怎样执行。在页面上移动鼠标可以轻易的产生一万次以上的执行。
使用一次性的表达式是减少CSS表达式的执行次数的一个方法,当表达式第一次执行时,CSS表达式会被一个确定的值代替。如果在页面生命周期中,样式属性必须动态的设定,使用事件处理替代CSS表达式是一个可选的方法。如果必须使用CSS表达式,要记得它们会执行上千次并影响页面的性能。
8 使用外部的JavaScript和CSS (Make JavaScript and CSS External)
tag:javascript,css
很多性能规则都是解决怎样处理独立的组件的问题的。但是,考虑这些之前,你应该先考虑一个更基本的问题:JavaScript和CSS应该被放于外部的文件,还是内联在页面里?
在实际应用中使用外部的文件往往产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。而内联在页面里的JavaScript和CSS会在每次请求页面时下载。这会减少所需的HTTP请求数,但增大HTML文档的体积。而另一方面,如果放在外部文件里的JavaScript和CSS被浏览器缓存,则既不用增加HTTP请求的数量,HTML文档的体积也会减少。
关键的问题是,外部的JavaScript和CSS的组件被缓存的频率和HTML文档被请求的次数相关。虽然很难去量化,但可以被用很多指标衡量。如果你的网站的用户在每个会话中浏览了很多网页而且很多页面重用了相同的JavaSctipt和样式表,缓存外部文件是有很大潜在的好处的。
很多网站都符合这样的指标。对于这些网站来说,最好的解决方案是把JavaScript和CSS发布为单独的文件。唯一的例外,对于主页,内联的文件更好一些,例如Yahoo!'s front page 和My Yahoo!。主页在每个会话中只有很少浏览(也许只有一次),你会发现内联的JavaScript和CSS会让终端用户的响应更快。
对于有很多页面浏览量的首页来说,有很多能平衡内联文件所提供的HTTP请求减少的效果与外部文件缓存获得的好处的技巧。一种这样的技巧就是把JavaScript和CSS内联在说夜里,但在页面完成加载时动态下载外部文件。随后的页面会调用浏览器中已经缓存的外部文件。
9 减少DNS的查询 (Reduce DNS Lookups)
tag:content
正如电话簿使人名和他们的电话号码相对应,域名系统(DNS)能够使域名和IP地址相对应。当你在浏览器中键入http://www.yahoo.com,浏览器链接的DNS解析器会返回服务器的IP地址。域名解析会耗费一些时间,DNS查找给定域名的IP地址一般会耗费20-120毫秒。在DNS查找结束前,浏览器不会从目标域名那里下载任何东西。
DNS查询会被缓存以便优化性能。会有一个专门的缓存服务器进行缓存,用户的ISP或者本地网络会维护它,但独立用户的电脑里也会有缓存。DNS信息存在于操作系统的DNS缓存里(微软Windows操作系统里的“DNS客户服务”)。大部分浏览器有它们自己的缓存,与操作系统的缓存相独立。当浏览器在自己的缓存里保存了DNS的记录,它不会向操作系统发出请求记录的要求。
IE默认缓存DNS查询30分钟,在注册表的DnsCacheTimeout的键值中设定。Firefox则缓存DNS查询一分钟,在配置network.dnsCacheExpiration 中设定。(Fasterfox 将它变为一小时。)
当客户端的DNS缓存被清空(包括浏览器和操作系统的缓存),DNS查询的数量等同于网页中单独的域名的数量。包括页面中的链接,图片,脚本文件,样式表,Flash对象等。减少不同域名的数量则会减少DNS查询的数量。
减少不同域名的数量可能减少页面并行的下载数量。减少DNS查询缩短了响应时间,但减少了并行下载数也许会增加响应时间。我的建议是将组件分布在两到四个域名之间。这能很好的折中减少DNS查询提高的速度和维持较高水平的并行下载的效果。
10 缩小JavaScript和CSS (Minify JavaScript and CSS)
tag:javascript,css
缩小是指从代码中删除不必要的字母,减少文件体积从而提高加载速度。缩减代码时需要移除所有的注释,以及不需要的空白(空格,新行和tab)。这样处理JavaScript之后,会由于下载文件的体积被减少而提高响应的性能。两个常用的缩减JavaScript代码的工具是JSMin
和YUI Compressor。YUI compressor也可以压缩CSS。
代码混淆是另一个可用于源代码的优化方案。它比压缩更为复杂,而且在混淆的过程中更容易产生Bug。纵观U.S.的前十大网站,压缩获得了21%的体积减小而代码混淆达到了25%。虽然代码混淆的压缩程度更高,但压缩JavaScript的风险更小。
不仅仅要压缩外部的脚本和样式表,内敛的<script>和<style>部分也可以而且应当被压缩。即使你gzip了你的脚本和样式,压缩它们仍然能减少5%以上的体积。随着JavaScript和CSS的应用和体积的增加,压缩你的代码获得的收益也会越来越多。
分享到:
相关推荐
提高网站访问速度的34条军规。本文讲述的是如何让访问速度增加的一些方法。
提高网站访问速度的34条军规。本文讲述的是如何提高网站访问速度
高考作文写作指导写好高考考场作文的100条军规------.pdf
信用风险与策略跟踪:长久期城投债的“二十二条军规”-0301-中信证券-14页.pdf
收集来的技术管理军规,和提高情商的军规,只为给大家提供便利。在文档中,通过作者幽默的语言和技术易懂的语言,告诉每一个做技术管理的人,此功法参透必将能成一番霸业。
员工福利系列模板-改家乐福32条军规.doc
移动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条军规 本资源总结了MySQL DBA运维开发的30条军规,涵盖了基础规范、命名规范、表设计规范、字段设计规范、索引设计规范和SQL使用规范六个方面。这些军规旨在帮助DBA和开发者更好地管理和维护...
移动app测试的22条军规. 学习开发必须读
Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt
欧巨MIL-DTL-5015系列军规连接器 产品型录pdf,欧巨MIL-DTL-5015系列军规连接器 产品型录
成为编程高手的二十二条军规 成为编程高手的二十二条军规
mySql36条军规 主讲Mysql规范和优化对程序员很有帮助。
MySQL数据库开发的三十六条军规_石展_完整
介绍移动APP测试22条军规读书分享,初步了解APP测试的基本方法和注意事项,希望对大家有所帮助。
SQL Server数据库开发的二十一条军规 SQL Server数据库开发的二十一条军规