您的位置：首页 > 科技 > 能源 > 生鲜超市营销策划方案_义乌网络_怎么做线上推广_做网站用什么编程软件

生鲜超市营销策划方案_义乌网络_怎么做线上推广_做网站用什么编程软件

2024/11/15 6:54:39 来源：https://blog.csdn.net/qq_34618600/article/details/142753942  浏览:  次   关键词：生鲜超市营销策划方案_义乌网络_怎么做线上推广_做网站用什么编程软件
生鲜超市营销策划方案_义乌网络_怎么做线上推广_做网站用什么编程软件

CSS面试真题 part2

  • 11、css3新增了哪些新特性？
  • 12、css3动画有哪些？
  • 13、介绍一下grid网格布局
  • 14、说说flexbox（弹性盒布局模型），以及使用场景？
  • 15、说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？
  • 16、说说em/px/rem/vh/vw区别？
  • 17、让Chrome支持小于12px的文字方式有哪些？区别？
  • 18、怎么理解回流和重绘？什么场景下会触发？
  • 19、说说对css预编语言的理解，有哪些区别？
  • 20、如果要做优化，css提高性能的方法有哪些？

11、css3新增了哪些新特性？

自己回答：flex、gird、transfrom、animation

标准回答：

css3新增的选择器有如下：

- 层次选择器（p~ul）选择前面有p元素的每个ul元素- 伪类选择器:first-of-type 表示一组同级元素中其类型的第一个元素:last-of-type 表示一组同级元素中其类型的最后一个元素:only-of-type 表示没有同类型兄弟元素的元素:only-child 表示没有任何兄弟的元素:nth-child(n)根据元素在一组同级中的位置匹配元素:nth-last-of-type(n)匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从未尾开始计数:last-child 表示一组兄弟元素中的最后一个元素:root 设置HTML文档:empty 指定空的元素:enabled 选择可用元素:disabled 选择被禁用元素:checked 选择选中的元素:not(selector)选择与<selector> 不匹配的所有元素- 属性选择器[attribute*=value]:选择attribute属性值包含value的所有元素[attribute^=value]:选择attribute属性开头为value的所有元素[attribute$=value]:选择attribute属性结尾为value的所有元素

css3新增的样式

  • 边框
  • border-radius
  • box-shadow
  • border-image
  • 背景
    • background-clip:背景画区，从border/padding/content区域开始
    • background-origin:以border/padding/content的左上角
    • background-size:背景图片大小，展示形式
    • background-break:
      • background-break: continuous; 默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子依然是一个整体一样)
      • background-break: bounding-box; 把盒之间的距离计算在内;
      • background-break:each-box;为每个盒子单独重绘背景
  • 文字
    • word-wrap
    • text-overflow
    • text-shadow
    • text-decoration
  • 颜色
    • rgba
    • hala

新增动画

  • transtion 过渡
  • transform 转换
  • animation 动画

新增颜色渐变

  • linear-gradient:线性渐变
  • radial-gradient:径向渐变

其他

  • flex
  • grid
  • 多列布局
  • 媒体查询
  • 混合模式

12、css3动画有哪些？

常见的动画效果很多，如平移、旋转、缩放等，复杂动画则是多个简单动画的组合

  • transtion 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动画

transtion

属性如下
property:填写需要变化的css属性
duration:完成过渡效果需要的时间单位(s或者ms)
timing-function:完成效果的速度曲线
delay:动画效果的延迟触发时间

transform

  • translate：位移
  • scale：缩放
  • rotate：旋转
  • skew：倾斜

