WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add JS execution in before DOM Ready to the bad practices

Browse Source
This commit is contained in:
Gaël Métais
2014-09-27 00:48:18 +02:00
parent 6ca13ae5da
commit c1992dc340
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+15 -1
View File
@@ -38,7 +38,7 @@
<div ng-show="view == 'summary' && !phantomasResults.error" class="summary">
<h2>Summary</h2>
<div class="notations">
<div>
<div ng-class="notations.domComplexity">{{notations.domComplexity}}</div>
@@ -230,6 +230,20 @@
</modal-dialog>
</div>
</div>
<div ng-if="inBodyDomManipulations > 10">
<div class="label">Execution in body</div>
<div class="result">
{{inBodyDomManipulations}}
</div>
<div class="info">
<div class="icon-question" ng-click="inBodyDomManipulationsTooltip = true"></div>
<modal-dialog show="inBodyDomManipulationsTooltip" dialog-title="Javascript executed inside the body">
<p>Wait the DOMContentLoaded event before executing Javascript.</p>
<p>Choose between the HEAD and the end of the BODY for scripts. Do not execute Javascript in the middle of the BODY as it slows down the construction of the DOM and makes a poor maintainability. This is what i call spaghetti code.</p>
<p>The JS Timeline tab can help you.</p>
</modal-dialog>
</div>
</div>
</div>
</div>
</div>
app/public/scripts/resultsCtrl.js
+13 -6
View File
@@ -47,10 +47,16 @@ app.controller('ResultsCtrl', function ($scope) {
// Read the main elements of the tree and sum the total time
$scope.totalJSTime = 0;
$scope.inBodyDomManipulations = 0;
treeRunner($scope.javascript, function(node) {
if (node.data.time) {
$scope.totalJSTime += node.data.time;
}
if (node.data.timestamp < $scope.phantomasResults.metrics.domInteractive
&& node.data.type !== 'jQuery - onDOMReady') {
$scope.inBodyDomManipulations ++;
}
if (node.data.type !== 'main') {
// Don't check the children
@@ -209,20 +215,21 @@ app.controller('ResultsCtrl', function ($scope) {
$scope.phantomasResults.metrics.evalCalls * 2 +
$scope.phantomasResults.metrics.jsErrors * 10 +
$scope.phantomasResults.metrics.consoleMessages / 2 +
$scope.phantomasResults.metrics.globalVariables / 20;
if (score > 5) {
$scope.phantomasResults.metrics.globalVariables / 20 +
Math.sqrt($scope.inBodyDomManipulations);
if (score > 10) {
note = 'B';
}
if (score > 10) {
if (score > 15) {
note = 'C';
}
if (score > 15) {
if (score > 20) {
note = 'D';
}
if (score > 25) {
if (score > 30) {
note = 'E';
}
if (score > 40) {
if (score > 45) {
note = 'F';
}
return note;