# 介绍

TIP

本篇来搜集和整理下网页的性能优化知识

前端性能优化

# CSS书写顺序

建议遵循以下顺序:

// 1. 布局定位属性:(建议 display 第一个写,毕竟关系到模式)
display / position / float / clear / visibility / overflow

// 2. 自身属性:
width / height / margin / padding / border / background

// 3. 文本属性:
color / font / text-decoration / text-align / vertical-align / white- space / break-word

// 4. 其他属性(CSS3):
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
/* 一个示例 */
.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

# 缩小样式计算范围

  • 降低选择器的复杂性和深度
  • 减少dom元素的数量和选择器的数量

缩小样式计算的范围并降低其复杂性

# 性能分析

# Chrome DevTools 工具

# Coverage 代码覆盖率

coverage使用

打开方式:More tools > Coverage