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

Requests notation

Browse Source
This commit is contained in:
Gaël Métais
2014-09-18 22:29:02 +02:00
parent aeb1da74fe
commit f122188ed1
4 changed files with 37 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -11,7 +11,7 @@ Online tool designed to help Front-End developers optimize their website
## How it works
The tool is based on the fabulous [Phantomas](https://github.com/macbre/phantomas) by Maciej Brencz, that loads a page and collects many web performance metrics.
I rewrote some modules to deeper analyse Javascript interactions with the DOM (especially with jQuery).
I rewrote some modules to deeper analyze Javascript interactions with the DOM (especially with jQuery).
And then it is wrapped inside a small NodeJS server to get an interface (inspired by my favorite tool: [WebPageTest](http://www.webpagetest.org/)).
**There are so many things left to do, your help would be greatly appreciated! Please report bugs, ask for evolutions and come code with me.**
app/node_views/index.html
+1 -1
View File
@@ -8,7 +8,7 @@
</head>
<body>
<h1>Yellow Lab <span class="icon-lab"></span> Tools</h1>
<h2 class="promess">Free online test to help speeding up <b>heavily</b> javascripted pages</h2>
<h2 class="promess">Free online test to help speeding up <b>heavy</b> web pages</h2>
<form method="post" action="/launchTest">
<input type="text" name="url" placeholder="http://www.mysite.com" class="url" />
<input type="submit" value="Launch test" class="launchBtn" onclick="this.className += ' clicked'" />
app/node_views/results.html
+27 -14
View File
@@ -115,17 +115,6 @@
</ul>
</div>
</div>
<div>
<div ng-class="notations.scripts">{{notations.scripts}}</div>
<div class="notation">JS files loaded</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.jsCount">
Scripts count: {{phantomasResults.metrics.jsCount}}
</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.jQueryLoading">{{notations.jQueryLoading}}</div>
<div class="notation">jQuery version</div>
@@ -188,12 +177,36 @@
</div>
</div>
<div>
<div ng-class="notations.cssCount">{{notations.cssCount}}</div>
<div class="notation">CSS files loaded</div>
<div ng-class="notations.requests">{{notations.requests}}</div>
<div class="notation">Requests number</div>
<div class="criteria">
<ul>
<li>
Total requests: {{phantomasResults.metrics.requests}}
</li>
<li ng-if="phantomasResults.metrics.htmlCount">
Documents: {{phantomasResults.metrics.htmlCount}}
</li>
<li ng-if="phantomasResults.metrics.jsCount">
Scripts: {{phantomasResults.metrics.jsCount}}
</li>
<li ng-if="phantomasResults.metrics.cssCount">
Stylesheets count: {{phantomasResults.metrics.cssCount}}
Stylesheets: {{phantomasResults.metrics.cssCount}}
</li>
<li ng-if="phantomasResults.metrics.imageCount">
Images: {{phantomasResults.metrics.imageCount}}
</li>
<li ng-if="phantomasResults.metrics.webfontCount">
Fonts: {{phantomasResults.metrics.webfontCount}}
</li>
<li ng-if="phantomasResults.metrics.videoCount">
Videos: {{phantomasResults.metrics.videoCount}}
</li>
<li ng-if="phantomasResults.metrics.jsonCount">
JSON: {{phantomasResults.metrics.jsonCount}}
</li>
<li ng-if="phantomasResults.metrics.otherCount">
Other: {{phantomasResults.metrics.otherCount}}
</li>
</ul>
</div>
app/public/scripts/resultsCtrl.js
+8 -30
View File
@@ -72,11 +72,10 @@ app.controller('ResultsCtrl', function ($scope) {
duplicatedDomQueries: getDuplicatedDomQueriesScore(),
eventsBound: getEventsBoundScore(),
jsBadPractices: getJSBadPracticesScore(),
scripts: getScriptsScore(),
jQueryLoading: getJQueryLoadingScore(),
cssComplexity: getCSSComplexityScore(),
badCss: getBadCssScore(),
cssCount: cssCountScore()
requests: requestsScore()
};
}
@@ -266,27 +265,6 @@ app.controller('ResultsCtrl', function ($scope) {
return note;
}
function getScriptsScore() {
var note = 'A';
var score = $scope.phantomasResults.metrics.jsCount;
if (score > 4) {
note = 'B';
}
if (score > 8) {
note = 'C';
}
if (score > 12) {
note = 'D';
}
if (score > 16) {
note = 'E';
}
if (score > 20) {
note = 'F';
}
return note;
}
function getJQueryLoadingScore() {
var note = 'NA';
if ($scope.phantomasResults.metrics.jQueryDifferentVersions > 1) {
@@ -374,22 +352,22 @@ app.controller('ResultsCtrl', function ($scope) {
return note;
}
function cssCountScore() {
function requestsScore() {
var note = 'A';
var score = $scope.phantomasResults.metrics.cssCount;
if (score > 3) {
var score = $scope.phantomasResults.metrics.requests;
if (score > 30) {
note = 'B';
}
if (score > 6) {
if (score > 45) {
note = 'C';
}
if (score > 9) {
if (score > 60) {
note = 'D';
}
if (score > 12) {
if (score > 80) {
note = 'E';
}
if (score > 15) {
if (score > 100) {
note = 'F';
}
return note;