影响CSS渲染速度的因素有哪些

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cddcj/article/details/53081864

1.滤镜
滤镜是一个非常耗资源的东西,特别是一些羽化、阴影、前透明的效果,而且一些IE的滤镜在Firefox不支持。如512大地震,网页全部变成了灰色,body{filter:gray;} body{filter:gray;} 网页非常的慢,CPU也飙升,如果电脑配置差的话,死机都可能。

例如透明效果:

#login_bd{ width;200px; height:200px; background:#000; opacity:0.2; -moz-opacity:0.2; filter:alpha(opacity=20); }

建议解决办法:

  • 能不用就不要用,而且要兼容不同浏览器;
  • 如果非要用可以用图片做背景;

2.一个页面上绝对定位太多
绝对定位(position: absolute)是网页布局常用到的,但网页中如果使用过多的绝对定位会影响性能,让网页变得非常的慢,Firefox上比IE还要差。

建议解决办法:

  • 尽可能少用;
  • 有变通的方法就用变通的;

3.background背景图片平铺
网页背景或某块需要背景平铺,如果单次还好多次就废了。

建议解决办法:

  • 色彩少的要做成 .gif图片;
  • 图片尽量大一些再平铺,第一个图片非常少,第二个图大较大一些;但速度是非常不一样的;

4.css的路径不要太深
例 .mian .regcon .regbody .regTop .searchtxt .input ……..{ }

5.能简写就简写
例 .zishu{ padding-top:10px; padding-left:20px; padding-right:5px; }
-> { padding: 10px 5px 0 20px; }

6.float应用
此属性应用不当,百分百有性能问题,而且影响很大。

展开阅读全文

没有更多推荐了,返回首页