《高性能网站建设指南》规则七、8—避免CSS表达式、使用外部JavaScript和CSS

避免CSS表达式

使用CSS表达式将背景色设置为每小时变化一次：

backgroud-color: expression( (new Date()).getHours() % 2 ? "#FFF" : "#000" );

对于低版本IE不支持min-width,能够识别表达式，而其余浏览器识别静态配置：

width: expression( document.body.clientWidth < 600 ? "600px" : "auto" );
min-width: 600px;

更新表达式

表达式的问题在于对其进行的求值的频率比人们指望的要高。它们不仅是页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过期都要求值。

围绕问题展开工做

用两种技术能够避免css表达式产生这一问题——建立一次性表达式和使用事件处理器取代css表达式。

一次性表达式

<style>
p {
    background-color: expression( altBgcolor(this) );
}
</style>
<script type="text/javascript">
function altBgcolor(elem) {
    elem.style.backgroundColor = (new Date()).getHours() % 2 ? "#F08A00" : "#B8D4FF";
}
</script>

css表达式调用了altBgcolor()函数，而该函数将样式的backgroud-color属性设置为一个明确的值，并移除了CSS表达式。

事件处理器

当浏览器的大小改变时，这个例子使用setMinWidth()函数来修改全部段落元素的大小

function setMinWidth() {
    var aElements = document.getElementsByTagName("p");
    for (var i = 0; i < aElements.length; i ++) {
        aElements[i].runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" );
    }
}
if (1 != navigator.userAgent.indexOf("MSIE")) {
    window.onresize = setMinWidth;
}

但这在第一次呈现时并不能恰当的设置段落的大小，因此须要使用”一次性表达式“介绍得方法设置初始宽度。

规则8——使用外部JavaScript和CSS

内联vs外置

纯粹而言，内联快一些，这主要是由于外部示例须要承担多个HTTP请求带来的开销。

可是JavaScript和css文件外置有机会被浏览器缓存起来。

若是你的网站的本质上可以为用户带来高完整缓存率，使用外部文件的收益就更大。若是不太可能产生完整缓存，则内联是更好的选择。

组件重用

若是你的网站中每一个页面都使用了相同的javascript和css,使用外部文件能够提升这些组件的重用率。在这种状况下使用外部文件更加具备优点，由于当用户在页面间导航时，javascript和css组件已经位于浏览器的缓存中了。

在典型状况下，页面之间javascript和css的重用既不可能100%重叠，也不可能100%无关。

最好的答案就是折中，将你的页面划分红几种页面类型，而后为每种类型建立单独的脚本和样式表。这比维护一个单独的文件要复杂，但一般比为每一个页面维护不一样的脚本和样式表要容易，而且对于给定的任意页面都只须要下载不多的多余的javascript和css。

主页

我所见过的使用内联方式反而更好的一个例外是主页。

页面查看

主页拥有没有很高的页面查看数量，然而，一般每一个会话只有一个页面查看。

空缓存vs完整缓存

完整缓存的百分比要比其余网站更低。出于安全的缘由，不少用户选择在每次关闭浏览器时清空缓存。下一次用户打开浏览器时，产生的是一个主页的空缓存页面查看。

组件重用

重用率很低，不少主页是用户来到网站后访问的惟一一个页面，所以它们谈不上重用。

分析了这些基准，咱们更加倾向于适用内联，固然，没有适用于全部主页的惟一答案。

一箭双鵰

这里介绍得两项技术使你既能够得到内联的优点，同时也能缓存外部文件。

加载后下载

对于做为屡次页面查看中的第一次的主页，咱们但愿为主页内联javascript和css，但又能为全部后续页面查看提供外部文件。这能够经过在主页加载完成后动态下载外部组件来实现（经过onload事件）。这可以将外部文件放到浏览器的缓存中以便用户接下来访问其余页面。

这些页面中javascript和css被加载到页面中两次（先是内联的，而后是外部的）。要使其可以工做，必须处理双重定义。例如脚本，能够定义但不能执行函数（至少不能让用户察觉）。使用了相对单位（百分比或em）的css若是指定两次可能会产生问题。将这些组件放到一个不可见的IFrame中是一种更好的方式。

动态内联

这能够经过使用前一个例子中的加载后下载技术来完成。当用户第一次访问页面时，服务器发现没有cookie,因而生成一个内联了组件的页面。而后服务器添加javascript来在页面加载后动态下载外部文件(并设置cookie)。下一次访问页面时，服务器看到了cookie，就会生成一个使用外部文件的页面。

这种方式的美好之处在于它的宽容。即使cookie的状态和缓存的状态不匹配，页面也可以工做，只是没有本应该的那么优化而已。