网页制作

优化浏览器渲染 避免CSS expressions
网页制作 2024/11/15 佚名
3 2

概述

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>
标签：
CSS,expressions
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“优化浏览器渲染 避免CSS expressions”

暂无“优化浏览器渲染 避免CSS expressions”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com