animation
animation-duration：指定动画完成一个周期需要的时间
animation-timing-function：指定动画计时函数，动画的速度曲线
animation-delay：动画延迟时间
animation-iteration-count：动画播放次数
animation-direction：指定动画播放的方向
animation-fill-mode：动画填充模式
animation-play-state：动画播放状态，正在运行或暂停
animation-name：指定@keyframes动画的名称
通过 @keyframes 定义关键帧
因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{from{transform: rotate(0deg);}to{transform: rotate(360deg);}

13、介绍一下grid网格布局

自己回答：grid打破原来行布局，变成行列布局，一个块由于行列坐标，以及行列宽高决定
标准回答：

Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局

gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item），即container -> item

注意：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素

grid相关属性

Grid 布局属性可以分为两大类：

  • 容器属性
  • 项目属性

容器属性如下：

1、display 属性

文章开头讲到，在元素上设置display：grid 或 display：inline-grid 来创建一个网格容器

  • display：grid 则该容器是一个块级元素
  • display: inline-grid 则容器元素为行内元素

2、grid-template-columns 属性，grid-template-rows 属性
grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

.wrapper {display: grid;/*  声明了三列，宽度分别为 200px 200px 200px */grid-template-columns: 200px 200px 200px;grid-gap: 5px;/*  声明了两行，行高分别为 50px 50px  */grid-template-rows: 50px 50px;
}

3、grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式

grid-row-gap: 10px 表示行间距是 10px
grid-column-gap: 20px 表示列间距是 20px
grid-gap: 10px 20px 等同上述两个属性

4、grid-template-areas 属性
用于定义区域，一个区域由一个或者多个单元格组成

.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';
}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下

grid-template-areas: 'a a a''b b b''c c c';

上面代码将9个单元格分成a、b、c三个区域

如果某些区域不需要利用，则使用"点"（.）表示

5、grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
顺序就是由grid-auto-flow决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行

6、justify-items 属性， align-items 属性， place-items 属性

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下），place-items属性是align-items属性和justify-items属性的合并简写形式

.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
}

7、justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下），place-content属性是合并简写形式

.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

8、grid-auto-columns 属性和 grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格

比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。超出的部分就是隐式网格

而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高

项目属性如下：

1、grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

举例

<style>#container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}.item-1 {grid-column-start: 2;grid-column-end: 4;}
</style><div id="container"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div>
</div>

通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线
在这里插入图片描述
2、grid-area 属性

grid-area 属性指定项目放在哪一个区域

.item-1 {grid-area: e;
}

意思为将1号项目位于e区域

与上述讲到的grid-template-areas搭配使用

3、justify-self 属性、align-self 属性以及 place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）

14、说说flexbox（弹性盒布局模型），以及使用场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item
在这里插入图片描述
容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向

每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为

  • 容器属性
  • 容器成员属性

容器属性有：

  • flex-direction：决定主轴的方向(即项目的排列方向)
  • flex-wrap：决定容器内项目是否可换行
  • flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • justify-content：定义了项目在主轴上的对齐方式
  • align-items：定义项目在交叉轴上如何对齐
  • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

容器成员属性如下：

  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
  • flex-grow：容器宽度有空余时，根据flex-grow来决定定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  • flex-shrink：定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小
  • flex-basis：设置的是元素在主轴上的初始尺寸，默认为auto
  • flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

应用场景：能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成

15、说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？

  • 设备像素：设备像素是物理屏幕上的最小可见单元，用于实际渲染图像或文本。它表示硬件像素点的数量，通常用于描述屏幕的分辨率。设备像素的数量确定了屏幕的细节和清晰度。
  • CSS 像素：CSS 像素是在 Web 开发中使用的抽象单位，用于定义网页上的布局和样式。它是一个相对单位，不直接对应物理屏幕上的像素。CSS
    像素可以通过缩放和变换来适应不同的设备和分辨率。
  • 设备独立像素 (DIP)：设备独立像素是一种逻辑像素单位，用于将 CSS 像素与实际渲染的设备像素进行关联。DIP 可以看作是在 CSS 像素与设备像素之间建立了一个转换层。在标准的 96 DPI（dots per inch）的情况下，1 DIP 等于 1 CSS
    像素。
  • 设备像素比 (DPR)：设备像素比是设备的物理像素与 CSS 像素之间的比例关系。它表示在一个 CSS 像素中有多少个设备像素。例如，如果设备像素比为 2，那么 1 CSS 像素将对应 2 个设备像素。DPR 可以用来判断屏幕的高清程度，即
    Retina 屏幕。
  • 每英寸像素密度 (PPI)：每英寸像素密度表示屏幕上每英寸区域内的像素数量。它是一个描述屏幕分辨率的物理指标。更高的 PPI 值通常意味着更高的像素密度和更细腻的图像显示。

总结：

  • 设备像素是物理屏幕上的最小可见单元。
  • CSS 像素是 Web 开发中使用的抽象单位，用于布局和样式。
  • 设备独立像素是逻辑像素单位，建立了 CSS 像素与设备像素之间的转换关系。
  • 设备像素比是设备的物理像素与 CSS 像素之间的比例关系。
  • 每英寸像素密度表示屏幕上每英寸区域内的像素数量，反映了屏幕的分辨率和显示质量。

16、说说em/px/rem/vh/vw区别？

自己回答：
em：相对父级字体像素的倍数大小
px：绝对像素，css里的固定像素单位
rem：相对根元素字体像素的倍数大小
vh：页面高度的百分比单位
vw：页面宽度的百分比单位

标准回答：
em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size，按自身来计算，整个页面内1em不是一个固定的值
px：绝对单位，页面按精确像素展示
rem：相对单位，可理解为 root em，相对根节点 html 的字体大小来计算
vh：根据可视窗口的高度，分成100份，100vh表示满高，50vh表示一半高
vw：根据可视窗口的宽度，分成100份，100vh表示满宽，50vh表示一半宽

17、让Chrome支持小于12px的文字方式有哪些？区别？

自己回答：

  • 设置12px后，缩放整体

标准回答：
背景：chrome中文版会默认设定页面的最小字号是12px

解决方案一：

更改谷歌浏览器的基础设定12px值，用来解决开发人员的调试问题

解决方案二：

使用属性设置，使用较为广泛

优点：单行、多行文本都可使用
缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好

缩放属性：

  • zoom
  • -webkit-transform:scale()

其他属性-webkit-text-size-adjust:none //该属性用来设定文字大小是否根据设备（浏览器）来自动调整显示大小

-webkit-text-size-adjust:none 属性值：

  • percentage：字体显示的大小；
  • auto：默认，字体大小会根据设备/浏览器来自动调整
  • none：字体大小不会自动调整

这个属性设置后会有一个问题，当放大网页时，一般情况下字体也会随着变大，设置了以上代码后，字体只会显示当前设置的字体大小，不会随着网页放大而放大。所以不建议全局应用该属性，而是单独对某一属性使用，而且chrome 27后取消了这个属性的支持

解决方案三：

使用SVG 矢量图设置text
优点： 1px-12px任意字号均可设置，可对设计界面进行对齐调整
缺点：不支持多行文本

18、怎么理解回流和重绘？什么场景下会触发？

自己回答：

  • 回流
  • 重绘：由于样式变化，引起的页面局部变化，不会有位置的改变

标准回答：

回流（重排）：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示：
在这里插入图片描述

  • 解析HTML，生成DOM树，解析CSS，生成CSSOM树

  • 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

  • Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

  • Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

  • Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变

当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

什么场景下会触发？

回流触发时机：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候（这避免不了）
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

还有一些容易被忽略的操作：获取一些特定属性的值

offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

除此还包括getComputedStyle方法，原理是一样的

重绘触发时机：

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

  • 颜色的修改
  • 文本方向的修改
  • 阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

19、说说对css预编语言的理解，有哪些区别？

一、是什么

Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题

需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

Css预处理器便是针对上述问题的解决方案

预处理语言

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

二、有哪些

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

  • sass
  • less
  • stylus

三、区别

虽然各种预处理器功能强大，但使用最多的，还是以下特性：

  • 变量（variables）
  • 作用域（scope）
  • 代码混合（ mixins）
  • 嵌套（nested rules）
  • 代码模块化（Modules）

因此，下面就展开这些方面的区别

基本使用
less和scss

