【測試的藝術】頁面效能標準參考資料
阿新 • • 發佈：2021-12-01
<!-- * @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="width: 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>