Gaël Métais 10 lat temu
rodzic
commit
87bd8339ee
1 zmienionych plików z 201 dodań i 35 usunięć
  1. 201 35
      app/node_views/results.html

+ 201 - 35
app/node_views/results.html

@@ -50,7 +50,7 @@
                                 <div class="result">{{phantomasResults.metrics.DOMelementsCount}}</div>
                                 <div class="info">
                                     <div class="icon-question" ng-click="DOMelementsCountTooltip = true"></div>
-                                    <modal-dialog show='DOMelementsCountTooltip' dialog-title='Avoid too many DOM elements'>
+                                    <modal-dialog show="DOMelementsCountTooltip" dialog-title="Avoid too many DOM elements">
                                         <p>A high number of DOM elements means a lot of work for the browser to render the page.</p>
                                         <p>It also slows down Javascript DOM queries, as there are more elements to search through.</p>
                                     </modal-dialog>
@@ -64,7 +64,7 @@
                                 </div>
                                 <div class="info">
                                     <div class="icon-question" ng-click="DOMelementMaxDepthTooltip = true"></div>
-                                    <modal-dialog show='DOMelementMaxDepthTooltip' dialog-title='Reduce DOM depth'>
+                                    <modal-dialog show="DOMelementMaxDepthTooltip" dialog-title="Reduce DOM depth">
                                         <p>A deep DOM makes difficult the CSS matching with DOM elements.</p>
                                         <p>It also slows down Javascript modifications to the DOM because dimensions calculations bubble up. Same thing for Javascript events.</p>
                                     </modal-dialog>
@@ -75,7 +75,7 @@
                                 <div class="result">{{phantomasResults.metrics.iframesCount}}</div>
                                 <div class="info">
                                     <div class="icon-question" ng-click="DOMelementMaxDepthTooltip = true"></div>
-                                    <modal-dialog show='DOMelementMaxDepthTooltip' dialog-title='iFrames are slow'>
+                                    <modal-dialog show="DOMelementMaxDepthTooltip" dialog-title="iFrames are slow">
                                         <p>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.</p>
                                     </modal-dialog>
                                 </div>
@@ -86,7 +86,12 @@
                                     {{phantomasResults.metrics.DOMidDuplicated}}
                                     <show-offenders modal-title="DOM IDs duplicated" metric-name="DOMidDuplicated" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="DOMidDuplicatedTooltip = true"></div>
+                                    <modal-dialog show="DOMidDuplicatedTooltip" dialog-title="Warning: duplicated DOM IDs">
+                                        <p>IDs of HTML elements must be document-wide unique. This can cause problems with getElementById returning the wrong element.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -102,17 +107,36 @@
                                     {{phantomasResults.metrics.DOMinserts}}
                                     <show-offenders modal-title="DOM inserts" metric-name="DOMinserts" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="DOMinsertsTooltip = true"></div>
