jsExecutionTransformer.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. var debug = require('debug')('ylt:jsExecutionTransformer');
  2. var offendersHelpers = require('../offendersHelpers');
  3. var Collection = require('./phantomas/custom_modules/util/collection');
  4. var jsExecutionTransformer = function() {
  5. this.transform = function(data) {
  6. var javascriptExecutionTree = {};
  7. var jQueryFunctionsCollection = new Collection();
  8. var metrics = {
  9. DOMaccesses: 0,
  10. DOMaccessesOnScroll: 0,
  11. queriesWithoutResults: 0
  12. };
  13. var offenders = {
  14. };
  15. var hasjQuery = (data.toolsResults.phantomas.metrics.jQueryVersionsLoaded > 0);
  16. if (hasjQuery) {
  17. metrics.jQueryCalls = 0;
  18. metrics.jQueryFunctionsUsed = 0;
  19. metrics.jQueryCallsOnEmptyObject = 0;
  20. metrics.jQueryNotDelegatedEvents = 0;
  21. offenders.jQueryFunctionsUsed = [];
  22. offenders.jQueryNotDelegatedEvents = [];
  23. }
  24. try {
  25. debug('Starting JS execution transformation');
  26. javascriptExecutionTree = JSON.parse(data.toolsResults.phantomas.offenders.javascriptExecutionTree[0]);
  27. if (javascriptExecutionTree.children) {
  28. javascriptExecutionTree.children.forEach(function(node) {
  29. var contextLength = (node.data.callDetails && node.data.callDetails.context) ? node.data.callDetails.context.length : null;
  30. if (isABindWithoutEventDelegation(node, contextLength)) {
  31. metrics.jQueryNotDelegatedEvents += contextLength;
  32. offenders.jQueryNotDelegatedEvents.push({
  33. functionName: node.data.type.substring(9),
  34. contextLength: contextLength,
  35. backtrace: offendersHelpers.backtraceToArray(node.data.backtrace)
  36. });
  37. node.warning = true;
  38. node.eventNotDelegated = true;
  39. }
  40. if (node.data.resultsNumber === 0) {
  41. metrics.queriesWithoutResults ++;
  42. node.warning = true;
  43. }
  44. if (contextLength === 0) {
  45. metrics.jQueryCallsOnEmptyObject ++;
  46. node.warning = true;
  47. }
  48. if (node.data.type.indexOf('jQuery - ') === 0) {
  49. metrics.jQueryCalls ++;
  50. jQueryFunctionsCollection.push(node.data.type);
  51. }
  52. // Mark errors with an error flag
  53. if (node.data.type === 'error' || node.data.type === 'jQuery version change') {
  54. node.error = true;
  55. }
  56. // Mark a performance flag
  57. if (['domInteractive', 'domContentLoaded', 'domContentLoadedEnd', 'domComplete'].indexOf(node.data.type) >= 0) {
  58. node.windowPerformance = true;
  59. }
  60. // Read the execution tree and adjust the navigation timings (cause their not very well synchronised)
  61. switch(node.data.type) {
  62. case 'domInteractive':
  63. data.toolsResults.phantomas.metrics.domInteractive = node.data.timestamp;
  64. break;
  65. case 'domContentLoaded':
  66. data.toolsResults.phantomas.metrics.domContentLoaded = node.data.timestamp;
  67. break;
  68. case 'domContentLoadedEnd':
  69. data.toolsResults.phantomas.metrics.domContentLoadedEnd = node.data.timestamp;
  70. break;
  71. case 'domComplete':
  72. data.toolsResults.phantomas.metrics.domComplete = node.data.timestamp;
  73. break;
  74. }
  75. // Transform domPaths into objects
  76. changeListOfDomPaths(node);
  77. // Count the number of DOM accesses, by counting the tree leafs
  78. metrics.DOMaccesses += countTreeLeafs(node);
  79. });
  80. // Count the number of different jQuery functions called
  81. if (hasjQuery) {
  82. jQueryFunctionsCollection.sort().forEach(function(fnName, cnt) {
  83. if (fnName === 'jQuery - find') {
  84. fnName = 'jQuery - $';
  85. }
  86. metrics.jQueryFunctionsUsed ++;
  87. offenders.jQueryFunctionsUsed.push({
  88. functionName: fnName.substring(9),
  89. count: cnt
  90. });
  91. });
  92. }
  93. }
  94. debug('JS execution transformation complete');
  95. debug('Starting scroll execution transformation');
  96. offenders.DOMaccessesOnScroll = JSON.parse(data.toolsResults.phantomas.offenders.scrollExecutionTree[0]);
  97. if (offenders.DOMaccessesOnScroll.children) {
  98. offenders.DOMaccessesOnScroll.children.forEach(function(node) {
  99. // Mark a event flag
  100. if (['documentScroll', 'windowScroll', 'window.onscroll'].indexOf(node.data.type) >= 0) {
  101. node.windowPerformance = true;
  102. }
  103. // Transform domPaths into objects
  104. changeListOfDomPaths(node);
  105. // Count the number of DOM accesses, by counting the tree leafs
  106. metrics.DOMaccessesOnScroll += countTreeLeafs(node);
  107. });
  108. }
  109. debug('Scroll execution transformation complete');
  110. } catch(err) {
  111. throw err;
  112. }
  113. data.javascriptExecutionTree = javascriptExecutionTree;
  114. data.toolsResults.jsExecutionTransformer = {
  115. metrics: metrics,
  116. offenders: offenders
  117. };
  118. return data;
  119. };
  120. function treeRecursiveParser(node, fn) {
  121. if (node.children) {
  122. node.children.forEach(function(child) {
  123. treeRecursiveParser(child, fn);
  124. });
  125. }
  126. fn(node);
  127. }
  128. function changeListOfDomPaths(rootNode) {
  129. treeRecursiveParser(rootNode, function(node) {
  130. if (node.data.callDetails && node.data.callDetails.context && node.data.callDetails.context.length > 0) {
  131. node.data.callDetails.context.elements = node.data.callDetails.context.elements.map(offendersHelpers.domPathToDomElementObj, offendersHelpers);
  132. }
  133. if (node.data.type === 'appendChild' || node.data.type === 'insertBefore' || node.data.type === 'getComputedStyle') {
  134. node.data.callDetails.arguments[0] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[0]);
  135. }
  136. if (node.data.type === 'insertBefore') {
  137. node.data.callDetails.arguments[1] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[1]);
  138. }
  139. });
  140. }
  141. // Returns the number of leafs (nodes without children)
  142. function countTreeLeafs(rootNode) {
  143. var count = 0;
  144. treeRecursiveParser(rootNode, function(node) {
  145. if (!node.children &&
  146. !node.error &&
  147. !node.windowPerformance &&
  148. node.data.type !== 'jQuery loaded') {
  149. count ++;
  150. }
  151. });
  152. return count;
  153. }
  154. function isPureString(str) {
  155. return typeof str === 'string' && str[0] !== '{' && str !== '(function)' && str !== '[Object]' && str !== '[Array]' && str !== 'true' && str !== 'false' && str !== 'undefined' && str !== 'unknown' && str !== 'null';
  156. }
  157. function isABindWithoutEventDelegation(node, contextLength) {
  158. // Count only on larger bindings
  159. if (contextLength <= 3) {
  160. return false;
  161. }
  162. if (node.data.type === 'jQuery - on' && node.data.callDetails.arguments[1] && !isPureString(node.data.callDetails.arguments[1])) {
  163. return true;
  164. }
  165. if (node.data.type.indexOf('jQuery - ') === 0 && node.children && node.children.length === 1) {
  166. var child = node.children[0];
  167. if (child.data.type === 'jQuery - on' && child.data.callDetails.arguments[1] && !isPureString(child.data.callDetails.arguments[1])) {
  168. return true;
  169. }
  170. }
  171. return false;
  172. }
  173. };
  174. module.exports = new jsExecutionTransformer();