瀏覽代碼

New metric Total JS execution time

Gaël Métais 4 年之前
父節點
當前提交
df4f5685be
共有 4 個文件被更改,包括 17 次插入6 次删除
  1. 1 1
      front/src/views/dashboard.html
  2. 2 2
      front/src/views/rule.html
  3. 10 0
      lib/metadata/policies.js
  4. 4 3
      lib/metadata/scoreProfileGeneric.json

+ 1 - 1
front/src/views/dashboard.html

@@ -43,7 +43,7 @@
                         <div class="label">{{rule.policy.label}}</div>
                         <div class="label">{{rule.policy.label}}</div>
                         <div class="result">
                         <div class="result">
                             <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
                             <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
-                            <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}}</span>
+                            <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}} <span ng-if="rule.policy.unit"> {{rule.policy.unit}}</span></span>
                             <span ng-if="rule.abnormal" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
                             <span ng-if="rule.abnormal" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
                             <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
                             <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
                             <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
                             <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>

+ 2 - 2
front/src/views/rule.html

@@ -12,12 +12,12 @@
             <h3>
             <h3>
                 Value:
                 Value:
                 <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
                 <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
-                <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}}</span>
+                <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}}<span ng-if="rule.policy.unit"> {{rule.policy.unit}}</span></span>
             </h3>
             </h3>
             <div class="okThreshold" ng-if="rule.score < 100 && rule.policy.isOkThreshold !== undefined">
             <div class="okThreshold" ng-if="rule.score < 100 && rule.policy.isOkThreshold !== undefined">
                 Have
                 Have
                 <span ng-if="rule.policy.unit == 'bytes'">{{rule.policy.isOkThreshold | bytes}}</span>
                 <span ng-if="rule.policy.unit == 'bytes'">{{rule.policy.isOkThreshold | bytes}}</span>
-                <span ng-if="rule.policy.unit != 'bytes'">{{rule.policy.isOkThreshold}}</span>
+                <span ng-if="rule.policy.unit != 'bytes'">{{rule.policy.isOkThreshold}}<span ng-if="rule.policy.unit"> {{rule.policy.unit}}</span></span>
                 <span ng-if="rule.policy.isOkThreshold > 0 && rule.policy.isOkThreshold < rule.policy.isBadThreshold">or less</span>
                 <span ng-if="rule.policy.isOkThreshold > 0 && rule.policy.isOkThreshold < rule.policy.isBadThreshold">or less</span>
                 <span ng-if="rule.policy.isOkThreshold > rule.policy.isBadThreshold">or more</span>
                 <span ng-if="rule.policy.isOkThreshold > rule.policy.isBadThreshold">or more</span>
                 to get the 100/100 score.
                 to get the 100/100 score.

+ 10 - 0
lib/metadata/policies.js

@@ -46,6 +46,16 @@ var policies = {
         "isAbnormalThreshold": 50,
         "isAbnormalThreshold": 50,
         "hasOffenders": true
         "hasOffenders": true
     },
     },
+    "scriptDuration": {
+        "tool": "phantomas",
+        "label": "Total JS execution time",
+        "message": "<p>This is the number of milliseconds spent by the browser on JavaScript execution during page load.</p><p>For more details, try using the performance tab in Chrome DevTools. It is a bit complicated at first sight, but you'll be able to analyze exactly where this execution time is spent.</p>",
+        "isOkThreshold": 500,
+        "isBadThreshold": 2000,
+        "isAbnormalThreshold": 4000,
+        "hasOffenders": false,
+        "unit": 'ms'
+    },
     "DOMaccesses": {
     "DOMaccesses": {
         "tool": "domAccessAgregator",
         "tool": "domAccessAgregator",
         "label": "DOM access",
         "label": "DOM access",

+ 4 - 3
lib/metadata/scoreProfileGeneric.json

@@ -13,7 +13,7 @@
         "requests": {
         "requests": {
             "label": "Requests",
             "label": "Requests",
             "policies": {
             "policies": {
-                "totalRequests": 5,
+                "totalRequests": 2,
                 "domains": 3,
                 "domains": 3,
                 "notFound": 3,
                 "notFound": 3,
                 "identicalFiles": 2,
                 "identicalFiles": 2,
@@ -35,7 +35,8 @@
         "javascriptComplexity": {
         "javascriptComplexity": {
             "label": "JS complexity",
             "label": "JS complexity",
             "policies": {
             "policies": {
-                "DOMaccesses": 4,
+                "scriptDuration": 4,
+                "DOMaccesses": 3,
                 "eventsScrollBound": 1
                 "eventsScrollBound": 1
             }
             }
         },
         },
@@ -105,7 +106,7 @@
     },
     },
     "globalScore": {
     "globalScore": {
         "pageWeight": 3,
         "pageWeight": 3,
-        "requests": 3,
+        "requests": 2,
         "domComplexity": 2,
         "domComplexity": 2,
         "javascriptComplexity": 2,
         "javascriptComplexity": 2,
         "badJavascript": 2,
         "badJavascript": 2,