《High Performance Web Sites》之 Rule 7 读书笔记

本人从此章第一次知道世上有种叫做 CSS expression 的东西,示例代码如下。

background-color: expression( (new Date()).getHours( )%2 ? “#B8D4FF” : “#F08A00” );

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }本章的主题就是“Avoid CSS Expressions”(避免使用 CSS expression )。CSS expression 是 IE only,很适合用来做跨浏览器兼容,比如 IE 不支持的 min-width 属性:

P {

width: expression( document.body.clientWidth<600 ? “600px” : “auto” );

min-width: 600px;

}

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }
那么 CSS expression 坏在哪里呢?在于它的计算次数过多(包括鼠标移动、滚动条位置改变、放大缩小窗口等待),并且可能锁死浏览器。本书有一个计算次数和锁死的官方示例:http://stevesouders.com/hpws/expression-counter.php 如何避免?事实上,本书认为每个需要用到 CSS expression 的地方都会有替代方法,本书给出了两种: 1、只计算一次的 expression (官方演示地址:http://stevesouders.com/hpws/onetime-expressions.php

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; } 2、Event Handler (官方示例: http://stevesouders.com/hpws/event-handler.php

function setMinWidth( ) {

setCntr( );

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;

}

以上代码使得每次窗口大小改变时,段落的宽度会自动调整。但是由于在第一次加载的时候不会初始化,需要和上一种方法配合使用。

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /white-space: pre;/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }