From 87bd8339ee87c60f22ea1a48615bb9742674aa98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Wed, 24 Sep 2014 01:00:00 +0200 Subject: [PATCH] More tooltips --- app/node_views/results.html | 236 ++++++++++++++++++++++++++++++------ 1 file changed, 201 insertions(+), 35 deletions(-) diff --git a/app/node_views/results.html b/app/node_views/results.html index 4868c2b..1289f6a 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -50,7 +50,7 @@
{{phantomasResults.metrics.DOMelementsCount}}
- +

A high number of DOM elements means a lot of work for the browser to render the page.

It also slows down Javascript DOM queries, as there are more elements to search through.

 @@ -64,7 +64,7 @@
- +

A deep DOM makes difficult the CSS matching with DOM elements.

It also slows down Javascript modifications to the DOM because dimensions calculations bubble up. Same thing for Javascript events.

 @@ -75,7 +75,7 @@
{{phantomasResults.metrics.iframesCount}}
- +

iFrames are the most complex HTML elements. They are pages just like the main page and the browser needs to create a new page context, wich has a cost.
@@ -86,7 +86,12 @@ {{phantomasResults.metrics.DOMidDuplicated}}
-
+
+
+ +

IDs of HTML elements must be document-wide unique. This can cause problems with getElementById returning the wrong element.

+ +
@@ -102,17 +107,36 @@ {{phantomasResults.metrics.DOMinserts}} -
+
+
+ +

Working with the DOM in Javascript triggers layout calculations and slows down the page.

+

Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.

+ +
DOM queries
{{phantomasResults.metrics.DOMqueries}}
-
+
+
+ +

DOM queries are like looking in a large catalog of items. Even if the browsers made progress on the performances of a query, many websites make hundreds of them.

+

Try to reduce the number of queries by refactoring your Javascript code.

+

Avoid also to have a read query between two write queries. To reduce the number repaints and optimize performances, browsers buffer the DOM writing operations. But each time a DOM reading is asked, the browser needs to empty the buffer. This can be particularly slow inside a loop.

+ +
-
Time they took
+
JS interactions time
{{totalJSTime}} ms
-
+
+
+ +

Please note that the tool is not accurate. The time indicated here is generally 3 or 4 times slower than on modern browsers.

+

Some DOM manipulations can be very slow. For example, searching with a complex selector, making big changes to the DOM, animating an element, inserting an iframe, ...

+ +
@@ -128,7 +152,13 @@ {{duplicatedQueriesCountAll}} -
+
+
+ +

This is the number of queries that could be avoided by removing all duplicated queries.

+

Simply save the result of a query in a variable. Ok it is not always simple, especially with third-party scripts, but at least do it with your own code.

+ +
@@ -144,7 +174,13 @@ {{phantomasResults.metrics.eventsBound}} -
+
+
+ +

Binding too many events has a cost.

+

It can be avoided by using "event delegation". Instead of binding events on each element one by one, events delegation binds them on the top level document element and uses the bubbling principle.

+ +
@@ -160,22 +196,46 @@ {{phantomasResults.metrics.jsErrors}} -
+
+
+ +

Just to let you know there are some errors on the page.

+

Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.

+ +
eval calls
{{phantomasResults.metrics.evalCalls}}
-
+
+
+ +

The 'eval' function is slow and a bad coding practice. Try to get rid of it.

+ +
document.write calls
{{phantomasResults.metrics.documentWriteCalls}}
-
+
+
+ +

They slow down the page construction, especially if they are used to insert scripts in the page. Remove them ASAP.

+

If you cannot remove them because they come from a third-party script (such as ads), have a look at PostScribe.

+ +
Console messages
{{phantomasResults.metrics.consoleMessages}}
-
+
+
+ +

Try to keep your console clean when in production. Debugging is good for development only.

+

Writing in the console has a cost, especially when dumping large object variables.

+

There is also a problem with Internet Explorer 8, not knowing the console object.

+ +
Global variables
@@ -183,7 +243,13 @@ {{phantomasResults.metrics.globalVariables}}
-
+
+
+ +

It is a bad practice because they clutter up the global namespace. If two scripts use the same variable name in the global scope, it can cause conflicts and it is generally hard to debug.

+

Global variables also take a (very) little bit longer to access than local variables.

+ +
@@ -196,12 +262,22 @@
jQuery version
{{phantomasResults.metrics.jQueryVersion}}
-
+
+
+ +

+ +
{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded
{{version}} &
-
+
+
+ +

+ +
@@ -214,7 +290,12 @@
Rules count
{{phantomasResults.metrics.cssRules}}
-
+
+
+ +

+ +
Complex selectors
@@ -222,7 +303,12 @@ {{phantomasResults.metrics.cssComplexSelectors}}
-
+
+
+ +

+ +
@@ -238,7 +324,12 @@ {{phantomasResults.metrics.cssDuplicatedSelectors}} -
+
+
+ +

+ +
Empty rules
@@ -246,7 +337,12 @@ {{phantomasResults.metrics.cssEmptyRules}}
-
+
+
+ +

+ +
CSS expressions
@@ -254,7 +350,12 @@ {{phantomasResults.metrics.cssExpressions}}
-
+
+
+ +

+ +
Uses of !important
@@ -262,7 +363,12 @@ {{phantomasResults.metrics.cssImportants}}
-
+
+
+ +

+ +
Old IE fixes
@@ -270,7 +376,12 @@ {{phantomasResults.metrics.cssOldIEFixes}}
-
+
+
+ +

+ +
Old prefixes
@@ -278,7 +389,12 @@ {{phantomasResults.metrics.cssOldPropertyPrefixes}}
-
+
+
+ +

+ +
Universal selectors
@@ -286,7 +402,12 @@ {{phantomasResults.metrics.cssUniversalSelectors}}
-
+
+
+ +

+ +
Redundant body selectors
@@ -294,7 +415,12 @@ {{phantomasResults.metrics.cssRedundantBodySelectors}}
-
+
+
+ +

+ +
@@ -307,7 +433,12 @@
Total requests
{{phantomasResults.metrics.requests}}
-
+
+
+ +

+ +
Documents
@@ -387,7 +518,12 @@ {{phantomasResults.metrics.notFound}}
-
+
+
+ +

+ +
Connections closed
@@ -395,7 +531,12 @@ {{phantomasResults.metrics.closedConnections}}
-
+
+
+ +

+ +
Duplicated requests
@@ -403,7 +544,12 @@ {{phantomasResults.metrics.multipleRequests}}
-
+
+
+ +

+ +
Caching disabled
@@ -411,7 +557,12 @@ {{phantomasResults.metrics.cachingDisabled}}
-
+
+
+ +

+ +
Caching not specified
@@ -419,7 +570,12 @@ {{phantomasResults.metrics.cachingNotSpecified}}
-
+
+
+ +

+ +
Caching too short
@@ -427,7 +583,12 @@ {{phantomasResults.metrics.cachingTooShort}}
-
+
+
+ +

+ +
Different domains
@@ -435,7 +596,12 @@ {{phantomasResults.metrics.domains}}
-
+
+
+ +

+ +