前端性能优化实践：尽可能多的使用伪元素

本文链接： https://blog.csdn.net/qq_43624878/article/details/102585806

以前没怎么觉得，但最近频繁的用div去使用一些“无伤大雅”的分割线、包裹圈之类的东西。今天恰好翻开了曾经学习过的“伪元素”这一章。不觉惭愧，写此文章记录一下。

什么是伪元素

首先，伪元素是一个元素的子元素 ，并且 是inline行内元素 。
伪元素最常用的也就before和after两个。
我们加上之后，在浏览器中查看，发现对于一个标签的before成了这个标签的第一个子元素，而after成为了它的最后一个子元素。

但是，伪元素是“伪”的。 也就是说，你没有办法用JS去对它进行增、删、改、查。

那我们就高兴了，因为回想起学js的知识，这就说明：伪元素不属于HTML页面 ！
你可以用伪元素造成视觉上的效果，又不会增加JS查询DOM的负担（也就是说，即使你给页面加了很多伪元素，也不会影响DOM查询的效率），何乐而不为呢？
伪元素还常被用来“清除浮动” ，即我们常说的：父元素clear: both;（虽然这种方法优缺点，但是足够适合绝大多数适用场景）
如：

.clearfix:after {
	content: "";
	display:table;
	clear:both;
}

哦，对了。因为它不是一个实际的HTML标签，还可以加快浏览器加载HTML文件。（对SEO也是有帮助的）

伪元素的应用

在我所做的项目（前端）中，有一屏我把他设置为“聆听音乐”环节，标题中就运用了伪元素：
在这里插入图片描述

由于鼠标移入后会翻转，所以前后两条线的位置就 “至关重要” 了。
开始我想到：用前后两个div，只显示border-top或border-bottom来达到效果，但是总的来说，不尽如人意。还会增加CSSOM树的渲染。

所幸今天翻到了 伪元素 ，对！用伪元素设置后，还可以把中间的div和他们“绑定起来”，有一定的好处。说干就干：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D头</title>
    <style>
        body,figure {
            margin: 0;
            padding: 0;
        }
        .stage {
            width: 40%;
            height: 60px;
            perspective: 1000px;
            cursor: pointer;
            float: left;
            transform: translateX(70%);
        }
        .stage .flipBox {
            width: 47%;
            height: 60px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.65s;
            margin-left: 29%;
            text-align: center;
        }
        .flipBox .pic {
            width: 100%;
            height: 60px;
            font-weight: bolder;
            line-height: 60px;
            position: absolute;
            backface-visibility: hidden;
        }
        .pic.front {
            font-size: 1.5rem;
            color: #202020;
        }
        .pic.back {
            color: #FF0000;
            font-size: 0.95rem;
            transform: rotateX(180deg);
        }
        .stage:hover .flipBox {
            transform: rotateX(180deg);
        }
        .flipBox:after,.flipBox:before{
            content: "";
            position: absolute;
            top: 30px;
            height: 1px;
            background: #ccc;
            width: 333px;
        }
        .flipBox:after{
            right: 99%;
        }
        .flipBox:before{
            left: 99%;
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="flipBox">
            <figure class="pic front">Music时刻</figure>
            <figure class="pic back">此时此刻，非我莫属</figure>
        </div>
    </div>
</body>
</html>

其实，两个伪元素的位置是重点：开始我把left和right都分别设为0，就好玩了：他们两条线重叠在一起，盖住后面的字了。搞得我还以为是位置弄错了。。。（其实都差不多）

亦或者是，伪元素其实和文本相关？
做了下验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证伪元素</title>
    <style>
        .or{
            text-align: center;
        }
        .or:after,
        .or:before{
            content: "";
            /* 前面说伪元素是inline，加了absolute定位之后，会被强制转为块级元素 */
            position: absolute;
            top: 12px;
            height: 1px;
            background: red;
            width: 120px;
        }
        .or:after{
            right: 0;
        }
        .or:before{
            left: 0;
        }
    </style>
</head>
<body>
<p class="or">or</p>
</body>
</html>

在这里插入图片描述
猜想不成立。
完！