diff --git a/README.md b/README.md index 0c51bd2..00a3621 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,12 @@ Please note that [Octane is retired](https://v8project.blogspot.com/2017/04/reti [Run Octane 2 now!](http://chromium.github.io/octane/) For more information, check out the [homepage](https://developers.google.com/octane/), [benchmark reference](https://developers.google.com/octane/benchmark), or [FAQ](https://developers.google.com/octane/faq). + +## New UI Added + +[Run Octane 2 with new UI!](https://mohan-chinnappan-n2.github.io/2019/lex/octane/octane2.html) + +![new UI](img/iphone-octane-1.png) + + + diff --git a/css/app.css b/css/app.css new file mode 100644 index 0000000..911a575 --- /dev/null +++ b/css/app.css @@ -0,0 +1,80 @@ + +/* + +app.css + + +*/ +.box-header { + float:left; +} + +.cap-it { + text-transform: uppercase; +} + +/* Show it is fixed to the top */ +body { + min-height: 75rem; + padding-top: 4.5rem; + } + +h4 { + visibility:hidden; +} + +.hidden { + visibility: hidden; +} + +.no-display { + display: none; +} +.top-margin-40 { + margin-top:80px; +} + +.underline { + border-bottom: 1px solid turquoise; +} + +/* sticky footer */ +html { + position: relative; + min-height: 100%; + } + body { + /* Margin bottom by footer height */ + margin-bottom: 60px; + } + .footer { + position: absolute; + bottom: 0; + width: 100%; + /* Set the fixed height of the footer here */ + height: 60px; + line-height: 60px; /* Vertically center the text there */ + background-color: #f5f5f5; + } + + + + .footer > .container { + padding-right: 15px; + padding-left: 15px; + } + + code { + font-size: 80%; + } + + .code-ta { + background-color: black; + color: whitesmoke; + font-family: Monaco, Arial, Helvetica, sans-serif; + font-size: 13px; + } + + + + diff --git a/help.html b/help.html new file mode 100644 index 0000000..4884a14 --- /dev/null +++ b/help.html @@ -0,0 +1,272 @@ + + + + + + Help + + + + + + + + + + + + + + + + +
+ +
+
+
How the Octane score is arrived?
+ +

+ Octane 2.0 consists of 17 tests, 4 more than Octane v1. + We have chosen each test in order to cover most use cases encountered in the real web
+ + We believe a high-performance JavaScript engine should be able to perform well on real-world code, + not just synthetic benchmarks. That is how the 4 new tests, have been selected: + +

    +
  • NavierStoke
  • +
  • SplayLatency
  • +
  • zlib
  • +
  • TypeScript
  • + +
+ + +

+
+
+
+
+
Geometric Mean
+

+ The final score is the geometric mean + of the + single scores. +
+ + +

+
+ +
+ +

Sample Scores

+ +
macOS
+ macOS-1 +
+
iPhone 8 Plus
+ iphone-1 + + + + + + +

Sample Graph for the Octane Score

+
+ + + + + + + +
+ + + + \ No newline at end of file diff --git a/img/iphone-octane-1.png b/img/iphone-octane-1.png new file mode 100644 index 0000000..fafd843 Binary files /dev/null and b/img/iphone-octane-1.png differ diff --git a/img/macOS-1.png b/img/macOS-1.png new file mode 100644 index 0000000..a1b19a6 Binary files /dev/null and b/img/macOS-1.png differ diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..014505f --- /dev/null +++ b/js/app.js @@ -0,0 +1,373 @@ +/* app.js + + +Original code : Chromium Authors + +Modifications: Mohan Chinnappan + +Feb-23-2020 + +*/ + + var SCORES = {tests: {}}; + + var completed = 0; + var benchmarks = BenchmarkSuite.CountBenchmarks(); + var percentCompleted = 0; + var success = true; + var latencyBenchmarks = ["Splay", "Mandreel"]; + var skipBenchmarks = + typeof skipBenchmarks === "undefined" ? [] : skipBenchmarks; + + function ShowBox(name) { + var box = document.getElementById("Box-" + name); + var scoreProgress = document.getElementById('score-progress'); + box.style.visibility = 'visible'; + + + percentCompleted = ((++completed) / benchmarks) * 100 ; + scoreProgress.style.width = `${percentCompleted}%`; + scoreProgress.innerHTML=`${percentCompleted.toFixed(0)}%`; + + // console.log('% completed: ' + percentCompleted); + + latencyBenchmarks.forEach(function (entry) { + if (name.valueOf() === entry.valueOf()) { + var box1 = document.getElementById("Box-" + name + "Latency"); + box1.style.visibility = 'visible'; + } + }); + } + + function AddResult(name, result) { + // console.log(name + ': ' + result); + let item = { "category": name, amount:parseInt(result)}; + spec2.data.values.push(item); + SCORES.tests[name] = parseInt(result); + + var box = document.getElementById("Result-" + name); + box.innerHTML = result.toLocaleString(); + // console.log(SCORES); + } + + function AddError(name, error) { + console.log(name + ": " + error.message); + if (error == "TypedArrayUnsupported") { + AddResult(name, 'Unsupported<\/b>'); + } else if (error == "PerformanceNowUnsupported") { + AddResult(name, 'Timer error<\/b>'); + } else { + AddResult(name, 'Error'); + } + success = false; + } + + function AddScore(score) { + let runFPS = document.getElementById('runFPS'); + let fpsOut = document.getElementById('fps'); + var status = document.getElementById("main-banner"); + let memInfo = document.getElementById('mem-info'); + var scoreProgress = document.getElementById('score-progress'); + if (success) { + status.innerHTML = "Octane Score: " + score.toLocaleString(); + runFPS.style.visibility ='visible'; + fpsOut.style.visibility ='visible'; + memInfo.style.visibility ='visible'; + document.getElementById('o-spinner').style.visibility='hidden'; + percentCompleted = 100; + + scoreProgress.style.width = `${percentCompleted}%`; + scoreProgress.innerHTML=`${percentCompleted.toFixed(0)}%`; + scoreProgress.classList.remove('progress-bar-animated'); + + SCORES['ua'] = navigator.userAgent; + SCORES['score'] = parseInt(score); + + spec2.title = 'OCTANE SCORE: ' + score.toLocaleString(); + // + ' ' + navigator.userAgent; + + vegaEmbed('#vis', spec2); + + document.getElementById('finalScore').value = JSON.stringify(SCORES, null, 4); + document.getElementById('finalScore').style.display='block'; + + + } else { + status.innerHTML = "Octane Score (incomplete): " + score; + console.log("Octane Score (incomplete): " + score); + } + document.getElementById("alertbox").style.visibility = 'hidden'; + } + + + + function Run() { + + document.getElementById('o-spinner').style.visibility = 'visible'; + + let runFPS = document.getElementById('runFPS'); + let fpsOut = document.getElementById('fps'); + let memInfo = document.getElementById('mem-info'); + + + let userAgent = navigator.userAgent; + document.getElementById('userAgent').innerHTML = + ` + ${userAgent}`; + document.getElementById('ua-card').style.visibility='visible'; + document.getElementById('webGL').style.visibility='visible'; + + findWebGL(document.getElementById('webGL')); + + + runFPS.addEventListener('click', function() { + getFPS(fpsOut); + }) + + if (navigator.userAgent.indexOf('Chrome') > 0 ) { + document.getElementById('mem-info').innerHTML = getMemoryInfo(); + } + + // let frameTime = 10000; + // Report the fps only every second, to only lightly affect measurements + // setInterval(function(){ fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps"; },1000); + + let h3s = document.getElementsByTagName('h3') + // console.log(h3s); + for (let i = 0; i < h3s.length; i++) { + h3s[i].style.visibility = 'visible'; + } + + document.getElementById("main-banner").innerHTML = "Running Octane..."; + // append the progress bar elements.. + var anchor = document.getElementById("run-octane"); + var parent = document.getElementById("main-container"); + parent.appendChild(document.getElementById("inside-anchor")); + parent.removeChild(anchor); + + + BenchmarkSuite.RunSuites({ + NotifyStart: ShowBox, + NotifyError: AddError, + NotifyResult: AddResult, + NotifyScore: AddScore + }, + skipBenchmarks); + + + } + + function CheckCompatibility() { + // If no Typed Arrays support, show warning label. + var hasTypedArrays = typeof Uint8Array != "undefined" && + typeof Float64Array != "undefined" && + typeof (new Uint8Array(0)).subarray != "undefined"; + + if (!hasTypedArrays) { + console.log("Typed Arrays not supported"); + document.getElementById("alertbox").style.display = "block"; + } + if (window.document.URL.indexOf('skip_zlib=1') >= 0) + skipBenchmarks.push("zlib"); + if (window.document.URL.indexOf('auto=1') >= 0) + Run(); + } + + function Load() { + setTimeout(CheckCompatibility, 200); + } + + + function getMemoryInfo(para) { + + let performance = window.performance; + if (performance) { + return ` + Memory Info (bytes)
+ Total Heap Size: ${performance.memory.totalJSHeapSize.toLocaleString()}
+ Used Heap Size: ${performance.memory.usedJSHeapSize.toLocaleString()}
+ Heap Size Limit: ${performance.memory.jsHeapSizeLimit.toLocaleString()}
+ + ` + } else { + return ""; + } + } + + + function findWebGL(paragraph) { + // Create canvas element. The canvas is not added to the + // document itself, so it is never displayed in the + // browser window. + var canvas = document.createElement("canvas"); + // Get WebGLRenderingContext from canvas element. + var gl = canvas.getContext("webgl") || + canvas.getContext("experimental-webgl"); + // Report the result. + if (gl && gl instanceof WebGLRenderingContext) { + paragraph.innerHTML = + `Your browser supports WebGL and has ${gl.getSupportedExtensions().length} extensions.
+ Version: ${gl.getParameter(gl.VERSION)}
+ Vendor : ${gl.getParameter(gl.VENDOR)}
+ Shading Lang Ver: ${gl.getParameter(gl.SHADING_LANGUAGE_VERSION)}
+ + ` + + } else { + paragraph.innerHTML = "Failed to get WebGL context. " + + "Your browser or device may not support WebGL."; + } + } + + + + + function getFPS (loc) { + var before,now,fps; + before=Date.now(); + fps=0; + requestAnimationFrame( + + function loop(){ + + now=Date.now(); + fps=Math.round(1000/(now-before)); + before=now; + requestAnimationFrame(loop); + loc.innerHTML = 'FPS: ' + fps; + } + ); + } + + // graphing + let spec = { + "$schema": "https://vega.github.io/schema/vega/v5.json", + "width": 1000, + "height": 400, + "padding": 5, + "title": "OCTANE SCORE", + + "data": [ + { + "name": "table", + "values":[ ] + } + ], + + "signals": [ + { + "name": "tooltip", + "value": {}, + "on": [ + {"events": "rect:mouseover", "update": "datum"}, + {"events": "rect:mouseout", "update": "{}"} + ] + } + ], + + "scales": [ + { + "name": "xscale", + "type": "band", + "domain": {"data": "table", "field": "category"}, + "range": "width", + "padding": 0.3, + "round": true + }, + { + "name": "yscale", + "domain": {"data": "table", "field": "amount"}, + "nice": true, + "range": "height" + } + ], + + "axes": [ + {"orient": "bottom", "scale": "xscale","title": "TESTS"}, + {"orient": "left", "scale": "yscale", "title": "SCORE"} + ], + + "marks": [ + { + "type": "rect", + "from": {"data":"table"}, + "encode": { + "enter": { + "x": {"scale": "xscale", "field": "category"}, + "width": {"scale": "xscale", "band": 1}, + "y": {"scale": "yscale", "field": "amount"}, + "y2": {"scale": "yscale", "value": 0} + }, + "update": { + "fill": {"value": "steelblue"} + }, + "hover": { + "fill": {"value": "turquoise"} + } + } + }, + { + "type": "text", + "encode": { + "enter": { + "align": {"value": "center"}, + "baseline": {"value": "bottom"}, + "fill": {"value": "black"} + }, + "update": { + "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, + "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, + "text": {"signal": "tooltip.amount"}, + "fillOpacity": [ + {"test": "datum === tooltip", "value": 0}, + {"value": 1} + ] + } + } + }, + + + + ] + }; + + + let spec2 = { + "$schema": "https://vega.github.io/schema/vega-lite/v4.json", + "title": "OCTANE SCORE", + "width": 800, + "height": 600, + "data": { + "values": [ + + + ] + + }, + + + "encoding": { + "y": {"field": "category", "type": "ordinal", "title": "TESTS"}, + "x": {"field": "amount", "type": "quantitative", "title": "SCORE"} + }, + "layer": [{ + "mark": "bar" + }, { + "mark": { + "type": "text", + "align": "left", + "baseline": "middle", + "dx": 4 + }, + "encoding": { + "text": {"field": "amount", "type": "quantitative"} + } + }] + }; + + + + + + + diff --git a/octane2.html b/octane2.html new file mode 100644 index 0000000..c20273f --- /dev/null +++ b/octane2.html @@ -0,0 +1,553 @@ + + + + + + + + Octane 2.0 JavaScript Benchmark + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ +

Core Language Features

+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +

Bit Operations

+
+
+ +
+ +
+ +
+
+ + + + +

Memory and Garbage Collection

+
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ + +

Strings and Arrays

+ +
+
+ +
+ +
+ +
+
+ + +
+
+ +
+
+ + +

Virtual Machine

+ +
+
+ +
+ + +
+ +
+
+ + +
+
+ +
+
+ + +

Compiler

+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ +
+ + + + +
+ + +
+
+ Octane2 Score +
+
+ + + + + + + + \ No newline at end of file