+                                    <modal-dialog show="DOMinsertsTooltip" dialog-title="DOM insertions are slow">
+                                        <p>Working with the DOM in Javascript triggers layout calculations and slows down the page.</p>
+                                        <p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.DOMqueries">
                                 <div class="label">DOM queries</div>
                                 <div class="result">{{phantomasResults.metrics.DOMqueries}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="DOMqueriesTooltip = true"></div>
+                                    <modal-dialog show="DOMqueriesTooltip" dialog-title="Avoid having too many DOM queries">
+                                        <p>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.</p>
+                                        <p>Try to reduce the number of queries by refactoring your Javascript code.</p>
+                                        <p>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.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="totalJSTime">
-                                <div class="label">Time they took</div>
+                                <div class="label">JS interactions time</div>
                                 <div class="result">{{totalJSTime}} ms</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="totalJSTimeTooltip = true"></div>
+                                    <modal-dialog show="totalJSTimeTooltip" dialog-title="DOM manipulations can be very slow">
+                                        <p><b>Please note that the tool is not accurate. The time indicated here is generally 3 or 4 times slower than on modern browsers.</b></p>
+                                        <p>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, ...</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -128,7 +152,13 @@
                                     {{duplicatedQueriesCountAll}}
                                     <show-offenders modal-title="Duplicated DOM queries" metric-name="DOMqueriesDuplicated" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="duplicatedQueriesCountAllTooltip = true"></div>
+                                    <modal-dialog show="duplicatedQueriesCountAllTooltip" dialog-title="Don't duplicate DOM queries">
+                                        <p>This is the number of queries that could be avoided by removing all duplicated queries.</p>
+                                        <p>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.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -144,7 +174,13 @@
                                     {{phantomasResults.metrics.eventsBound}}
                                     <show-offenders modal-title="Events bound" metric-name="eventsBound" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="eventsBoundTooltip = true"></div>
+                                    <modal-dialog show="eventsBoundTooltip" dialog-title="Reduce the number of events binding">
+                                        <p>Binding too many events has a cost.</p>
+                                        <p>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.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -160,22 +196,46 @@
                                     {{phantomasResults.metrics.jsErrors}}
                                     <show-offenders modal-title="Javascript errors" metric-name="jsErrors" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="jsErrorsTooltip = true"></div>
+                                    <modal-dialog show="jsErrorsTooltip" dialog-title="Javascript errors">
+                                        <p>Just to let you know there are some errors on the page.</p>
+                                        <p>Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.evalCalls">
                                 <div class="label">eval calls</div>
                                 <div class="result">{{phantomasResults.metrics.evalCalls}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="evalCallsTooltip = true"></div>
+                                    <modal-dialog show="evalCallsTooltip" dialog-title="Eval is evil">
+                                        <p>The 'eval' function is slow and a bad coding practice. Try to get rid of it.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.documentWriteCalls">
                                 <div class="label">document.write calls</div>
                                 <div class="result">{{phantomasResults.metrics.documentWriteCalls}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="documentWriteCallsTooltip = true"></div>
+                                    <modal-dialog show="documentWriteCallsTooltip" dialog-title="document.write should have never existed">
+                                        <p>They slow down the page construction, especially if they are used to insert scripts in the page. Remove them ASAP.</p>
+                                        <p>If you cannot remove them because they come from a third-party script (such as ads), have a look at <a href="https://github.com/krux/postscribe" target="_blank">PostScribe</a>.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.consoleMessages">
                                 <div class="label">Console messages</div>
                                 <div class="result">{{phantomasResults.metrics.consoleMessages}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="consoleMessagesTooltip = true"></div>
+                                    <modal-dialog show="consoleMessagesTooltip" dialog-title="Avoid using console.log()">
+                                        <p>Try to keep your console clean when in production. Debugging is good for development only.</p>
+                                        <p>Writing in the console has a cost, especially when dumping large object variables.</p>
+                                        <p>There is also a problem with Internet Explorer 8, not knowing the console object.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.globalVariables">
                                 <div class="label">Global variables</div>
@@ -183,7 +243,13 @@
                                     {{phantomasResults.metrics.globalVariables}}
                                     <show-offenders modal-title="Global variables" metric-name="globalVariables" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="globalVariablesTooltip = true"></div>
+                                    <modal-dialog show="globalVariablesTooltip" dialog-title="Minimize the use of global variables">
+                                        <p>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.</p>
+                                        <p>Global variables also take a (very) little bit longer to access than local variables.</p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -196,12 +262,22 @@
                             <div ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">
                                 <div class="label">jQuery version</div>
                                 <div class="result">{{phantomasResults.metrics.jQueryVersion}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="jQueryVersionTooltip = true"></div>
+                                    <modal-dialog show="jQueryVersionTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">
                                 <div class="label">{{phantomasResults.metrics.jQueryDifferentVersions}}</b> versions loaded</div>
                                 <div class="result"><span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span></div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="jQueryDifferentVersionsTooltip = true"></div>
+                                    <modal-dialog show="jQueryDifferentVersionsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -214,7 +290,12 @@
                             <div ng-if="phantomasResults.metrics.cssRules">
                                 <div class="label">Rules count</div>
                                 <div class="result">{{phantomasResults.metrics.cssRules}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssRulesTooltip = true"></div>
+                                    <modal-dialog show="cssRulesTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssComplexSelectors">
                                 <div class="label">Complex selectors</div>
@@ -222,7 +303,12 @@
                                     {{phantomasResults.metrics.cssComplexSelectors}}
                                     <show-offenders modal-title="Complex selectors" metric-name="cssComplexSelectors" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssComplexSelectorsTooltip = true"></div>
+                                    <modal-dialog show="cssComplexSelectorsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -238,7 +324,12 @@
                                     {{phantomasResults.metrics.cssDuplicatedSelectors}}
                                     <show-offenders modal-title="Duplicated selectors" metric-name="cssDuplicatedSelectors" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssDuplicatedSelectorsTooltip = true"></div>
+                                    <modal-dialog show="cssDuplicatedSelectorsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssEmptyRules">
                                 <div class="label">Empty rules</div>
@@ -246,7 +337,12 @@
                                     {{phantomasResults.metrics.cssEmptyRules}}
                                     <show-offenders modal-title="Empty rules" metric-name="cssEmptyRules" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssEmptyRulesTooltip = true"></div>
+                                    <modal-dialog show="cssEmptyRulesTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssExpressions">
                                 <div class="label">CSS expressions</div>
@@ -254,7 +350,12 @@
                                     {{phantomasResults.metrics.cssExpressions}}
                                     <show-offenders modal-title="CSS expressions" metric-name="cssExpressions" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssExpressionsTooltip = true"></div>
+                                    <modal-dialog show="cssExpressionsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssImportants">
                                 <div class="label">Uses of !important</div>
@@ -262,7 +363,12 @@
                                     {{phantomasResults.metrics.cssImportants}}
                                     <show-offenders modal-title="Uses of !important" metric-name="cssImportants" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssImportantsTooltip = true"></div>
+                                    <modal-dialog show="cssImportantsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssOldIEFixes">
                                 <div class="label">Old IE fixes</div>
@@ -270,7 +376,12 @@
                                     {{phantomasResults.metrics.cssOldIEFixes}}
                                     <show-offenders modal-title="Old IE fixes" metric-name="cssOldIEFixes" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssOldIEFixesTooltip = true"></div>
+                                    <modal-dialog show="cssOldIEFixesTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssOldPropertyPrefixes">
                                 <div class="label">Old prefixes</div>
@@ -278,7 +389,12 @@
                                     {{phantomasResults.metrics.cssOldPropertyPrefixes}}
                                     <show-offenders modal-title="Old prefixes" metric-name="cssOldPropertyPrefixes" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssOldPropertyPrefixesTooltip = true"></div>
+                                    <modal-dialog show="cssOldPropertyPrefixesTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssUniversalSelectors">
                                 <div class="label">Universal selectors</div>
@@ -286,7 +402,12 @@
                                     {{phantomasResults.metrics.cssUniversalSelectors}}
                                     <show-offenders modal-title="Universal selectors" metric-name="cssUniversalSelectors" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssUniversalSelectorsTooltip = true"></div>
+                                    <modal-dialog show="cssUniversalSelectorsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cssRedundantBodySelectors">
                                 <div class="label">Redundant body selectors</div>
@@ -294,7 +415,12 @@
                                     {{phantomasResults.metrics.cssRedundantBodySelectors}}
                                     <show-offenders modal-title="Redundant body selectors" metric-name="cssRedundantBodySelectors" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cssRedundantBodySelectorsTooltip = true"></div>
+                                    <modal-dialog show="cssRedundantBodySelectorsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -307,7 +433,12 @@
                             <div>
                                 <div class="label">Total requests</div>
                                 <div class="result">{{phantomasResults.metrics.requests}}</div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="requestsTooltip = true"></div>
+                                    <modal-dialog show="requestsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.htmlCount">
                                 <div class="label">Documents</div>
@@ -387,7 +518,12 @@
                                     {{phantomasResults.metrics.notFound}}
                                     <show-offenders modal-title="404 not found" metric-name="notFound" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="notFoundTooltip = true"></div>
+                                    <modal-dialog show="notFoundTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.closedConnections">
                                 <div class="label">Connections closed</div>
@@ -395,7 +531,12 @@
                                     {{phantomasResults.metrics.closedConnections}}
                                     <show-offenders modal-title="Connections closed" metric-name="closedConnections" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="closedConnectionsTooltip = true"></div>
+                                    <modal-dialog show="closedConnectionsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.multipleRequests">
                                 <div class="label">Duplicated requests</div>
@@ -403,7 +544,12 @@
                                     {{phantomasResults.metrics.multipleRequests}}
                                     <show-offenders modal-title="Static assets requested more than once" metric-name="multipleRequests" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="multipleRequestsTooltip = true"></div>
+                                    <modal-dialog show="multipleRequestsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cachingDisabled">
                                 <div class="label">Caching disabled</div>
@@ -411,7 +557,12 @@
                                     {{phantomasResults.metrics.cachingDisabled}}
                                     <show-offenders modal-title="Caching disabled" metric-name="cachingDisabled" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cachingDisabledTooltip = true"></div>
+                                    <modal-dialog show="cachingDisabledTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cachingNotSpecified">
                                 <div class="label">Caching not specified</div>
@@ -419,7 +570,12 @@
                                     {{phantomasResults.metrics.cachingNotSpecified}}
                                     <show-offenders modal-title="Caching not specified" metric-name="cachingNotSpecified" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cachingNotSpecifiedTooltip = true"></div>
+                                    <modal-dialog show="cachingNotSpecifiedTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.cachingTooShort">
                                 <div class="label">Caching too short</div>
@@ -427,7 +583,12 @@
                                     {{phantomasResults.metrics.cachingTooShort}}
                                     <show-offenders modal-title="Caching too short" metric-name="cachingTooShort" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="cachingTooShortTooltip = true"></div>
+                                    <modal-dialog show="cachingTooShortTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                             <div ng-if="phantomasResults.metrics.domains">
                                 <div class="label">Different domains</div>
@@ -435,7 +596,12 @@
                                     {{phantomasResults.metrics.domains}}
                                     <show-offenders modal-title="Different domains" metric-name="domains" phantomas-results="phantomasResults"></show-offenders>
                                 </div>
-                                <div class="icon-question"></div>
+                                <div class="info">
+                                    <div class="icon-question" ng-click="domainsTooltip = true"></div>
+                                    <modal-dialog show="domainsTooltip" dialog-title="">
+                                        <p></p>
+                                    </modal-dialog>
+                                </div>
                             </div>
                         </div>
                     </div>