设置html标签层级,前端性能优化学习笔记1：HTML层级优化

1、减少HTML层级嵌套

2、减少空标签、无用标签的滥用

如：实现效果

.......

你好啊

.......

.mid {

width: 160px;

height: 120px;

transform: skew(-30deg);

/*设置倾斜度为-30*/

-webkit-transform: skew(-30deg);

-moz-transform: skew(-30deg);

-o-transform: skew(-30deg);

-ms-transform: skew(-30deg);

background-color: red;

margin: 20px auto;

}

.cen {

height: 120px;

line-height: 120px;

text-align: center;

}

优化写法

...

你好啊

...

.cen_ok {

width: 70px;

height: 50px;

font-size: 20px;

color: #FFFFFF;

background-color: rgb(61, 140, 232);

margin-left: 60px;

text-align: center;

line-height: 50px;

position: relative;

}

.cen_ok::after {

content: '';

position: absolute;

border-top: 50px solid rgb(61, 140, 232);

border-right: 25px solid transparent;

top: 0;

right: -25px;

clear: both;

}

.cen_ok::before {

content: '';

position: absolute;

border-bottom: 50px solid rgb(61, 140, 232);

border-left: 25px solid transparent;

left: -25px;

}

3、尽量少用标签style,采用CSS属性