Web程序优化的最佳实践：JavaScriptj和CSS篇.doc

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了 一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 34 条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。 本文为CSS和Javascript部分： 除此之外，JavaScript 和 CSS 也是我们页面中经常用到的内容，对它们的优化也提高网 站性能的重要方面： CSS： 1. 把样式表置于顶部 2. 避免使用CSS表达式（Expression） 3. 使用外部JavaScript和CSS 4. 削减JavaScript和CSS 5. 用link代替@import 6. 避免使用滤镜 JavaScript 7. 把脚本置于页面底部 8. 使用外部JavaScript和CSS 削减JavaScript和CSS 和 剔除重复脚本（参考3、4） 9. 减少DOM访问 10. 开发智能事件处理程序 1、把样式表置于顶部 在研究Yahoo!的性能表现时，我们发现把样式表放到文档的head /内部似乎会加快页 面的下载速度。这是因为把样式表放到head /内会使页面有步骤的加载显示。 注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。 向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。 把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中 止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不 得不面对一个空白页面。 HTML规范清楚指出样式表要放包含在页面的head /区域内：和a /不同，link / 只能出现在文档的head /区域内，尽管它可以多次使用它。无论是引起白屏还是出 现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档head /内加载你的样式表。 2、避免使用CSS表达式（Expression） CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版 本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色： background-color: expression( (new Date()).getHours()%2 ? #B8D4FF : #F08A00′ ); 如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的 计算结果来设置。expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中 单独针对Internet Explorer设置时会比较有用。 表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量。 一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结 果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周 期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。 3、使用外部JavaScript和CSS 很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到 一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本 身之内呢？ 在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览 器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重 新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说， 如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可 以减少HTML文档的大小。 关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关