1、*{} #zishu *{} 尽量避开
由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;
*{margin:0; padding:0}
建议的的解决办法:
1)不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样;所以你要尽可能的去使用那些常用的标签;
2)不要使用*;而是把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0; padding:0}
2、滤镜的一些东西不要去用
IE的一些滤镜在FIREFOX中不支持,往往写一些效果时你还是使用CSS HACK;而滤镜是一个非常毫资源的东西;特别是一些羽化、阴影和一个前透明的效果;
建议的解决办法:
1)能不使用就不要使用,一方面兼容问题;很多效果只能在IE中使用;
2)就本例而言,如果非要这样在的效果,建议用图片作背景;(只说优化速度,实际应用还是可以小部分用,有人可能会说,用图片还多一个HTTP请求呢,呵呵……)
一个非常好的例子,就是在在512大地震时,很多网站一夜之间全部变成了灰色,他们只用了一行CSS代码:
body{filter: gray;}
但,你会看会看到这些网页非常的慢,打开后你的CPU也会飙升,不夸张的说,如果你的电脑配置差,干死你也不为过。
3、一个页面上少用绝对定位
绝对定位(position:absolute )是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但网页中如果使用过多的绝对定位,会让你的网页变得非常的慢,这一点上边FIREFOX表现要比IE还要差。
建议的解决办法:
1)尽可能少用,这个少用的值是多少,也没有一个非常好的值来说明;还要看绝定定位这个标签里边的内容的多少;在这里我只能说,这样写会有性能问题,少用。
2)如果能用变通实现同样的效果,就用变通的办法。
4、background 背景图片的平铺
有些网页的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废了。
建议的作法:
1)色彩少的图片要作成gif图片;
2)平铺的图片尽可能大一些,如果是色彩少的GIF图片,图片大一些,实际大小也不会大多少;上边的两个例子就很好的证明,第一个图片非常少,第二个图大较大一些;但速度是非常不一样的;
5、让属性尽可能多的去继承
尽可能让一些属性子可以继承父,而不是覆盖父;
6、CSS的路径别太深;
#zishu #info #tool #sidebar h2{ font-size:12px;}
7、能简写的一些就简写;
这个对渲染速度没有影响;只是少几个字符;
8、别放空的的class或没有的class在HTML代码中;
9、float 的应用
这个东西我的感觉是如果使用不当,百分百有性能问题,而且还非常的大,但实在不知道怎么样能弄一个例子出来;这里只能建议大家如果不是很明白float是怎么工作的,还是少使用为妙。
曾经因为这个把IE干死过,我写过一个例子,虽说和这个没有什么太大的关系:IE之死__原来与CSS有关
10、合理的布局
为什么这么说呢,合理的布局,可以改变CSS的写法以及渲染过程。

转载于:https://www.cnblogs.com/goodbeypeterpan/p/3964619.html

10条影响CSS渲染速度的写法与建议相关推荐

  1. 仅使用CSS提高页面渲染速度

    用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...

  2. mysql每秒写入量_MySQL每秒可以插入多少条记录?影响MySQL插入速度的因素有哪些?...

    写入速度 MySQL每秒可以插入50w条记录吗? 带着疑问,我们一起看看mysql每秒可以插入多少条记录? 要回答这个问题,首先要考虑影响mysql插入速度的因素有哪些? 硬盘的速度,网卡的速度,写入 ...

  3. 光线追踪是怎么影响渲染速度的,什么显卡可以支持?

    在 3D 世界中,慢慢地人们倾向于让它尽可能逼真.他们可以应用许多技术和技巧,但有一种技术可以为您提供很多帮助,称为光线追踪.然而,众所周知,它是非常计算密集型的.在本文中,让我们进一步探讨它,并回答 ...

  4. 每个网页设计师应该知道的10条CSS规则

    通过网页设计师的大量CSS经验,我们会记住所有种代码语法,兼容性和片段.有一些特定的CSS,可以真正帮助改变你的网站设计改变较旧的技术规则和声明.这里是我收集到的很有用的10条CSS规则 @media ...

  5. JS 和 CSS 是如何影响页面渲染的?

    为什么script脚本要放在body标签的最后面? 这是面试的时候经常遇到的问题,但是很少听到有人能完整的回答出来.其实这个问题并不简单,它涉及到浏览器渲染方面的知识,搞懂了这一块对就能对性能优化有一 ...

  6. 只导表前10条数据_【205期】面试官:数据量很大的情况下,对于分页查询你有什么优化方案吗?...

    点击上方"Java面试题精选",关注公众号 面试刷图,查缺补漏 >>号外:公众号改版后文章顺序不固定,欢迎大家把我们面试题精选这个公众号设置为星标,感谢大家一年的支持! ...

  7. 提高Web页面渲染速度的7个技巧

    用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...

  8. html表格怎么用css渲染,css样式如何渲染?

    浏览器渲染原理 1. 浏览器在接收到服务器返回的html页面后, 2. 浏览器开始构建DOM树DOM TREE,遇到CSS样式会构建CSS规则树CSS RULE TREE, 3. 遇到javascri ...

  9. 提高 Web 应用性能的10条建议

    转载:http://www.devstore.cn/essay/essayInfo/6193.html?ref=myread 提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长: ...

最新文章

  1. 理想内插_理想ONE性能测试:6.35秒就能破百,售价只要宝马X5一半
  2. java基础—Hashtable,HashMap,TreeMap的差别
  3. JavaScript字符串、数组、对象方法总结
  4. Java 反射调用方法实例,动态动用方法实例
  5. 解决python中出现IndentationError:unindent does not match any outer indentation level错误
  6. php 零宽断言,正则表达式之零宽断言
  7. 内存颗粒和闪存颗粒的区别_颠覆你的常识,这内存上面混搭了四个厂家的颗粒...
  8. DataGridView获得所有选中行的某列的值
  9. Android小项目:计算器
  10. 取消开机就弹出 msn中文网 操作步骤
  11. java邮件服务器搭建_邮件服务器+javamail(仅包括发送)搭建
  12. keytool条目_keytool常用命令
  13. Python 汇率换算
  14. 改善睡眠的好物分享,提高睡眠质量
  15. matlab与vs混合编程,matlab与vs混合编程/matlab移植
  16. PAT甲级 1042 Shuffling Machine 模拟洗牌 map的使用
  17. Windows redis最新版本5.0.9下载
  18. 随机森林算法学习(RandomForest)
  19. 为啥需要RPC,而不是简单的HTTP?
  20. C++版 - 剑指offer 面试题39:判断平衡二叉树(LeetCode 110. Balanced Binary Tree) 题解

热门文章

  1. python基本使用-python-类的基本使用
  2. python语言编程环境-python语言开发搭建电脑环境的方法
  3. python游戏编程入门书籍推荐-Python游戏编程入门3
  4. python笔记基础-Python基础知识
  5. python打不开-python程序无法打开是怎么回事
  6. 大学生学python到底有没有有-大学生该不该学Python?太纠结了?
  7. 学python要基础吗-自学Python要有其他语言基础吗?
  8. 我在学python-你们以为我在学C加加?其实我在学Python!人生苦短!
  9. python语言必背代码-Python新手必须知道的25条知识点
  10. python基础常用语句-Python语言的一些基本常用语句