记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

CSS 技巧:加速CSS渲染的5个建议

作者:Kaka    时间:2021-8-10 10:37:40    浏览:    评论:0

很多人在编写CSS代码时,可能并没有想到它的渲染速度问题,认为只要效果达到就可以了,代码怎样写都影响不大。之所有有这个想法,是因为我们在开发环境中,无论硬件还是网络速度,都是很好的,这样就看不到代码的优劣对速度的影响程度有多大。然而,一旦在某些环境中,例如手机信号突然减弱,从4G变成2G的网络,又或者手机/电脑硬件配置不好时,这个时候设计上的每一个细节的影响就会被放大,优劣代码的运行速度就能凸显出来。因此,一个优秀的程序编写人员,是不能忽视细节的,考虑尽可能周全一些,代码编写精益求精。

在这篇文章中,将从5个方面,介绍加速CSS渲染的技巧。

加速CSS渲染的5个建议
加速CSS渲染的5个建议

1、通过指定图像尺寸避免回流和重绘

为避免不必要的回流和重绘,始终为所有图像指定宽度和高度,它允许浏览器在图像下载之前渲染页面,否则浏览器将在图像下载后需要回流和重绘。你可以在 HTML img标签或 CSS 中指定所有图像的宽度和高度。如果你需要较小的图像,请在图像编辑器中缩放它并将其尺寸设置为匹配,避免使用宽度和高度规范来动态缩放图像。

.banner {
  width: 468px;
  height: 60px; 
}

2、通用选择器效率最低,ID 效率最高

以下是根据渲染速度的选择器:

#sidebar  {}             /* ID (Fastest) */
.home #slider {}         /* ID */
.footer {}               /* Class */
ul li a.arrow {}         /* Class */
ul {}                    /* Tag */
ul li a }                /* Tag */
* {}                     /* Universal (Slowest) */
#content [title='home']  /* Universal */

例如这个选择器不是很有效:

#sidebar > li

因为IDs是最有效的,你会认为浏览器可以通过 ID 快速找到它,然后找到 li,但它不会加快渲染速度,因为浏览器从右到左渲染选择器。

从右到左的原则

了解浏览器如何读取你的 CSS 选择器非常重要。他们从右到左读取 CSS,因此 ol > li a[title="link"] 首先解释的是选择器 a[title="link"]它也被称为“键选择器”)。

选择器的从右到左解释一旦匹配失败,它就会停止尝试,因此与继续解释所需的能量相比,它消耗的能量更少。

3、将链接元素从文档正文移动到文档标题

始终将外部 CSS 和 style 块放在该 head 部分。在 HTML 文档的正文中指定外部样式表和内联样式块可能需要浏览器更多的时间来呈现文档。

例如,当css代码量不多时,就不建议这样写。

index.html

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
</body>
</html>

style.css

.title{
  height:23px;
  padding:7px 10px 0;
  color:#fff;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: 0px 0px;
}

而是这样写:

<html>
<head>
<style type="text/css">
.title{
  height:23px;
  padding:7px 10px 0;
  color:#fff;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: 0px 0px;
}
</style>
</head>
<body>
</body>
</html>

4、后代选择器

CSS 中最昂贵的选择器是后代选择器。它非常昂贵,特别是如果它属于标签或通用类别。例如,像这样的选择器是一个非常糟糕的选择:

html body nav a span {} 

利用 CSS 级联

有时你可以在不使用额外选择器的情况下实现你想要的结果。例如考虑这个代码:

nav li a {font-size:14px}

由于 font-size 级联,你不需要特别声明你的 CSS ,并且它更有效率:

nav {font-size:14px}

过度限定的选择器

不要这样做:

form#UserLogin {}

ID选择器是唯一的;这只会降低它们的效率,因为它们不需要标签名称。类不是唯一的,但在类上避免这种方法也是一个好主意。

CSS3 选择器

CSS3 选择器(例如:first-child)在帮助我们设置元素样式的同时保持我们的代码简洁和语义方面非常出色。但实际上这些花哨的选择器需要更多的浏览器资源来使用。关于这些选择器的可悲事实是,如果你关心页面性能,则根本不应该使用它们。

5、速度与实用性

为了实现给定页面的最有效呈现,人们可能会简单地为页面上的每个元素提供唯一 ID 并使用单个 ID 选择器应用样式。它是非常非语义的并且非常难以维护。即使是基于核心性能的网站也不会为了高效的 CSS 牺牲可维护性或语义。

你也可以遵循它们,但你不应该对此抱有教条主义的态度。重新审视你的 CSS 并寻找可以做得更好的地方,特别是如果你的目标受众主要使用计算能力有限的移动设备,这可能是一个救星,否则不要担心。

x

标签: css3  

※ 网站速度慢?试试网站自动优化工具 ※

上一篇: HTTP 错误 500.19 - Internal Server Error 3种解决方法
下一篇: 百度抓取异常响应代码522怎么办

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.