通过伪类去除重绘如何查看区块是否被重绘？按Ctrl+Shift+i打开控制台在控制台中按Ctrl+Shift+p打开控制

如何查看区块是否被重绘？

按Ctrl+Shift+i打开控制台
在控制台中按Ctrl+Shift+p 打开控制台的搜索功能，输入Rendering 进行搜索，并选择第一个选项，

然后选择Paint flashing, 当页面某个区块重绘时，区块的边缘就会显示绿色高亮边框

下面分别通过伪类和box-shadow实现边框阴影效果，可以看出box-shadow是有重绘消耗的，而伪类是没有重绘消耗的

实现代码如下

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <style>
        .before {
            padding: 1em;
            background-color: #fff;
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }
        .before:hover {
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        }
        .after {
            position: relative;
            padding: 1em;
            background-color: #fff;
        }
        .after:before {
            content: "";
            position: absolute;  
            top: 0;
            right: 0;
            bottom: 0;  
            left: 0;
            z-index: -1;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
            opacity: 0;
            will-change: opacity;
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }
        .after:hover:before {
            opacity: 1;
        }

    </style>
    <body>
        <div class="before">
            <h1>有重绘消耗</h1>
            <p>Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多</p>
        </div>
         <hr />
        <div class="after">
            <h1>无重绘消耗</h1>
            <p>通过修改伪元素的透明度来实现同样的效果,没有重绘消耗</p>
        </div>
    </body>
</html>