有选择地显示预加载内容提高网站的性能

　2008-01-05 08:34:51　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫嶅銈嗗姉閸樠囧煡婢跺á鐔兼煥鐎ｎ兘鍋撴繝姘拺鐟滅増甯掓禍浼存煕閹惧鈽夐柍缁樻煥椤繈鎳滅喊妯诲闂備礁鎲＄粙鎴︺偑閺夋垟鏋旈柡鍐ｅ亾缂佺粯绋撴禒锕傚磼濮橆剦鐎抽梻浣哥－缁垶骞戦崶顒傚祦閻庯綆浜栭弨浠嬫煙闁箑澧い鏂垮€规穱濠囨倷椤忓嫧鍋撻弽褜娼栧┑鐘宠壘閸屻劎鎲歌箛娑樼疅闁圭虎鍠楅弲鎼佹煥閻曞倹瀚�

核心提示：Html页面内的每个元素都可以通过javascript来访问，DHTML的样式属性包含有可视性属性，有选择地显示预加载内容提高网站的性能，后者能够让你控制是否在页面上显示元素的内容，要做到这一点，并在适当的时候显示其各个部分，这样就可以提高响应时间，你就要把属性设置为可视或者隐藏，下面的句法能够让用户通过Javascr

　　Html页面内的每个元素都可以通过javascript来访问。DHTML的样式属性包含有可视性属性，后者能够让你控制是否在页面上显示元素的内容。要做到这一点，你就要把属性设置为可视或者隐藏。下面的句法能够让用户通过Javascript来访问这个属性：
　　document.element_name.style.visibility = "visible"
　　
　　或者
　　document.element_name.style.visibility = "hidden";
　　
　　真正的元素通过使用其ID属性和JavaScript的getElementById方法就能够轻易被找到：
　　document.getElementById("element name").style.visibility = "hidden";
　　
　　要记住，HTML元素都被分配了ID属性，用来在页面里区分它们。这就答应DHTML和JavaScript能够定位并使用各个独立的元素。下面的HTML示例将不同的名称分配给了HTML标题（header）的元素，并使用JavaScript来显示和隐藏第二个标题：
　　<html>
　　<head>
　　<title>div test</title>
　　</head>
　　<body>
　　<h1
　　id="header1"
　　onMouSEOver='document.getElementById("header2").style.visibility="hidden";'
　　onMouseOut='document.getElementById("header2").style.visibility = "visible";'>
　　Now you see it!
　　</h1>
　　<h2 id="header2">
　　Now you don't!
　　</h2>
　　</body>
　　</html>
　　
　　这段代码使用了第一个标题元素的onMouseOver和onMouseOut事件，用来显示和隐藏第二个标题元素。要注重，通过ID属性分配给第二个标题的名称，是用来控制其在JavaScript里可视程度的。
　　
　　在一次只需要显示文档的一部分的时候，显示和隐藏元素的方法是好处颇多的。它可以用于菜单、扩展／压缩页面的区域，以及其他等等。你可以对任何HTML的元素使用这个技巧，但是在处理页面大块区域的时候，DIV元素将是它的一个主要竞争对手。
　　
　　什么是DIV？
　　DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。Internet EXPlorer和Netscape的浏览器都支持DIV标签。
　　
　　DIV和SPAN
　　很多开发人员都把DIV元素同SPAN元素弄混淆了。尽管它们在特性上相同，但是SPAN是用来定义内嵌内容而不是大块内容的。你可以对段落使用DIV标签，但是SPAN对于为段落内的一个或者多个字赋予非凡的特性很有用。
　　
　　DIV标签答应你分割一个Web页面，以此来进行格式化和演示。可以将它和可视性的技巧组合起来使用，用以分割页面的内容，并显示你所选择的内容。下面这段示例代码使用了DIV标签将该页面分割成了多个区域；超链接会显示和隐藏这些区域：
　　<html><head>
　　<title>div test</title>
　　<script language="JavaScript">
　　function setAllVisible() {
　　document.getElementById("section1").style.visibility="hidden";
　　document.getElementById("section2").style.visibility="hidden";
　　document.getElementById("section3").style.visibility="hidden";
　　document.getElementById("section4").style.visibility="hidden";
　　}
　　</script></head>
　　<body >
　　<h1>Builder.com Sample</h1>
　　<ul>
　　<li><a href="#"
　　onClick='
　　document.getElementById("section1").style.visibility="visible";
　　document.getElementById("section2").style.visibility="hidden";
　　document.getElementById("section3").style.visibility="hidden";
　　document.getElementById("section4").style.visibility="hidden";'>Section 1</a></li>
　　<li><a href="#"
　　onClick='
　　document.getElementById("section1").style.visibility="hidden";
　　document.getElementById("section2").style.visibility="visible";
　　document.getElementById("section3").style.visibility="hidden";
　　document.getElementById("section4").style.visibility="hidden";'>Section 2</a></li>
　　<li><a href="#"
　　onClick='
　　document.getElementById("section1").style.visibility="hidden";
　　document.getElementById("section2").style.visibility="hidden";
　　document.getElementById("section3").style.visibility="visible";
　　document.getElementById("section4").style.visibility="hidden";'>Section 3</a></li>
　　<li><a href="#"
　　onClick='
　　document.getElementById("section1").style.visibility="hidden";
　　document.getElementById("section2").style.visibility="hidden";
　　document.getElementById("section3").style.visibility="hidden";
　　document.getElementById("section4").style.visibility="visible";'>Section 4</a></li>
　　</ul><br>
　　<div id="section1">Section 1 text.</div>
　　<div id="section2">Section 2 text.</div>
　　<div id="section3">Section 3 text.</div>
　　<div id="section4">Section 4 text.</body>
　　</html>
　　
　　这段代码包括了一个用来隐藏所有DIV元素的JavaScript函数。当文档被加载的时候，这个函数就被调用了。点击每个超链接将会显示相关的区域并隐藏其他的区域。这种方式的一个弱点是，只有Internet Explorer 5或者更高版本的浏览器以及Netscape Navigator 6或者更高版本的浏览器才支持这些方法。但是，我使用Mozilla 1.01测试过，没有问题。
　　
　　只在必要的时候才显示信息
　　将DHTML和JavaScript的强大能力组合起来使用，就能够让你预加载页面的内容，并在适当的时候显示其各个部分。这样就可以提高响应时间，因此能够为用户提供更高的性能。