Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS
作者：dudo 来源：dudo博客 发布时间：2008-05-29 13:34:00
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：
CSS：
把样式表置于顶部
避免使用CSS表达式（Expression）
使用外部JavaScript和CSS
削减JavaScript和CSS
用<link>代替@import
避免使用滤镜
JavaScript
把脚本置于页面底部
使用外部JavaScript和CSS
削减JavaScript和CSS
剔除重复脚本
减少DOM访问
开发智能事件处理程序
17、把样式表置于顶部
在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。
注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
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和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。
关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是网站的主页，如Yahoo!主页和My Yahoo!。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时 间。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
0
投稿猜你喜欢
文章转自IT专家网论坛，作者builder 本文探讨了在SQL Server中处理这些值时涉及的3个问题：计数、使用空表值以及外键处理。数据- 前言数学建模的介绍与作用全国大学生数学建模竞赛：全国大学生数学建模竞赛创办于1992年，每年一届，已成为全国高校规模最大的基础性学科竞赛，也
- 需求：建立年级、班级两个数据表，获取年级表信息，根据年级，获取相应的班级效果图：不完美的地方就是在不选择年级的时候，是不能选择任何班级的。代
- 一、算术运算符主要用于数学运算，其可以连接运算符前后的两个数值或表达式，对数值或表达式进行加 （+）、减（-）、乘（*）、除（/）和取模（％
- 传统的HTML页面中连动下拉框采用了两种方法：1）直接将下拉框中的内容hardcode于html的javascript中，调用javascr
- goland leetcode 插件安装可以提高刷题效率，对于学习算法的同学是个不错的选择安装使用步骤：安装插件：a. 左上角Goland
- 出差到了中国雅虎，这里的风格和淘宝很不一样。和雅虎一比，淘宝的办公环境就是个菜市场，闹哄哄，到处是人，在走道里狂奔乱窜，在每个会议室争得面红
- 影响的范围: IE的所有版本在表单的radio/checkbox控件中，一旦他们的DOM结构被更改过就会出现这个bug。bug描述当象下例中
- 首先打击我的就是rpm安装，它告诉我发现了Mysql版本冲突，安装无法继续。我用rpm -q 查询后，想通过rpm -e 来删除系统自带的版
- 本文实例为大家分享了vue组件实现可搜索下拉框的具体代码，供大家参考，具体内容如下一、效果二、代码dropdown-ext.vue<t
- 在本节中，您将添加一些类，这些类用于管理数据库中的电影。这些类是ASP.NET MVC 应用程序中的"模型(Model)"
- Python 正则表达式是什么学习 Python 正则表达式离不开 re 模块，所以本篇博客会配合 re 模块进行编写。re 库是 Pyth
- 新安装的MySQL5.7，登录时提示密码错误，安装的时候并没有更改密码，后来通过免密码登录的方式更改密码，输入update mysql.us
- c语言里：c_p.c#include <stdio.h>void get_str_list(int n, char *b[2])
- 说到网络产品，离不开的话题就是用户，就像传统行业的消费者。人是复杂的，网民的用户行为更加复杂，用户和用户是不一样的，或者说，每个用户都不一样
- 按住Ctrl，点击函数名称，即可跳转到该函数的代码文件中选中后，函数显示有下划线：点击函数名称，跳转到该函数所在的文件里：补充：pychar
- 时间紧任务重，女神提出的要求有模棱两可，只能自己考虑各种情况，除了用python还有谁能这么短的时间搞出来。程序界面，增删改查不能少，后悔药
- Pandas count()与values_count()用法count()values_count()在指定的统计的列名上结果多了该列：对
- 代码：__Author__ = "Shliang"__Email__ = "shliang0603@gmail
- 开发的时候我都是使用XDebug在本地调试，但是最近加入一些项目中去，环境太复杂了，要在本地搭建一个开发环境真的太麻烦了，那么我们怎么使用x
