domQYLT.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. /**
  2. * Analyzes DOM queries done via native DOM methods
  3. */
  4. /* global Element: true, Document: true, Node: true, window: true */
  5. exports.version = '0.10.a';
  6. exports.module = function(phantomas) {
  7. 'use strict';
  8. phantomas.setMetric('DOMqueries'); // @desc number of all DOM queries @offenders
  9. phantomas.setMetric('DOMqueriesWithoutResults'); // @desc number of DOM queries that retutned nothing @offenders
  10. phantomas.setMetric('DOMqueriesById'); // @desc number of document.getElementById calls
  11. phantomas.setMetric('DOMqueriesByClassName'); // @desc number of document.getElementsByClassName calls
  12. phantomas.setMetric('DOMqueriesByTagName'); // @desc number of document.getElementsByTagName calls
  13. phantomas.setMetric('DOMqueriesByQuerySelectorAll'); // @desc number of document.querySelector(All) calls
  14. phantomas.setMetric('DOMinserts'); // @desc number of DOM nodes inserts
  15. phantomas.setMetric('DOMqueriesDuplicated'); // @desc number of DOM queries called more than once
  16. phantomas.setMetric('DOMqueriesAvoidable'); // @desc number of repeated uses of a duplicated query
  17. // fake native DOM functions
  18. phantomas.once('init', function() {
  19. phantomas.evaluate(function() {
  20. (function(phantomas) {
  21. function querySpy(type, query, fnName, context, hasNoResults) {
  22. phantomas.emit('domQuery', type, query, fnName, context, hasNoResults); // @desc DOM query has been made
  23. }
  24. phantomas.spy(Document.prototype, 'getElementById', function(id) {
  25. phantomas.incrMetric('DOMqueriesById');
  26. phantomas.addOffender('DOMqueriesById', '#%s (in %s)', id, '#document');
  27. phantomas.enterContext({
  28. type: 'getElementById',
  29. callDetails: {
  30. arguments: ['#' + id]
  31. },
  32. backtrace: phantomas.getBacktrace()
  33. });
  34. }, function(result, args) {
  35. var id = args[0];
  36. querySpy('id', '#' + id, 'getElementById', '#document', (result === null));
  37. var moreData = {
  38. resultsNumber : (result === null) ? 0 : 1
  39. };
  40. phantomas.leaveContext(moreData);
  41. });
  42. // selectors by class name
  43. function selectorClassNameSpyBefore(className) {
  44. /*jshint validthis: true */
  45. var context = phantomas.getDOMPath(this);
  46. phantomas.incrMetric('DOMqueriesByClassName');
  47. phantomas.addOffender('DOMqueriesByClassName', '.%s (in %s)', className, context);
  48. phantomas.enterContext({
  49. type: 'getElementsByClassName',
  50. callDetails: {
  51. context: {
  52. length: 1,
  53. elements: [context]
  54. },
  55. arguments: ['.' + className]
  56. },
  57. backtrace: phantomas.getBacktrace()
  58. });
  59. }
  60. function selectorClassNameAfter(result, args) {
  61. /*jshint validthis: true */
  62. var className = args[0];
  63. var context = phantomas.getDOMPath(this);
  64. querySpy('class', '.' + className, 'getElementsByClassName', context, (result.length === 0));
  65. var moreData = {
  66. resultsNumber : (result && result.length > 0) ? result.length : 0
  67. };
  68. phantomas.leaveContext(moreData);
  69. }
  70. phantomas.spy(Document.prototype, 'getElementsByClassName', selectorClassNameSpyBefore, selectorClassNameAfter);
  71. phantomas.spy(Element.prototype, 'getElementsByClassName', selectorClassNameSpyBefore, selectorClassNameAfter);
  72. // selectors by tag name
  73. function selectorTagNameSpyBefore(tagName) {
  74. /*jshint validthis: true */
  75. var context = phantomas.getDOMPath(this);
  76. phantomas.incrMetric('DOMqueriesByTagName');
  77. phantomas.addOffender('DOMqueriesByTagName', '%s (in %s)', tagName, context);
  78. phantomas.enterContext({
  79. type: 'getElementsByTagName',
  80. callDetails: {
  81. context: {
  82. length: 1,
  83. elements: [context]
  84. },
  85. arguments: [tagName]
  86. },
  87. backtrace: phantomas.getBacktrace()
  88. });
  89. }
  90. function selectorTagNameSpyAfter(result, args) {
  91. /*jshint validthis: true */
  92. var tagName = args[0];
  93. var context = phantomas.getDOMPath(this);
  94. querySpy('tag name', tagName.toLowerCase(), 'getElementsByTagName', context, (result.length === 0));
  95. var moreData = {
  96. resultsNumber : (result && result.length > 0) ? result.length : 0
  97. };
  98. phantomas.leaveContext(moreData);
  99. }
  100. phantomas.spy(Document.prototype, 'getElementsByTagName', selectorTagNameSpyBefore, selectorTagNameSpyAfter);
  101. phantomas.spy(Element.prototype, 'getElementsByTagName', selectorTagNameSpyBefore, selectorTagNameSpyAfter);
  102. // selector queries
  103. function selectorQuerySpy(selector, context) {
  104. phantomas.incrMetric('DOMqueriesByQuerySelectorAll');
  105. phantomas.addOffender('DOMqueriesByQuerySelectorAll', '%s (in %s)', selector, context);
  106. }
  107. function selectorQuerySpyBefore(selector) {
  108. /*jshint validthis: true */
  109. var context = phantomas.getDOMPath(this);
  110. selectorQuerySpy(selector, context);
  111. phantomas.enterContext({
  112. type: 'querySelector',
  113. callDetails: {
  114. context: {
  115. length: 1,
  116. elements: [context]
  117. },
  118. arguments: [selector]
  119. },
  120. backtrace: phantomas.getBacktrace()
  121. });
  122. }
  123. function selectorQuerySpyAfter(result, args) {
  124. /*jshint validthis: true */
  125. var selector = args[0];
  126. var context = phantomas.getDOMPath(this);
  127. querySpy('selector', selector, 'querySelectorAll', context, (!result || result.length === 0));
  128. var moreData = {
  129. resultsNumber : result ? 1 : 0
  130. };
  131. phantomas.leaveContext(moreData);
  132. }
  133. function selectorAllQuerySpyBefore(selector) {
  134. /*jshint validthis: true */
  135. var context = phantomas.getDOMPath(this);
  136. selectorQuerySpy(selector, context);
  137. phantomas.enterContext({
  138. type: 'querySelectorAll',
  139. callDetails: {
  140. context: {
  141. length: 1,
  142. elements: [context]
  143. },
  144. arguments: [selector]
  145. },
  146. backtrace: phantomas.getBacktrace()
  147. });
  148. }
  149. function selectorAllQuerySpryAfter(result, args) {
  150. /*jshint validthis: true */
  151. var selector = args[0];
  152. var context = phantomas.getDOMPath(this);
  153. querySpy('selector', selector, 'querySelectorAll', context, (!result || result.length === 0));
  154. var moreData = {
  155. resultsNumber : (result && result.length > 0) ? result.length : 0
  156. };
  157. phantomas.leaveContext(moreData);
  158. }
  159. phantomas.spy(Document.prototype, 'querySelector', selectorQuerySpyBefore, selectorQuerySpyAfter);
  160. phantomas.spy(Document.prototype, 'querySelectorAll', selectorAllQuerySpyBefore, selectorAllQuerySpryAfter);
  161. phantomas.spy(Element.prototype, 'querySelector', selectorQuerySpyBefore, selectorQuerySpyAfter);
  162. phantomas.spy(Element.prototype, 'querySelectorAll', selectorAllQuerySpyBefore, selectorAllQuerySpryAfter);
  163. // count DOM inserts
  164. function appendChild(child, element, context, appended) {
  165. /*jshint validthis: true */
  166. // ignore appending to the node that's not yet added to DOM tree
  167. if (!element.parentNode) {
  168. return;
  169. }
  170. // don't count elements added to fragments as a DOM inserts (issue #350)
  171. // DocumentFragment > div[0]
  172. if (context.indexOf('DocumentFragment') === 0) {
  173. return;
  174. }
  175. phantomas.incrMetric('DOMinserts');
  176. phantomas.addOffender('DOMinserts', '"%s" appended to "%s"', appended, context);
  177. //phantomas.log('DOM insert: node "%s" appended to "%s"', appended, context);
  178. }
  179. function appendChildSpyBefore(child) {
  180. /*jshint validthis: true */
  181. var context = phantomas.getDOMPath(this);
  182. var appended = phantomas.getDOMPath(child);
  183. appendChild(child, this, context, appended);
  184. phantomas.enterContext({
  185. type: 'appendChild',
  186. callDetails: {
  187. context: {
  188. length: 1,
  189. elements: [context]
  190. },
  191. arguments: [appended]
  192. },
  193. backtrace: phantomas.getBacktrace()
  194. });
  195. }
  196. function insertBeforeSpyBefore(child) {
  197. /*jshint validthis: true */
  198. var context = phantomas.getDOMPath(this);
  199. var appended = phantomas.getDOMPath(child);
  200. appendChild(child, this, context, appended);
  201. phantomas.enterContext({
  202. type: 'insertBefore',
  203. callDetails: {
  204. context: {
  205. length: 1,
  206. elements: [context]
  207. },
  208. arguments: [appended]
  209. },
  210. backtrace: phantomas.getBacktrace()
  211. });
  212. }
  213. phantomas.spy(Node.prototype, 'appendChild', appendChildSpyBefore, function(result) {
  214. phantomas.leaveContext();
  215. });
  216. phantomas.spy(Node.prototype, 'insertBefore', insertBeforeSpyBefore, function(result) {
  217. phantomas.leaveContext();
  218. });
  219. phantomas.spy(Document.prototype, 'createElement', function(tagName) {
  220. phantomas.enterContext({
  221. type: 'createElement',
  222. callDetails: {
  223. arguments: [tagName]
  224. },
  225. backtrace: phantomas.getBacktrace()
  226. });
  227. }, function(result, args) {
  228. phantomas.leaveContext();
  229. });
  230. phantomas.spy(Document.prototype, 'createTextNode', function(text) {
  231. phantomas.enterContext({
  232. type: 'createTextNode',
  233. callDetails: {
  234. arguments: [text]
  235. },
  236. backtrace: phantomas.getBacktrace()
  237. });
  238. }, function(result, args) {
  239. phantomas.leaveContext();
  240. });
  241. phantomas.spy(Document.prototype, 'createDocumentFragment', function() {
  242. phantomas.enterContext({
  243. type: 'createDocumentFragment',
  244. callDetails: {
  245. arguments: []
  246. },
  247. backtrace: phantomas.getBacktrace()
  248. });
  249. }, function(result, args) {
  250. phantomas.leaveContext();
  251. });
  252. })(window.__phantomas);
  253. });
  254. });
  255. // report DOM queries that return no results (issue #420)
  256. phantomas.on('domQuery', function(type, query, fnName, context, hasNoResults) {
  257. // ignore DOM queries within DOM fragments (used internally by jQuery)
  258. if (context.indexOf('body') !== 0 && context.indexOf('#document') !== 0) {
  259. return;
  260. }
  261. if (hasNoResults === true) {
  262. phantomas.incrMetric('DOMqueriesWithoutResults');
  263. phantomas.addOffender('DOMqueriesWithoutResults', '%s (in %s) using %s', query, context, fnName);
  264. }
  265. });
  266. // count DOM queries by either ID, tag name, class name and selector query
  267. // @see https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-doctype
  268. var Collection = require('../../util/collection'),
  269. DOMqueries = new Collection();
  270. phantomas.on('domQuery', function(type, query, fnName, context) {
  271. phantomas.log('DOM query: by %s - "%s" (using %s) in %s', type, query, fnName, context);
  272. phantomas.incrMetric('DOMqueries');
  273. if (context && context.indexOf('DocumentFragment') === -1) {
  274. DOMqueries.push(type + ' "' + query + '" with ' + fnName + ' (in context ' + context + ')');
  275. }
  276. });
  277. phantomas.on('report', function() {
  278. DOMqueries.sort().forEach(function(query, cnt) {
  279. if (cnt > 1) {
  280. phantomas.incrMetric('DOMqueriesDuplicated');
  281. phantomas.incrMetric('DOMqueriesAvoidable', cnt - 1);
  282. phantomas.addOffender('DOMqueriesDuplicated', '%s: %d queries', query, cnt);
  283. }
  284. });
  285. });
  286. };