CSS提高渲染性能具体的实现方法

写css的习惯,决定页面渲染速度的快慢,这一点在脑残的ie里更加明显。养成良好的习惯,乃至形成规范,会让你的页面更快速的加载,用户体验度更高,下面是零度逍遥总结的一些提高css渲染速度的写法,供大家参考。

1、不要使用*{}

经常有前端开发人员使用*{margin:0; padding:0}来进行css重置,这种方法虽然写起来简单,但是渲染起来浏览器引擎要遍历所有的标签,很影响效率,强烈建议不要这样使用!

建议的的解决办法:把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0; padding:0},可以参考一下大网站的css重置代码。

2、页面上少用绝对定位

绝对定位(position:absolute )是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但因为浏览器的渲染机制,网页中如果使用过多的绝对定位,会让你的网页变得非常的慢。

建议的解决办法:尽可能少用,能用变通实现同样的效果,就用变通的办法。

3、让属性尽可能多的去继承

尽可能让一些属性子可以继承父级元素,而不是覆盖父级元素。

4、css的层次不能太多

#zishu .info .tool .sidebar h2{ font-size:12px;},这是非常不推荐的,推荐写法:.zishu-s-h2{font-size:12px;}。

5、不要放空的class

别放空的的class或没有的class在html代码中,这样无意义。

6、合理的布局

合理的布局,可以改变css的写法以及渲染过程,可以多多参考大网站的布局方式。

来源:51CTO

时间: 2024-12-03 13:36:46

CSS提高渲染性能具体的实现方法的相关文章

CSS提高渲染性能实现方法

  写CSS的习惯,决定页面渲染速度的快慢,这一点在脑残的IE里更加明显.养成良好的习惯,乃至形成规范,会让你的页面更快速的加载,用户体验度更高,下面是零度逍遥总结的一些提高CSS渲染速度的写法,供大家参考. 1.不要使用*{} 经常有前端开发人员使用*{margin:0; padding:0}来进行CSS重置,这种方法虽然写起来简单,但是渲染起来浏览器引擎要遍历所有的标签,很影响效率,强烈建议不要这样使用! 建议的的解决办法:把你常用到的这些标签进行处理;例如:body,li,p,h1{mar

提高 SQL 性能的五种方法

sql|性能 有时, 为了让应用程序运行得更快,所做的全部工作就是在这里或那里做一些很小调整.啊,但关键在于确定如何进行调整!迟早您会遇到这种情况:应用程序中的 SQL 查询不能按照您想要的方式进行响应.它要么不返回数据,要么耗费的时间长得出奇.如果它降低了报告或您的企业应用程序的速度,用户必须等待的时间过长,他们就会很不满意.就像您的父母不想听您解释为什么在深更半夜才回来一样,用户也不会听你解释为什么查询耗费这么长时间.("对不起,妈妈,我使用了太多的 LEFT JOIN.")用户希

用CSS开启硬件加速来提高网站性能

国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css   你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多

CSS3 will-change提高页面滚动、动画等渲染性能

一.先来看一个例子 下面这个例子来自某外文,我这里简单转述下. 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候,发现,页面的绘制性能掉到了每秒30帧,这种帧频人眼已经可以感觉到一定的顿挫感了. 后来,参考一些其他同事还是同行的建议,做了一番优化,然后,页面的渲染性能-- 这优化之前完全就是便秘,屎拉不出来的感觉:而优化之后,完全就是一泻千里,裤子都来不及脱的感觉. 一兄得便秘,在厕

JavaScript和CSS的优化提高网站性能

      在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS: 把样式表置于顶部 避免使用CSS表达式(Expression) 使用外部JavaScript和CSS 削减JavaScript和CSS 用<link>代替@import 避免使用滤镜 JavaScript 把脚本置于页面底部 使用外部JavaScript和CSS 削减JavaScript和C

如何提高CSS网页渲染效率

  如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多,而这些细节之处也是影响CSS的网页渲染效率的重要因素,黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法,一起来学习一下. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率. * 不赞成 - color:#f3a; * 建议用 - co

如何利用工具提高 React 页面渲染性能之 Perf

前言 用 React 一段时间了,也做了不少列表页.在用 React 做无限下拉加载的列表页时发现个问题:页面前几页渲染速度还挺快的,但是越往下拉加载内容页面的渲染就越慢.这是怎么回事呢?让我们先来看下 React 的组件渲染流程吧. React 的组件渲染流程 React 的组件渲染分为初始化渲染和更新渲染.在初始化时,React 会调用根组件下所有组件的 render 方法进行渲染. 在每个生命周期更新时,React 会先调用 shouldComponentUpdate(nextProps,

[收藏]五种提高 SQL 性能的方法

性能 五种提高 SQL 性能的方法发布日期: 4/1/2004 | 更新日期: 4/1/2004Johnny Papa Data Points Archive 有时, 为了让应用程序运行得更快,所做的全部工作就是在这里或那里做一些很小调整.啊,但关键在于确定如何进行调整!迟早您会遇到这种情况:应用程序中的 SQL 查询不能按照您想要的方式进行响应.它要么不返回数据,要么耗费的时间长得出奇.如果它降低了报告或您的企业应用程序的速度,用户必须等待的时间过长,他们就会很不满意.就像您的父母不想听您解释

五种提高SQL性能的方法

性能 五种提高 SQL 性能的方法Johnny Papa 有时, 为了让应用程序运行得更快,所做的全部工作就是在这里或那里做一些很小调整.啊,但关键在于确定如何进行调整!迟早您会遇到这种情况:应用程序中的 SQL 查询不能按照您想要的方式进行响应.它要么不返回数据,要么耗费的时间长得出奇.如果它降低了报告或您的企业应用程序的速度,用户必须等待的时间过长,他们就会很不满意.就像您的父母不想听您解释为什么在深更半夜才回来一样,用户也不会听你解释为什么查询耗费这么长时间.("对不起,妈妈,我使用了太多