Introduce DomInteractive in the timeline
This commit is contained in:
Gaël Métais
@@ -21,7 +21,7 @@
|
||||
<div class="resultsMenu">
|
||||
<a class="menuItem back" href="/"><div class="icon-back"></div><span>New test<span></a>
|
||||
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><div class="icon-summary"></div><span>Summary</span></div>
|
||||
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><div class="icon-spaghetti"></div><span>Spaghetti</span></div>
|
||||
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><div class="icon-spaghetti"></div><span>Timeline</span></div>
|
||||
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><div class="icon-metrics"></div><span>Metrics</span></div>
|
||||
</div>
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-show="view == 'execution' && !phantomasResults.error" class="execution">
|
||||
<h2>Javascript Spaghetti Timeline</h2>
|
||||
<h2>Javascript Timeline</h2>
|
||||
<p>
|
||||
This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.
|
||||
</p>
|
||||
@@ -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 @@
|
||||
<div class="legend">
|
||||
<div class="titles">
|
||||
<div class="domCreation"><div class="color"></div>DOM creation</div>
|
||||
<div class="domInteractive"><div class="color"></div>DOM interactive</div>
|
||||
<div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
|
||||
<div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
|
||||
<div class="domComplete"><div class="color"></div>Page is complete</div>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<div>Executing Javascript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
|
||||
<div>Some frameworks do things here, but it's not reliable and should be avoided.</div>
|
||||
<div>Also known as "document ready". This is where you should execute <b>top-priority</b> scripts, like binding action buttons or launch a video player.</div>
|
||||
<div>Here you can execute <b>mid-priority</b> tasks. Loading a script with createElement('script') is one way to do so.</div>
|
||||
<div>The page is considered loaded, it's time for low <b>priority things</b> : trackers, social plugins, easter egg...</div>
|
||||
@@ -158,7 +162,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Javascript Spaghetti Profiler</h2>
|
||||
<h2>Javascript Profiler</h2>
|
||||
<p>
|
||||
The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
|
||||
<br>
|
||||
@@ -277,6 +281,8 @@
|
||||
<div class="duration" ng-if="node.data.time == undefined"></div>
|
||||
<div class="startTime" ng-class="{
|
||||
domCreation: node.data.timestamp < phantomasResults.metrics.domInteractive,
|
||||
domInteractive: node.data.timestamp >= phantomasResults.metrics.domInteractive
|
||||
&& node.data.timestamp < phantomasResults.metrics.domContentLoaded,
|
||||
domContentLoaded: node.data.timestamp >= phantomasResults.metrics.domContentLoaded
|
||||
&& node.data.timestamp < phantomasResults.metrics.domContentLoadedEnd,
|
||||
domContentLoadedEnd: node.data.timestamp >= phantomasResults.metrics.domContentLoadedEnd
|
||||
|
||||
Binary file not shown.
@@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 488.00,384.00l-8.00,0.00 L 480.00,280.00 c0.00-30.878-25.121-56.00-56.00-56.00L 288.00,224.00 l0.00-64.00 l 8.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00L 320.00,56.00 c0.00-13.20-10.80-24.00-24.00-24.00l-80.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,80.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 8.00,0.00 l0.00,64.00 L 88.00,224.00 c-30.878,0.00-56.00,25.122-56.00,56.00l0.00,104.00 l-8.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,80.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 80.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00l0.00-80.00 c0.00-13.20-10.80-24.00-24.00-24.00l-8.00,0.00 l0.00-96.00 l 128.00,0.00 l0.00,96.00 l-8.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,80.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 80.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00l0.00-80.00 c0.00-13.20-10.80-24.00-24.00-24.00l-8.00,0.00 l0.00-96.00 l 128.00,0.00 l0.00,96.00 l-8.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,80.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 80.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00l0.00-80.00 C 512.00,394.80, 501.20,384.00, 488.00,384.00z M 96.00,480.00L 32.00,480.00 l0.00-64.00 l 64.00,0.00 L 96.00,480.00 z M 288.00,480.00l-64.00,0.00 l0.00-64.00 l 64.00,0.00 L 288.00,480.00 z M 224.00,128.00L 224.00,64.00 l 64.00,0.00 l0.00,64.00 L 224.00,128.00 z M 480.00,480.00l-64.00,0.00 l0.00-64.00 l 64.00,0.00 L 480.00,480.00 z" ></path></svg>
|
||||
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M0.00,416.00L 512.00,416.00L 512.00,480.00L0.00,480.00zM 64.00,288.00L 128.00,288.00L 128.00,384.00L 64.00,384.00zM 160.00,160.00L 224.00,160.00L 224.00,384.00L 160.00,384.00zM 256.00,256.00L 320.00,256.00L 320.00,384.00L 256.00,384.00zM 352.00,64.00L 416.00,64.00L 416.00,384.00L 352.00,384.00z" ></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -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]`;
|
||||
|
||||
@@ -63,7 +63,7 @@ h1 span {
|
||||
.icon(@list);
|
||||
}
|
||||
.icon-spaghetti {
|
||||
.icon(@tree);
|
||||
.icon(@bars);
|
||||
}
|
||||
.icon-metrics {
|
||||
.icon(@drawer3);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user