分享容易忽视的CSS小知识-创新互联

本篇内容主要讲解“分享容易忽视的CSS小知识”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分享容易忽视的CSS小知识”吧!

公司主营业务:网站建设、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出巴马免费做网站回馈大家。

后代选择器

你知道样式选择器中间的小空格吗?它实际上还有一个名字,它的名字是后代选择器。

分享容易忽视的CSS小知识

布局,绘制和渲染层合并

这些术语更多地和浏览器渲染有关,但它仍然很重要,因为一些 CSS 属性会影响渲染进程的不同步骤。

有句话叫做“方法不对,努力白费”所有的前端大神都有自己的学习方法,而学web前端的学习也基本一致,而对于一个什么都不懂的初学者,根本不会知道该怎么学,这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期,找不到方向。可以加入我们的前端学习交流qun: 784783012 。有任何不明白的东西随时来问我。点击: 前端学习圈

1. 布局

布局步骤负责计算元素在屏幕上占用的空间大小。修改 CSS 中的“布局”属性(例如:宽度、高度)意味着浏览器需要检查其他所有的元素并“重排”页面,也就是说重新绘制受影响的区域并将他们合并在一起。

2. 绘制

此过程是为元素的可视化部分(颜色、边框等)填充像素的过程。绘制元素通常在多个图层上完成。

改变“绘制”属性不会影响页面的布局,所以浏览器会跳过布局步骤但仍然会执行绘制。

绘制经常是整个渲染进程中代价最昂贵的部分。

3. 渲染成合并

在渲染层合并这个步骤中,浏览器需要按照正确的顺序绘制图层。因为有一些元素会发生重叠,所以这个步骤对于确保元素按照预期顺序显示非常重要。

如果你改变了一个既不需要布局也不需要绘制的 CSS 属性,那么浏览器只需要做渲染层合并操作。

CSS 性能


后代选择器或许会非常耗能

取决于程序的大小,仅仅使用没有什么特殊性的后代选择器代价会非常昂贵。浏览器会检查每个后代元素是否匹配,因为后代这种关系不仅限于父子之间。

例如:

分享容易忽视的CSS小知识

浏览器会评估页面上的所有链接,最终定位到那个实际位于 #nav 元素内的链接。

一种更高效的方法是在 #nav 元素中的每个 <a> 元素上添加一个特定的 .navigation-link 选择器。

浏览器从右到左读取选择器

我觉得我应该知道这个,因为这个听起来很重要,但我并不知道……

解析 CSS 时,浏览器会从右到左解析 CSS 选择器。

让我们看看下面的例子:

分享容易忽视的CSS小知识

采取的步骤如下:

  • 匹配页面上的每个 <a> 元素。

  • 找到被 <li> 元素包裹的 <a> 元素。

  • 使用之前的匹配结果并将范围缩小到那些被 <ul> 元素包裹的结果。

  • 最终,在上面的选项中筛选出那些被类名为 .container 的元素包裹的结果。

从上面的步骤我们可以看出,靠右的选择器越具体,浏览器过滤和解析 CSS 属性的效率就越高。

为了提高上面例子的性能,我们可以在 <a> 标签上面添加类似 .container-link-style 的类名来替换 .container ul li a

尽可能避免修改布局

更改某些 CSS 属性可能会需要更新整个页面的布局。

例如,widthheighttopleft(也称为“几何属性”)等属性就需要重新计算布局和更新渲染树。

如果在大量的元素上更改这些属性,那么计算和更新他们的位置/大小需要花费很长的时间。

小心绘制的复杂性

在绘制方面,一些 CSS 属性(例如:blur)会比其他属性花费更高的代价。可以考虑使用其他更有效的方法来实现相同的效果。

代价高昂的 CSS 属性

一些 CSS 属性会比其他属性花费更高的代价,这意味着他们需要更长的时间来绘制。

其中一些属性如下:

  • border-radius

  • box-shadow

  • filter

  • :nth-child

  • position: fixed

这并不意味着你根本不应该使用他们,但你应该明白,如果一个元素使用其中某些属性并将渲染数百次,会影响到渲染性能。

顺序


顺序在 CSS 文件中很重要

让我们看下面的 CSS 代码:

分享容易忽视的CSS小知识

然后再来看看这段 HTML 代码:

分享容易忽视的CSS小知识

我们会发现影响渲染效果的不是选择器在 HTML 代码中出现的顺序,而是选择器在 CSS 文件中出现的顺序。

评估 CSS 性能的一个好方法是使用浏览器的开发者工具。


如果你使用的是 Chrome 或者 Firefox,可以打开开发者工具,转到 Performance 标签,并记录当你加载页面或与页面互动时发生的情况。

分享容易忽视的CSS小知识

到此,相信大家对“分享容易忽视的CSS小知识”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

名称栏目:分享容易忽视的CSS小知识-创新互联
分享网址:https://www.cdcxhl.com/article26/diidjg.html

成都网站建设公司_创新互联,为您提供自适应网站响应式网站用户体验网站收录微信小程序网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设