☰

ScriptTest

Javascript Performance Tests

  1. // ==UserScript==
  2. // @name         ScriptTest
  3. // @version      1.5
  4. // @description  Javascript Performance Tests
  5. // @author       Danny Hinshaw
  6. // @match        https://www.google.com/scripttest
  7. // @namespace    http://nulleffort.com/
  8. // ==/UserScript==
  9.  
  10. (function() {
  11. 	'use strict';
  12. 	/*jshint esnext: true */
  13.  
  14. 	// JS Test UI Object
  15. 	const TEST_UI = {
  16. 		runFlag  : true,
  17. 		errorFlag: false,
  18. 		templates: {
  19. 			favicon   : function() {
  20. 				const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  21. 				link.type  = 'image/x-icon';
  22. 				link.rel   = 'shortcut icon';
  23. 				link.href  = 'http://nulleffort.com/wp-content/uploads/2016/11/cropped-favicon-32x32.png';
  24. 				return document.querySelector('head').appendChild(link);
  25. 			},
  26. 			bootStrap : function() {
  27. 				const bootLink = document.createElement('link');
  28. 				bootLink.rel   = 'stylesheet';
  29. 				bootLink.href  = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
  30. 				const fontLink = document.createElement('link');
  31. 				fontLink.rel   = 'stylesheet';
  32. 				fontLink.href  = 'https://fonts.googleapis.com/css?family=Ubuntu';
  33. 				const links    = [bootLink, fontLink];
  34.  
  35. 				return links.forEach(link => document.querySelector('head').appendChild(link));				
  36. 			},
  37. 			jQueryLib: function() {
  38. 				const jQ1 = `<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>`;
  39. 				const jQ2 = `<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>`;
  40. 				const jQ3 = `<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>`;
  41. 				const lib = document.getElementById('library').value;
  42. 				switch (lib) { case '1': return jQ1; case '2': return jQ2; case '3': return jQ3; default: return ''; }
  43. 			},
  44. 			body      : `
  45. 				<header>
  46. 					<h1>< ScriptTest /></h1>
  47. 					<p>We're going the distance... we're going for speed.</p>
  48. 				</header>
  49. 				<main>
  50. 				  <div id="intro">
  51. 					  <div id="instructions">
  52. 				        <p>
  53. 				          To use ScriptTest, enter any html you may need for your test scripts in the html box (not required). Do not worry about headers etc, the html is already set up, you are essentially just entering elements into a body.
  54. 				        </p>
  55. 				        <p>
  56. 				          Add as many test boxes as the Javascript snippets you'd like to test. Each editor will be treated as a separate test case. You do not need to add any loops as ScriptTest will take care of that for you (just select from the settings how many iterations you want for testing).
  57. 				        </p>
  58. 					</div>
  59.               
  60.                     <div id="settings" class="col-xs-12">
  61. 			          <h3 class="row-xs-12">Settings</h3>
  62.                       <div class="col-xs-12">
  63. 					      <div class="setting_cont row-xs-6">
  64. 				              <span> Iterations:</span>
  65. 				              <select id="iterations" class="form-control">
  66. 				                <option value="101">100</option>
  67. 				                <option value="1001">1,000</option>
  68. 				                <option value="10001">10,000</option>
  69. 				                <option value="100001">100,000</option>
  70. 				              </select>
  71. 					      </div>
  72. 					      <div class="setting_cont row-xs-6">
  73. 				              <span> Library:</span>
  74. 				              <select id="library" class="form-control">
  75. 				                <option value="0">None</option>
  76. 				                <option value="3">jQuery 3.2.1</option>
  77. 				                <option value="2">jQuery 2.2.4</option>
  78. 				                <option value="1">jQuery 1.12.4</option>
  79. 				              </select>
  80. 					      </div>
  81.                       </div>
  82.                       <div class="col-xs-12">
  83. 					    <div class="setting_cont row-xs-6">
  84. 				           <span>Click to add more tests:</span>
  85. 				           <button id="add_btn" class="btn btn-outline-primary">Add Test</button>
  86. 					     </div>
  87. 					     <div class="setting_cont row-xs-6">
  88. 				           <span>Click to remove all tests:</span>
  89. 				           <button id="remove_all_btn" class="btn btn-outline-primary">Remove Tests</button>
  90. 					     </div>
  91. 					     <br>
  92. 				       </div>
  93.                      </div>
  94. 				  </div>
  95. 				  <div id="html_div">
  96. 					  <div class="html_editor">
  97. 					  	<br>
  98. 					    <label for="html">HTML</label>
  99. 					    <textarea id="html" placeholder="Enter HTML" cols="70" rows="15"></textarea>
  100. 						</div>
  101. 				  </div>
  102. 				  <div id="test_1_div" class="js_div">
  103. 					  <div class="js_editor">
  104. 					  	<br>
  105. 					    <label for="test_1">Javascript Test 1</label>
  106. 					    <textarea id="test_1" placeholder="Enter Javascript" cols="70" rows="15"></textarea>
  107. 					  </div>
  108. 				  </div>
  109. 				  <div id="test_commands">
  110. 				  <br>
  111. 				    <span>Click to run tests</span>
  112. 				    <button id="start_btn" class="btn btn-outline-primary">Run</button>
  113. 				  </div>
  114. 				  <div id="res-text-cont">
  115. 				  	<p id="results_label">Results</p>
  116. 				  	<p id="results_instruct">*The first test is used as a base to compare the rest.</p>
  117. 				  </div>
  118. 				  <div id="results_table">
  119. 				  	<div class="results_body">
  120. 				  	</div>
  121. 				  </div>
  122. 				</main>
  123. 				<footer>
  124. 				  <span>This script is currently in beta. There are no gaurantees it will work with your browser... or work at all.</span>
  125. 				</footer>
  126.   <div id="blackout">
  127. <div class="circle1"></div>
  128. <div class="circle2"></div>
  129. <div class="circle3"></div>
  130. </div>
  131. `,
  132. 			css       : `
  133. 				<style>`+
  134.  
  135. 				/***** Main CSS Styles ****/
  136.  
  137. 				   `body { color: white; overflow-x: hidden; }
  138. 					header { align: left; background-color: #1a1b1c; box-shadow: 0px 2px 5px #201717; margin: -10px -10px 1px; padding: 25px; }
  139. 					header > h1 { color: #72f766; font-family: 'Ubuntu', sans-serif; font-size: 4rem; letter-spacing: .15rem; margin-left: 25px; text-align: center; -webkit-font-smoothing: antialiased }
  140. 					header > p { font-family: 'Ubuntu', sans-serif; font-style: italic; margin-left: 25px; text-align: center; -webkit-font-smoothing: antialiased }
  141. 					body { background-color: #3c434f}
  142. 					main { padding: 25px; font-family: 'Ubuntu', sans-serif; font-size: 1.5rem; letter-spacing: .05em; }
  143.                     #instructions { padding-bottom: 2rem; }
  144. 					#instructions > *, #settings > * , #test_commands, #res-text-cont { margin-left: 1.5em; }
  145. 					#html_div > *, div.js_div > * { margin-left: 3em }
  146. 					p { color: #E7DFDD }
  147. 					#settings { display: inline-block; padding-bottom: 1.75em; }
  148.                     h3 { color: #72f766; }
  149. 					#html_div { border-top: ridge; }
  150. 					div.setting_cont { display: inline-block; padding: .5em; width: auto; }
  151.                     .form-control { display: inline-flex; width: 10rem; }
  152.                     .btn { background-color: rgb(23, 39, 67); }
  153.                     .btn.focus, .btn:focus, .btn:hover { color: rgb(183, 202, 184); text-decoration: underline; }
  154.                     label { color: #72f766; }
  155. 					label, textarea { display: block; margin: 10px 0; }
  156. 					textarea { background-color: #1d1f20; color: #85d17e; font-family: monospace; font-size: 15px; }
  157. 					.js_div { border-top: ridge }
  158.                     footer { padding: 2rem; }
  159. 					footer > span { font-family: Andale Mono, monospace; font-style: italic; }
  160. 					iframe { display: none }
  161.                     #errDIV { background-color: #800000; border-style: inset; margin-top: 15px; padding: 1px 10px 10px; }
  162. 					#res-text-cont { display: none; }
  163. 					#results_label { color: #72f766; font-size: 1.5em; padding-top: 3rem; }
  164. 					#results_table { display: table; visibility: hidden; width: 100%; }
  165. 					.results_row { display: table-row }
  166. 					.test_rank > span::after { content: attr(data-rel); margin-left: 5px; }
  167. 					.cell { background-color: #161F2F; border: 1px solid #999999; display: table-cell; padding: 3px 10px; }
  168. 					.results_body { display: table-row-group }`+
  169.  
  170. 				/**** Loader CSS ***/
  171. 				  `
  172. #blackout {
  173.   height: 100%;
  174.   width: 100%;
  175.   left:0;
  176.   bottom:0;
  177.   background: rgba(61, 59, 59, 0.69);
  178.   display: none;
  179.   overflow: hidden;
  180.   position: absolute;
  181.   z-index: 10;
  182. }
  183. .circle1 {
  184.   display: inline-flex;
  185.   height: 10rem;
  186.   width: 10rem;
  187.   border-radius: 50%;
  188.   border: .75rem solid rgba(206, 157, 227, 0.66);
  189.   margin: 40% auto;
  190.   margin-left: 40%;
  191.   animation: load 1.5s 0.1s infinite;
  192.   opacity: 0.8;
  193. }
  194. .circle2 {
  195.   display: inline-flex;
  196.   height: 10rem;
  197.   width: 10rem;
  198.   border-radius: 50%;
  199.   border: .7rem solid rgba(132, 138, 235, 0.64);
  200.   margin: 0 auto;
  201.   margin-left: -45px;
  202.   animation: load 1.5s 0.2s infinite;
  203.   opacity: 0.8;
  204. }
  205. .circle3 {
  206.   display: inline-flex;
  207.   height: 10rem;
  208.   width: 10rem;
  209.   border-radius: 50%;
  210.   border: .6rem solid rgba(90, 177, 171, 0.64);
  211.   margin: 0 auto;
  212.   margin-left: -45px;
  213.   animation: load 1.5s 0.3s infinite;
  214.   opacity: 0.8;
  215. }
  216. @keyframes load {
  217.   from {
  218.     transform: rotate3d(1,2,3, 0deg);
  219.   }
  220.   
  221.   50% {
  222.     transform: rotate3d(1,2,3, 360deg);
  223.   }
  224.   
  225.   to {
  226.     transform: rotate3d(1,2,3, 0deg);
  227.   }
  228. }				</style>`,
  229. 			mainScript: function(j) {
  230. 			return `
  231. 				<html lang="en">
  232. 					<head>
  233. <meta http-equiv="cache-control" content="max-age=0" />
  234. <meta http-equiv="cache-control" content="no-cache" />
  235. <meta http-equiv="expires" content="0" />
  236. <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  237. <meta http-equiv="pragma" content="no-cache" />
  238. ${j}
  239. 					<script>
  240. 						window.addEventListener('load', () => {
  241. 							window.parent.dispatchEvent(new Event('perf:load'));
  242. 						});
  243. 					</script>
  244. 					<script id="_script_">` +
  245. 					/************************ Iframe Performance Function ******************************/
  246. 						`window.addEventListener('perf:exec', e => {
  247. 							const {fn} = e.detail;
  248. 							let t0, t1;
  249. 							try {
  250. 								let script = new Function(fn);
  251. 								document.body.innerHTML = window.parent.document.body.querySelector('iframe').dataset.body;
  252. 								t0 = performance.now();
  253. 								script();
  254. 								t1 = performance.now();
  255.                                 script = null;
  256. 							} catch(err) {
  257. 								const event = new CustomEvent('perf:error', {detail: {error: err}});
  258. 								window.parent.dispatchEvent(event);
  259. 								return console.error(err);
  260. 							}
  261. 							const event = new CustomEvent('perf:done', {detail: {time: t1-t0}});
  262. 							e.ownerObject.dispatch(event);
  263. 						});`+
  264. 					'</script></head><body></body></html>';
  265. 			},
  266. 			id        : () => {
  267. 				return document.querySelectorAll('textarea').length;
  268. 			},
  269. 			editor    : function() {
  270. 				// Editor template
  271. 				let editor       = document.createElement('div');
  272. 				editor.id        = 'test_' + TEST_UI.templates.id() + '_div';
  273. 				editor.className = "js_div";
  274. 				editor.innerHTML = `
  275. 				<div class="js_editor">
  276. 				<label for="test_${TEST_UI.templates.id()}">Javascript Test ${TEST_UI.templates.id()}</label>
  277. 				<button class="btn btn-outline-primary remove_btn">Remove Test ${TEST_UI.templates.id()}</button>
  278. 				<textarea id="test_${TEST_UI.templates.id()}" class="js_editor" placeholder="Enter Javascript" cols="70" rows="15"></textarea>
  279. 				</div>`;
  280.  
  281. 				// Set button styles for focus/blur
  282. 				document.querySelectorAll('button').forEach(button => button.addEventListener("mouseup", e => e.target.blur()));
  283. 				
  284. 				// Dynamic Editor Removal
  285. 				document.querySelector('main').insertBefore(editor, document.getElementById('test_commands'));
  286. 				[].forEach.call(document.querySelectorAll('button.remove_btn'), b => b.onclick = () => {
  287. 					b.parentNode.parentNode.remove();
  288. 					rename();
  289. 				});
  290.  
  291. 				function rename() {
  292. 					let i = 1;
  293. 					[].forEach.call(document.querySelectorAll('div.js_div ~ div.js_div'), e => {
  294. 						i++;
  295. 						e.querySelector('button.remove_btn').textContent = 'Remove Test '+i;
  296. 						e.querySelector('div>label').textContent         = 'Javascript Test '+i;
  297. 						e.querySelector('div>textarea').id               = 'test_'+i;
  298. 						e.id                                             = 'test_'+i+'_div';
  299. 					});
  300. 				}
  301. 			},
  302. 		},
  303.  
  304. 		iframe   : {
  305. 			create: function(html) {
  306. 				const iframe        = document.createElement('iframe');
  307. 				iframe.id           = '__iframe';
  308. 				iframe.srcdoc       = TEST_UI.templates.mainScript(TEST_UI.templates.jQueryLib());
  309. 				iframe.dataset.body = html;
  310.  
  311. 				document.body.append(iframe);
  312. 				TEST_UI.frameDOM = { iframe: iframe, dom: iframe.contentDocument, window: iframe.contentWindow };
  313. 				return TEST_UI.frameDOM;
  314. 			},
  315. 		},
  316. 		perfFunc : function() {
  317.  
  318. 			console.log('Testing in progress...');
  319.  
  320. 			TEST_UI.runFlag    = false;
  321. 			TEST_UI.iterations = Number(document.querySelector('#iterations').value);
  322. 			const textarea     = document.querySelectorAll('textarea:not(#html)'),
  323. 				  resultTable  = document.getElementById('results_label'),
  324. 				  resultBody   = document.querySelector('.results_body');
  325.  
  326. 			// Check for values in textareas before running further
  327. 			for (let i = 0; i < textarea.length; i++) {
  328. 				const val = textarea[i].value;
  329.  
  330. 				// Handling for UI errors (empty textareas)
  331. 				if (!val) {
  332. 					TEST_UI.onError(textarea[i]);
  333. 					return console.log('Script in', textarea[i].id, 'has no value');
  334. 				} else if (document.getElementById('errDIV')) {
  335. 					TEST_UI.errorFlag = false;
  336. 					document.getElementById('errDIV').remove();
  337. 					[].forEach.call(document.querySelectorAll('textarea:not(#html)'), t => {
  338. 						if (t.style.backgroundColor === 'red')
  339. 							t.style.backgroundColor = "#1d1f20";
  340. 					});
  341. 				}
  342. 			}
  343. 			
  344. 			function genTable(num, id, mean) {
  345.  
  346. 				TEST_UI.commands.loaded();
  347. 				// Check if table has yet been displayed
  348. 				if (resultTable.offsetParent === null && !TEST_UI.errorFlag) resultTable.style.display = 'block';
  349.  
  350. 				resultBody.innerHTML += `
  351. 				  <div class="results_row">
  352. 				  	<div class="cell"><p class="test_number">${id.replace('test_', 'Test ')}</p></div>
  353. 					<div class="cell"><p class="test_time">${Math.round(mean*1000000)/1000000 + ' milliseconds'}</p></div>
  354. 					<div class="cell"><p class="test_rank"><span></span></p></div>
  355. 				  </div>`;
  356.  
  357. 			  	const tableTimes = Array.from(resultBody.querySelectorAll('.test_time'));
  358.  
  359. 				if (tableTimes.length === textarea.length) {
  360. 					const ranks = resultBody.querySelectorAll('.test_rank>span');
  361. 					tableTimes.map(({ textContent:ms }) => ms.split(' ')[0])
  362. 					.map((time, _, a) => 100 * (a[0] / time - 1))
  363. 					.forEach((v, i) => {
  364. 						ranks[i].dataset.rel = v ? (v > 0 ? 'faster' : 'slower') : '';
  365. 						ranks[i].textContent = Math.abs(v || 100).toFixed(2) + '%';
  366. 					});
  367. 				}
  368. 			}
  369.  
  370. 			function end(num, id, times) {
  371. 				times.shift();
  372. 				const mean = times.reduce((a, b) => a + b) / TEST_UI.iterations;
  373. 				genTable(num, id, mean);
  374. 				TEST_UI.templates.favicon();
  375. 			}
  376.  
  377. 			for (let i = 0; i < textarea.length; i++) {
  378. 				
  379. 				const val = textarea[i].value;
  380.  
  381. 				TEST_UI.runners = [];
  382. 				let j           = TEST_UI.iterations;
  383.  
  384. 				while (j--) {
  385. 					if (TEST_UI.runFlag === false) {
  386. 						const promise = new Promise(resolve => {
  387. 							const pf = new PerfRunner(TEST_UI.frameDOM);
  388. 							pf.listen('perf:done', e => resolve(e.detail.time));
  389. 							pf.run(val);
  390. 						});
  391. 						TEST_UI.runners.push(promise);
  392. 					}
  393. 				}
  394. 				Promise.all(TEST_UI.runners).then(end.bind(null, i, textarea[i].id));
  395. 			}//);
  396. 			
  397. 			TEST_UI.runFlag = true;
  398. 			document.getElementById('__iframe').remove();
  399. 		},
  400. 		onError  : function(err) {
  401.  
  402. 			TEST_UI.commands.loaded();
  403. 			
  404. 			if (document.getElementById('results_label').offsetParent !== null)
  405. 				document.getElementById('results_label').style.display = 'none';
  406.  
  407. 			if (document.getElementById('errDIV'))
  408. 				document.getElementById('errDIV').remove();
  409.  
  410. 			const errDiv      = document.createElement('div');
  411. 			errDiv.id         = 'errDIV';
  412. 			TEST_UI.errorFlag = true;
  413. 			TEST_UI.runFlag   = true;
  414. 			document.getElementById('results_label').parentNode.append(errDiv);
  415.  
  416. 			if (err.detail) {
  417. 				errDiv.innerHTML = `<h2>Error:</h2><p>${err.detail.error.stack}</p>`;
  418. 			} else {
  419. 				errDiv.innerHTML          = '<h2>Error: One or more JS editors is empty</h2>';
  420. 				err.style.backgroundColor = 'red';
  421. 			}
  422.  
  423. 		},
  424. 		commands : {
  425. 			loading   : function() {
  426. 				[].forEach.call(document.querySelectorAll('div.results_row'), r => r.remove());
  427.  
  428. 				window.scrollTo(0, 0);
  429. 				document.body.style.overflowY                          = 'hidden';
  430. 				document.getElementById('blackout').style.display      = 'block';
  431. 				document.getElementById('res-text-cont').style.display = 'none';
  432. 			},
  433. 			loaded    : function() {
  434. 				document.body.style.overflowY                          = 'auto';
  435. 				document.getElementById('blackout').style.display      = '';
  436. 				document.getElementById('res-text-cont').style.display = 'block';
  437. 				window.scrollTo(0,document.body.scrollHeight);
  438. 			},
  439. 			removeAll : function() {
  440. 				[].forEach.call(document.querySelectorAll('div.js_div ~ div.js_div'), e => e.remove());
  441. 				document.getElementById('test_1').value = "";
  442. 			},
  443. 			removeTest: function(b) {
  444. 				b.parentNode.remove();
  445. 			},
  446. 			run       : function() {
  447. 				if (TEST_UI.runFlag) {
  448. 					TEST_UI.commands.loading();
  449. 					TEST_UI.iframe.create(document.querySelector('#html').value);
  450. 					document.getElementById('results_table').style.visibility = 'visible';
  451. 					TEST_UI.runFlag                                           = true;
  452. 				}
  453. 			},
  454. 		},
  455. 		init    : function() {
  456.  
  457. 			console.log('ScriptTest started');
  458.  
  459. 			document.querySelector('style').remove();
  460.  
  461. 			// Setup UI
  462. 			// Set favicon & BootStrap
  463. 			TEST_UI.templates.favicon();
  464. 			TEST_UI.templates.bootStrap();
  465. 			document.head.innerHTML += TEST_UI.templates.css;
  466. 			document.body.innerHTML = TEST_UI.templates.body;
  467. 			document.title          = 'ScriptTest';
  468.  
  469. 			// Set button actions
  470. 			document.getElementById('add_btn').onclick        = () => TEST_UI.templates.editor();
  471. 			document.getElementById('remove_all_btn').onclick = () => TEST_UI.commands.removeAll();
  472. 			document.getElementById('start_btn').onclick      = () => TEST_UI.commands.run();
  473. 			
  474. 			// Set button styles for focus/blur
  475. 			document.querySelectorAll('button').forEach(button => button.addEventListener("mouseup", e => e.target.blur()));
  476. 			
  477. 			// Custom window event listener
  478. 			window.addEventListener('perf:load', TEST_UI.perfFunc);
  479. 			window.addEventListener('perf:error', TEST_UI.onError);
  480. 		}
  481. 	};
  482.  
  483. 	//Class to handle async promises in perfFunc
  484. 	class PerfRunner {
  485. 		constructor(iframe) {
  486. 			this.iframe    = iframe;
  487. 			this.listeners = {};
  488. 		}
  489.  
  490. 		run(fn) {
  491. 			const event       = new CustomEvent('perf:exec', { detail: { fn: fn } });
  492. 			event.ownerObject = this;
  493. 			this.iframe.window.dispatchEvent(event);
  494. 		}
  495.  
  496. 		listen(type, callback) {
  497. 			if (!this.listeners[type])
  498. 			this.listeners[type] = [];
  499. 			this.listeners[type].push(callback);
  500. 		}
  501.  
  502. 		dispatch(event) {
  503. 			if (!this.listeners[event.type]) return;
  504. 			this.listeners[event.type].forEach(fn => fn.call(this, event));
  505. 		}
  506. 	}
  507.  
  508. 	// Initialize
  509. 	if (!window.location.href.includes('scripttest')) {
  510. 		// Add link for ScriptTest to google.com
  511. 		const parentDiv = document.querySelector('div.gb_zf.gb_R.gb_Pf.gb_Hf'),
  512. 			  firstBtn  = document.querySelectorAll('div.gb_Q.gb_R')[1],
  513. 			  startBtn  = document.createElement('div');
  514.  
  515. 		startBtn.className = 'gb_Q gb_R';
  516. 		startBtn.innerHTML = '<a class="gb_P" href="https://www.google.com/scripttest">ScriptTest</a>';
  517. 		parentDiv.insertBefore(startBtn, firstBtn);
  518. 	} else {
  519. 		// Load UI
  520. 		TEST_UI.init();
  521. 	}
  522.  
  523. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址