【测试的艺术】页面性能标准参考数据

<!--
 * @Version: 1.0
 * @Autor: 
 * @Date: 2021-11-23 17:03:39
 * @LastEditors: 
 * @LastEditTime: 2021-12-01 11:30:19
-->

<template>
  <div id="ta">
    <el-table
      :data="tableData"
      style=" 100%"
      :span-method="objectSpanMethod"
      border
      :cell-style="{ padding: 6 + 'px' }"
    >
      <el-table-column prop="type" label="类型" width="80" align="center">
      </el-table-column>
      <el-table-column prop="zhibiao" label="指标 " width="200" align="center" :render-header="renderBase">
      </el-table-column>
      <el-table-column prop="fanwei" label="范围 " align="center" width="140" :render-header="renderBase">
      </el-table-column>
      <el-table-column prop="dengji" label="等级" align="center" width="140">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.dengji == '优'"
            type="success"
            effect="dark"
            size="mini"
          >
            优
          </el-tag>
          <el-tag
            v-if="scope.row.dengji == '良'"
            type="warning"
            effect="dark"
            size="mini"
          >
            良
          </el-tag>
          <el-tag
            v-if="scope.row.dengji == '差'"
            type="danger"
            effect="dark"
            size="mini"
          >
            差
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="note"
        label="说明 "
        header-align="center"
        :render-header="renderBase"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          type: "性能",
          zhibiao: "FCP",
          fanwei: "0-1.8s",
          dengji: "优",
          note: "FCP（First Contentful Paint）度量用户导航到您的页面后浏览器呈现第一块DOM内容所花费的时间。页面上的图像、非白色的<canvas>元素和svg被认为是DOM内容;iframe里面的任何东西都不包括在内。",
        },
        {
          type: "性能",
          zhibiao: "FCP",
          fanwei: "1.8-3s",
          dengji: "良",
          note: "",
        },
        {
          type: "性能",
          zhibiao: "FCP",
          fanwei: ">3s",
          dengji: "差",
          note: "",
        },
        //
        {
          type: "性能",
          zhibiao: "SI",
          fanwei: "0-3.4s",
          dengji: "优",
          note: "SI（Speed Index）指界面可见内容的显示速度",
        },
        {
          type: "性能",
          zhibiao: "SI",
          fanwei: "3.4-5.8s",
          dengji: "良",
          note: "SI（Speed Index）指界面可见内容的显示速度",
        },
        {
          type: "性能",
          zhibiao: "SI",
          fanwei: ">5.8s",
          dengji: "差",
          note: "SI（Speed Index）指界面可见内容的显示速度",
        },
        //
        {
          type: "性能",
          zhibiao: "LCP",
          fanwei: "0-2.5s",
          dengji: "优",
          note: "LCP（Largest Contentful Paint）指页面渲染出最大文本或图片的时间",
        },
        {
          type: "性能",
          zhibiao: "LCP",
          fanwei: "2.5-4s",
          dengji: "良",
          note: "",
        },
        {
          type: "性能",
          zhibiao: "LCP",
          fanwei: ">4s",
          dengji: "差",
          note: "",
        },
        //
        {
          type: "性能",
          zhibiao: "TTI",
          fanwei: "0-3.8s",
          dengji: "优",
          note: "TTI（Time to Interactive）指网页需要多长时间才能提供完整交互功能",
        },
        {
          type: "性能",
          zhibiao: "TTI",
          fanwei: "3.8-7.3s",
          dengji: "良",
          note: "",
        },
        {
          type: "性能",
          zhibiao: "TTI",
          fanwei: ">7.3s",
          dengji: "差",
          note: "",
        },
        //
        {
          type: "性能",
          zhibiao: "TBT",
          fanwei: "0-200ms",
          dengji: "优",
          note: "TBT（Total Blocking Time）度量页面被阻止响应用户输入(如鼠标单击、屏幕点击或键盘按下)的总时间。这个总和是通过在FCP和可交互时间之间添加所有长任务的阻塞部分来计算的。任何执行时间超过50毫秒的任务都是长任务。50毫秒后的时间量就是阻塞部分。",
        },
        {
          type: "性能",
          zhibiao: "TBT",
          fanwei: "200-600ms",
          dengji: "良",
          note: "",
        },
        {
          type: "性能",
          zhibiao: "TBT",
          fanwei: ">600ms",
          dengji: "差",
          note: "",
        },
        //
        {
          type: "性能",
          zhibiao: "CLS",
          fanwei: "0-0.1分",
          dengji: "优",
          note: "CLS（Cumulative Layout Shift）整个页面生命周期内发生的所有意外布局偏移中一连串的布局偏移分数，CLS指整个页面生命周期内发生的所有单次布局偏移分数的总和。",
        },
        {
          type: "性能",
          zhibiao: "CLS",
          fanwei: "0.1-0.25分",
          dengji: "良",
          note: "",
        },
        {
          type: "性能",
          zhibiao: "CLS",
          fanwei: ">0.25分",
          dengji: "差",
          note: "",
        },
      ],
    };
  },
  methods: {
    /**
     * 叹号图标帮助信息基础方法
     * @param {*} h
     * @param {*} column
     * @param {*} index
     * @param {*} promptMessage 提示信息
     * @return {*}
     * @author:
     */
    renderBase(h, { column, $index }) {
      return [
        column.label,
        h(
          "el-tooltip",
          {
            props: {
              content: "",
              placement: "top",
            },
          },
          [h("span", { class: { "el-icon-warning-outline": true } })]
        ),
      ];
    },
    rowClass({ row, rowIndex }) {
      console.log(rowIndex); //表头行标号为0
      return "background:rgb(141,180,226)";
    },
    //设置指定行、列、具体单元格颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1 && columnIndex === 2) {
        //指定坐标rowIndex ：行，columnIndex ：列
        return "background:rgb(220,230,241)"; //rgb(197,217,241)
      } else {
        return "";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex < 3) {
        return "warning-row";
      } else if (3 <= rowIndex && rowIndex < 6) {
        return "success-row";
      }
      return "";
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 类型
      if (columnIndex === 0) {
        if (rowIndex % 18 === 0) {
          return {
            rowspan: 18,
            colspan: 1,
          };
        } else {
          return {
            rowspan: null,
            colspan: null,
          };
        }
      }
      // 指标
      if (columnIndex === 1) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      // 说明
      if (columnIndex === 4) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>