最佳化瀏覽器渲染:避免CSS expressions

來源:互聯網
上載者:User

概述

CSS運算式會降低瀏覽器的渲染效能;用其他方案替換它們將會改善IE瀏覽器的渲染效能。

注意:本節最佳實務只適用於Internet Explorer 5到7,它們支援CSS運算式。Internet Explorer 8放棄使用CSS運算式,而其他瀏覽器是不支援的。

詳細資料

作為一種動態改變文件屬性來響應各種事件的的手段,Internet Explorer 5引入了CSS運算式或 “動態屬性”。它們由在CSS聲明中的CSS屬性值裡嵌入JavaScript運算式構成。在大多數情況下,它們用於以下目的:

類比其他瀏覽器支援但IE瀏覽器尚未支援的標準CSS屬性。

使用比編寫全面JavaScript注入式樣式更小巧,更便捷的方法,來提供動態樣式和進階的事件處理。

不幸的是,CSS運算式對於效能的不良影響是相當大的,因為每當有事件觸發,瀏覽器都要重新計算每個運算式,如一個視窗改變大小,滑鼠移動等。CSS運算式的低效能表現是IE 8棄用它們的原因之一。如果你在網頁裡使用CSS運算式,應該盡一切努力來消除它們並且使用其他方法來達到同樣的功能。

建議

儘可能使用標準的CSS屬性。

IE 8已高度相容標準CSS;IE 8隻有在“相容”模式才支援運行CSS運算式,而在“標準”模式下則不支援。如果你不需要向後相容舊版本的IE,你應該轉換成標準的CSS屬性來替換所有對應的CSS運算式。如需CSS屬性和支援它們的IE版本的完整列表,請參見MSDN的CSS屬性索引。如果你確實需要支援所需CSS屬性停用舊版本IE瀏覽器,請使用JavaScript來實現等效的功能。

使用JavaScript指令碼樣式。

如果你正在使用CSS運算式來實現動態樣式,用純JavaScript重寫它們是很有意義的,因為這樣既能提高IE效能,同時在其他瀏覽器獲得相同效果的支援。在這個由MSDN動態屬性頁提供的例子裡,下面的CSS運算式用於在瀏覽器裡置中一個HTML塊元素,並且該元素的尺寸可以在運行時改變,每次調整視窗大小都能重新置放在瀏覽器中心:

<div id="oDiv" style="background-color: #CFCFCF; position: absolute;left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)">Example DIV</div>

下面是一個使用JavaScript和標準CSS的等價例子:

<style>  #oDiv { position: absolute; background-color: #CFCFCF;}</style><script type="text/javascript"> // Check for browser support of event handling capability  if (window.addEventListener) {  window.addEventListener("load", centerDiv, false); window.addEventListener("resize", centerDiv, false);  } else if (window.attachEvent) {  window.attachEvent("onload", centerDiv);  window.attachEvent("onresize", centerDiv);  } else {  window.onload = centerDiv;  window.resize = centerDiv;  }  function centerDiv() {  var myDiv = document.getElementById("oDiv");  var myBody = document.body;  var bodyWidth = myBody.offsetWidth;  //Needed for Firefox, which doesn't support offsetHeight  var bodyHeight; if (myBody.scrollHeight) bodyHeight = myBody.scrollHeight; else bodyHeight = myBody.offsetHeight;  var divWidth = myDiv.offsetWidth;  if (myDiv.scrollHeight)   var divHeight = myDiv.scrollHeight;   else var divHeight = myDiv.offsetHeight; myDiv.style.top = (bodyHeight - divHeight) / 2;  myDiv.style.left = (bodyWidth - divWidth) / 2;  }</script>

如果您使用CSS運算式來類比早期IE版本中停用CSS屬性,你應該提供版本測試的javascript代碼,為支援CSS的瀏覽器禁止CSS運算式。舉例來說,max-width屬性,這個屬性在一定數量的像素範圍內強制文本換行,在IE 7前是不支援的。下面的CSS運算式作為一種解決方案,為IE 5和6提供了這個功能:

p { width: expression( document.body.clientWidth > 600 ? "600px" : "auto" ); }

為不支援此屬性的IE瀏覽器版本使用等價的JavaScript替換CSS運算式,可以使用類似於下面的內容:

<style>  p { max-width: 300px; }</style><script type="text/javascript">  if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) < 7))  window.attachEvent("onresize", setMaxWidth);  function setMaxWidth() {  var paragraphs = document.getElementsByTagName("p");  for ( var i = 0; i < paragraphs.length; i++ )  paragraphs[i].style.width = ( document.body.clientWidth > 300 ? "300px" : "auto" );</script>


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。