.box {display: block;
}

sass

.boxdisplay: block

stylus

.boxdisplay: block

嵌套

三者的嵌套语法都是一致的，连引用父级选择器的标记 & 也相同

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写
less

.a {&.b {color: red;}
}

变量

变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法避免的重复

less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

@red: #c00;strong {color: @red;
}

sass声明的变量跟less十分的相似，只是变量名前面使用$开头

$red: #c00;strong {color: $red;
}

stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=

在stylus中我们不建议使用@符号开头声明变量

red = #c00strongcolor: red

作用域

Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js 一样，它会先从局部作用域查找变量，依次向上级作用域查找

sass中不存在全局变量

$color: black;
.scoped {$bg: blue;$color: white;color: $color;background-color:$bg;
}
.unscoped {color:$color;
}

编译后

.scoped {color:white;/*是白色*/background-color:blue;
}
.unscoped {color:white;/*白色（无全局变量概念）*/
}

所以，在sass中最好不要定义相同的变量名

less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

@color: black;
.scoped {@bg: blue;@color: white;color: @color;background-color:@bg;
}
.unscoped {color:@color;
}

编译后：

.scoped {color:white;/*白色（调用了局部变量）*/background-color:blue;
}
.unscoped {color:black;/*黑色（调用了全局变量）*/
}

混入

混入（mixin）应该说是预处理器最精髓的功能之一了，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用

可以在Mixins中定义变量或者默认参数

在less中，混合的用法是指将定义好的ClassA中引入另一个已经定义的Class，也能使用够传递参数，参数变量为@声明

.alert {font-weight: 700;
}.highlight(@color: red) {font-size: 1.2em;color: @color;
}.heads-up {.alert;.highlight(red);
}

编译后

.alert {font-weight: 700;
}
.heads-up {font-weight: 700;font-size: 1.2em;color: red;
}

Sass声明mixins时需要使用@mixinn，后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式

@mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;
}.page-title {@include large-text;padding: 4px;margin-top: 10px;
}

stylus中的混合和前两款Css预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接

error(borderWidth= 2px) {border: borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;error(); /* 调用error mixins */
}
.login-error {left: 12px;position: absolute;top: 20px;error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
}

代码模块化

模块化就是将Css代码分成一个个模块

scss、less、stylus三者的使用方法都如下所示

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

20、如果要做优化，css提高性能的方法有哪些？

自己回答：

  • 字体库
  • 精灵图

标准回答：

  • 内联首屏关键CSS
  • 异步加载CSS
  • 资源压缩
  • 合理使用选择器
  • 减少使用昂贵的属性
  • 不要使用@import

内联首屏关键CSS

在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染

所以，CSS内联使用使渲染时间提前

注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式

异步加载CSS

在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容

前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：

  • 使用javascript将link标签插到head标签最后
  • 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" οnlοad="this.media='all'">
  • 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
 <link rel="alternate stylesheet" href="mystyles.css" οnlοad="this.rel='stylesheet'">

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

合理使用选择器

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

  • 先找到h3标签元素
  • 然后去除祖先不是.content的元素
  • 最后去除祖先不是#markdown的元素

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则：

  • 不要嵌套使用过多复杂选择器，最好不要三层以上
  • 使用id选择器就没必要再进行嵌套
  • 通配符和属性选择器效率最低，避免使用

减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊乱

比如一个css文件index.css包含了以下内容：@import url(“reset.css”)

那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

其他

  • 减少重排操作，以及减少不必要的重绘
  • 了解哪些属性可以继承而来，避免对这些属性重复编写
  • cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
  • 把小的icon图片转成base64编码
  • CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

总结：css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

【HarmonyOS】鸿蒙系统在租房项目中的项目实战（一） frp构建多级网络代理 jvm原理介绍 【MySQL】约束 R语言贝叶斯分析：INLA 、MCMC混合模型、生存分析肿瘤临床试验、间歇泉喷发时间数据应用|附数据代码 使用Tailwind CSS的几个小Tips

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989