-
Javascript Spaghetti Timeline
+
Javascript Timeline
This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.
@@ -127,6 +127,8 @@
class="interval"
ng-class="{
domCreation: $index * timelineIntervalDuration < phantomasResults.metrics.domInteractive,
+ domInteractive: $index * timelineIntervalDuration >= phantomasResults.metrics.domInteractive
+ && $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoaded,
domContentLoaded: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoaded
&& $index * timelineIntervalDuration < phantomasResults.metrics.domContentLoadedEnd,
domContentLoadedEnd: $index * timelineIntervalDuration >= phantomasResults.metrics.domContentLoadedEnd
@@ -145,12 +147,14 @@
Executing Javascript and DOM queries here is a bad practice and slows down the DOM construction.
+
Some frameworks do things here, but it's not reliable and should be avoided.
Also known as "document ready". This is where you should execute top-priority scripts, like binding action buttons or launch a video player.
Here you can execute mid-priority tasks. Loading a script with createElement('script') is one way to do so.
The page is considered loaded, it's time for low priority things : trackers, social plugins, easter egg...
@@ -158,7 +162,7 @@
-
Javascript Spaghetti Profiler
+
Javascript Profiler
The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/app/public/styles/less/icons.less b/app/public/styles/less/icons.less
index f32401e..d1f20b7 100644
--- a/app/public/styles/less/icons.less
+++ b/app/public/styles/less/icons.less
@@ -1,24 +1,24 @@
@list-font-family: "fontsmith-icons";
-@list-value: "\e003";
-@list: '"fontsmith-icons"' '"\\e003"';
-@drawer3-font-family: "fontsmith-icons";
-@drawer3-value: "\e005";
-@drawer3: '"fontsmith-icons"' '"\\e005"';
-@question-font-family: "fontsmith-icons";
-@question-value: "\e002";
-@question: '"fontsmith-icons"' '"\\e002"';
-@warning-font-family: "fontsmith-icons";
-@warning-value: "\e000";
-@warning: '"fontsmith-icons"' '"\\e000"';
-@lab-font-family: "fontsmith-icons";
-@lab-value: "\e004";
-@lab: '"fontsmith-icons"' '"\\e004"';
+@list-value: "\e002";
+@list: '"fontsmith-icons"' '"\\e002"';
@arrow-left3-font-family: "fontsmith-icons";
@arrow-left3-value: "\e006";
@arrow-left3: '"fontsmith-icons"' '"\\e006"';
-@tree-font-family: "fontsmith-icons";
-@tree-value: "\e001";
-@tree: '"fontsmith-icons"' '"\\e001"';
+@question-font-family: "fontsmith-icons";
+@question-value: "\e001";
+@question: '"fontsmith-icons"' '"\\e001"';
+@warning-font-family: "fontsmith-icons";
+@warning-value: "\e000";
+@warning: '"fontsmith-icons"' '"\\e000"';
+@bars-font-family: "fontsmith-icons";
+@bars-value: "\e005";
+@bars: '"fontsmith-icons"' '"\\e005"';
+@drawer3-font-family: "fontsmith-icons";
+@drawer3-value: "\e004";
+@drawer3: '"fontsmith-icons"' '"\\e004"';
+@lab-font-family: "fontsmith-icons";
+@lab-value: "\e003";
+@lab: '"fontsmith-icons"' '"\\e003"';
.icon-font-family(@char) {
font-family: ~`@{char}[0]`;
diff --git a/app/public/styles/less/main.less b/app/public/styles/less/main.less
index ced353a..4d8d27b 100644
--- a/app/public/styles/less/main.less
+++ b/app/public/styles/less/main.less
@@ -63,7 +63,7 @@ h1 span {
.icon(@list);
}
.icon-spaghetti {
- .icon(@tree);
+ .icon(@bars);
}
.icon-metrics {
.icon(@drawer3);
diff --git a/app/public/styles/less/results.less b/app/public/styles/less/results.less
index 6b03fea..490a3bc 100644
--- a/app/public/styles/less/results.less
+++ b/app/public/styles/less/results.less
@@ -8,7 +8,8 @@
@domContentLoadedEndBg: #D8F0F0;
@domCompleteColor: #C2A3FF;
@domCompleteBg: #EDE3FF;
-
+@domInteractiveColor: #FFE433;
+@domInteractiveBg: #FFFCCC;
.resultsMenu {
@@ -188,6 +189,12 @@ h4 {
.timeline .domContentLoaded .color {
background: @domContentLoadedColor;
}
+.timeline .domInteractive.interval {
+ background: @domInteractiveBg;
+}
+.timeline .domInteractive .color {
+ background: @domInteractiveColor;
+}
.timeline .domCreation.interval {
background: @domCreationBg;
}
@@ -215,26 +222,29 @@ h4 {
display: table-row;
}
.timeline .legend > div > div {
+ position: relative;
display: table-cell;
margin-top: 1em;
}
.timeline .titles {
font-weight: bold;
}
+.timeline .titles > div {
+ padding: 0 1em 0 2em;
+}
.timeline .tips {
font-size: 0.7em;
}
.timeline .tips > div {
- padding: 1em 1.5em;
+ padding: 1em 1em 0 0;
}
.timeline .legend .color {
- display: inline-block;
- position: relative;
- top: 0.4em;
+ display: block;
+ position: absolute;
+ left: 0;
height: 1.5em;
width: 1.5em;
border-radius: 0.2em;
- margin: 0 0.4em 0 1em;
}
@@ -312,7 +322,7 @@ input.textFilter {
color: #e74c3c;
font-weight: bold;
}
-.table > div.windowPerformance > div {
+.table > div.windowPerformance > div, .table > div.windowPerformance > div.startTime {
background: #EBD8E2;
}
.table > div.showingDetails > div {
@@ -385,6 +395,9 @@ input.textFilter {
.table > div > .startTime.domContentLoaded {
background: @domContentLoadedBg;
}
+.table > div > .startTime.domInteractive {
+ background: @domInteractiveBg;
+}
.table > div > .startTime.domCreation {
background: @domCreationBg;
}
diff --git a/app/public/styles/main.css b/app/public/styles/main.css
index 32ac6eb..143b63d 100644
--- a/app/public/styles/main.css
+++ b/app/public/styles/main.css
@@ -56,7 +56,7 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-lab:before {
- content: "\e004";
+ content: "\e003";
}
.icon-question {
font-family: "fontsmith-icons";
@@ -69,7 +69,7 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-question:before {
- content: "\e002";
+ content: "\e001";
}
.icon-warning {
font-family: "fontsmith-icons";
@@ -108,7 +108,7 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-summary:before {
- content: "\e003";
+ content: "\e002";
}
.icon-spaghetti {
font-family: "fontsmith-icons";
@@ -121,7 +121,7 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-spaghetti:before {
- content: "\e001";
+ content: "\e005";
}
.icon-metrics {
font-family: "fontsmith-icons";
@@ -134,5 +134,5 @@ h1 span {
-webkit-font-smoothing: antialiased;
}
.icon-metrics:before {
- content: "\e005";
+ content: "\e004";
}
diff --git a/app/public/styles/results.css b/app/public/styles/results.css
index 65df968..bdcbb47 100644
--- a/app/public/styles/results.css
+++ b/app/public/styles/results.css
@@ -179,6 +179,12 @@ h4 {
.timeline .domContentLoaded .color {
background: #a7e846;
}
+.timeline .domInteractive.interval {
+ background: #fffccc;
+}
+.timeline .domInteractive .color {
+ background: #ffe433;
+}
.timeline .domCreation.interval {
background: #ffe0cc;
}
@@ -205,26 +211,29 @@ h4 {
display: table-row;
}
.timeline .legend > div > div {
+ position: relative;
display: table-cell;
margin-top: 1em;
}
.timeline .titles {
font-weight: bold;
}
+.timeline .titles > div {
+ padding: 0 1em 0 2em;
+}
.timeline .tips {
font-size: 0.7em;
}
.timeline .tips > div {
- padding: 1em 1.5em;
+ padding: 1em 1em 0 0;
}
.timeline .legend .color {
- display: inline-block;
- position: relative;
- top: 0.4em;
+ display: block;
+ position: absolute;
+ left: 0;
height: 1.5em;
width: 1.5em;
border-radius: 0.2em;
- margin: 0 0.4em 0 1em;
}
.metrics h4 {
padding-left: 2em;
@@ -289,7 +298,8 @@ input.textFilter {
color: #e74c3c;
font-weight: bold;
}
-.table > div.windowPerformance > div {
+.table > div.windowPerformance > div,
+.table > div.windowPerformance > div.startTime {
background: #EBD8E2;
}
.table > div.showingDetails > div {
@@ -357,6 +367,9 @@ input.textFilter {
.table > div > .startTime.domContentLoaded {
background: #e0ffd1;
}
+.table > div > .startTime.domInteractive {
+ background: #fffccc;
+}
.table > div > .startTime.domCreation {
background: #ffe0cc;
}