JavaScript和CSS的优化提高网站功用
日期：2013-10-20 浏览次数：20632 次
在第一部分和第二部分中我们分别引见了改善网站功用中页面内容和服务器的几条守则，除此之外，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 />内加载你的款式表。 CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
18、避免使用CSS表达式（Expression）
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示，expression中使用了JavaScript表达式。CSS属性依据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
表达式的问题就在于它的计算频率要比我们想象的多。不只仅是在页面显示和缩放时，就是在页面滚动、乃至挪动鼠标时都会要重新计算一次。给CSS表达式添加一个计数器可以跟踪表达式的计算频率。在页面中随便挪动鼠标都可以轻松达到10000次以上的计算量。
一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运转时将结果赋给指定的款式属性，并用这个属性来代替CSS表达式。如果款式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的功用产生影响。
