网站性能最佳体验的条黄金守则 和(模板).pdfVIP

网站性能最佳体验的条黄金守则 和(模板) 转载自 /article.asp?id=216 英文地址：/performance/rules.html 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外， JavaScript 和 CSS 也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面： CSS： 1. 把样式表置于顶 2. 避免使用 CSS 表达式（Expression） 3. 使用外 JavaScript 和 CSS 4. 削减 JavaScript 和 CSS 5. 用link代替@import 6. 避免使用滤镜 JavaScript 1. 把脚本置于页面底 2. 使用外 JavaScript 和 CSS 3. 削减 JavaScript 和 CSS 4. 剔除重复脚本 5. 减少 DOM 访问 6. 开发智能事件处理程序 17、把样式表置于顶 在研究 Yahoo!的性能表现时，我们发现把样式表放到文档的head/ 内部似乎会加快页面的下载速 度。这是因为把样式表放到head / 内会使页面有步骤的加载显示。 注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可 能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比 如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中 HTML 页面就是进程指针。当浏览 器有序地加载文件头、导航栏、顶部的 logo 等对于等待页面加载的用户来说都可以作为可视化的反馈。这 从整体上改善了用户体验。 把样式表放在文档底部的问题是在包括 Internet Explorer 在内的很多浏览器中这会中止内容的有序 第 1 页第 1 页 网站性能最佳体验的条黄金守则 和(模板) 呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。 HTML 规范清楚指出样式表要放包含在页面的head / 区域内：“和a /不同，link /只能出现在文 档的head / 区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去 尝试。最好的方案就是按照 HTML 规范在文档head / 内加载你的样式表。 18、避免使用 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 表达式，一定要记住它们要计算成千上万次并 且可能会对你页面的性能产生影响。 19、使用外 JavaScript 和 CSS 很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的 问题：JavaScript 和 CSS 是应该放在外部文件中呢还是把它们放在页面本身之内呢？ 在实际应用中使用外部文件可以提高页面速度，因为JavaScript 和 CS