如何提高CSS网页渲染效率

迷南。 2022-05-15 15:10 188阅读 0赞

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。

\* 不赞成 - color:\#f3a;

\* 建议用 - color:\#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。

\* 不赞成 - visibility:hidden;

\* 建议用 - display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。

\* 不赞成 - border:0;

\* 建议用 - border:none;

4、不宜用过小的背景图片平铺

一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。

\* 不赞成 - 宽高8px以下的平铺背景图片

\* 建议用 - 衡量适中体积及尺寸的背景图片

5、慎用IE滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有让PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。

\* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。

\* 建议用，最好选择其它方法能避免使用滤镜。

6、\*\{ margin:0; padding:0;\}避免浏览器样式差异

\*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。

\* 不赞成，使用\*号通配符

\* 不赞成，div span button b table等标签纳入通配符控制内外填充样式

\* 建议用，有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。

\* 不赞成 - button\#backButton \{ \}

\* 不赞成 - .menu-left \#newMenuIcon \{ \}

\* 建议用 - \#backButton \{ \}

\* 建议用 - \#newMenuIcon \{ \}

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。

\* 不赞成 - treeitem\[mailfolder="true"\] > treerow > treecell \{ \}

\* 建议用 - .treecell-mailfolder \{ \}

9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。

\* 不赞成 - treehead treerow treecell \{ \}

\* 好一点，但还是不行(参照下一条) - treehead > treerow > treecell \{ \}

10、标签类中不要包含子选择符

不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)

\* 不赞成 - treehead > treerow > treecell \{ \}

\* 建议用 - .treecell-header \{ \}

11、留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。

\* 不赞成 - treeitem\[IsImapServer="true"\] > treerow > .tree-folderpane-icon \{ \}

请记住 RDF 的属性是可以在模板中被复制的!利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

\* 建议用 - .tree-folderpane-icon\[IsImapServer="true"\] \{ \}

### 更多精彩技术分享请浏览本人博客：[https://blog.csdn.net/wohiusdashi][https_blog.csdn.net_wohiusdashi] ###

[https_blog.csdn.net_wohiusdashi]: https://blog.csdn.net/wohiusdashi

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 mysql如何提高查询效率_MySQL调优系列——如何提高MySQL的查询效率

![34ae03139797166322728aaf3ad4217a.png][] 1、对查询进行优化，避免全表扫描，首先应考虑在where及order by涉及的列上建立索

川长思鸟来/ 2023年01月12日 04:20/ 0 赞/ 114 阅读

相关 web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率

前端开发学习每个人都想走捷径，即想高效快速学习又想掌握当今最新的前端技术知识。其实，这样的想法是对的，找对学习方法就能达到这个效果。前端开发学习每个阶段都是非常重要的，一部分为

系统管理员/ 2022年12月20日 08:38/ 0 赞/ 91 阅读

相关如何使用内联的 CSS 变量，提高灵巧布局效率？

转自：[http://www.pinlue.com/article/2020/09/1706/0011240436121.html][http_www.pinlue.com_a

一时失言乱红尘/ 2022年12月11日 06:26/ 0 赞/ 94 阅读

相关如何提高CSS性能

结合现代网站的复杂性和浏览器处理[CSS][]的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在

左手的ㄟ右手/ 2022年10月15日 10:59/ 0 赞/ 218 阅读

相关如何使用Arthas提高日常开发效率？

目录一引言二 5分钟解决一个问题 1 问题表象 2 如何发现问题第一步：定位相关方法第二步：生成方法观测命令第三步：登录应用服务器第四步：安装Ar

素颜马尾好姑娘i/ 2022年08月28日 10:56/ 0 赞/ 225 阅读

相关如何提高CSS网页渲染效率

1、十六进制的颜色值对位数与大小写编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值

迷南。/ 2022年05月15日 15:10/ 0 赞/ 189 阅读

相关如何提高网页加载速度

1、减少页面请求：从WEB运行原理上讲，IIS请求是无状态的，在服务器端一直是连接和关闭的不断进行着，如果能减少服务器请求，总的时间将会减少。之前我下载163邮箱的登陆

悠悠/ 2022年01月27日 08:21/ 0 赞/ 355 阅读

相关如何提高Assignment写作效率？

　　大家去英国留学常常会遇到大量的论文作业需要去写作的情况，留学生们想要适应好英国大学的学习生活，就一定要把英国assignment写作的效率提高上去。那么大家该如何去提高英国

た入场券/ 2022年01月11日 15:31/ 0 赞/ 220 阅读

相关提高CSS网页渲染效率的11点注意事项

1、十六进制的颜色值对位数与大小写编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标

青旅半醒/ 2021年11月23日 08:38/ 0 赞/ 185 阅读

相关 web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率

前端开发学习每个人都想走捷径，即想高效快速学习又想掌握当今最新的前端技术知识。其实，这样的想法是对的，找对学习方法就能达到这个效果。前端开发学习每个阶段都是非常重要的，一部分为

灰太狼/ 2021年09月02日 05:14/ 0 赞/ 375 阅读