# Race to a Million

This falls under the Code puzzles the best. Fastest way to render the numbers 1-million in a web browser. Preferably using PHP, but use what you must. Numbers must be more than one on a line in the web browser and must line wrap (the horizontal scroll bar must not be triggered).

rules:

1. use any loop construct that you want
2. No horizontal scrolling allowed
3. Count 1 - 1,000,000 (commas not needed, overshoot is OK)
4. Must be a language that displays results in a browser.

For my timer, I'm using:

$mtime = microtime();$mtime = explode(" ",$mtime);$mtime = $mtime[1] +$mtime[0];
$starttime =$mtime;


before the code and

$mtime = microtime();$mtime = explode(" ",$mtime);$mtime = $mtime[1] +$mtime[0];
$endtime =$mtime;
$totaltime = ($endtime - $starttime); echo ("<br /><br /><b>Total count time:</b> ".$totaltime." seconds");


after the code.

• How are you going to measure speed? Your puzzle is phrased in a way that suggests rendering speed matters the most - which is something that is very specific to the web browser but hard to control in unknown environments. – Howard Jan 16 '13 at 6:05
• Indeed. You can either have a large page to send to the browser from the server, or create the content in the browser itself (by Javascript), or a combination of both methods. The differences in speed will depend on the situation. – Mr Lister Jan 16 '13 at 7:11
• Added my speed measurement code to the question. However, any code that measures run time is satisfactory. – CEPA Jan 16 '13 at 13:10
• Why not use microtime(true) instead of doing your own math? – Mr. Llama Jan 16 '13 at 16:08
• That was the code sample that I found with the puzzle. I left it off initially because I knew there were more efficient ways but felt I would leave it up to the individual programmer to time-stamp it in their own way. – CEPA Jan 16 '13 at 19:37

# HTML

Just have a page with the numbers already in it! Encoded in base-36 for less characters and rendering time. 5 and a bit MB source so I'll just give you a little snippet:

<html><div style="width:100%; word-wrap:break-word;">1 2 3 4 5 6 7 8 9 a b c...

... pew2 pew3 pew4 pew5 pew6 pew7 pew8 pew9 pewa pewb pewc pewd pewe pewf pewg pewh pewi
pewj pewk pewl pewm pewn pewo pewp pewq pewr pews pewt pewu pewv peww pewx pex0 pex1 pex2
pex3 pex4 pex5 pex6 pex7 pex8 pex9 pexa pexb pexc pexd pexe pexf pexg pexh pexi pexj pexk
pexl pexm pexn pexo pexp pexq pexr pexs pext pexu pexv pexw pexx pf00 pf01 pf02 pf03 pf04
pf05 pf06 pf07 pf08 pf09 pf0a pf0b pf0c pf0d pf0e pf0f pf0g pf0h pf0i pf0j pf0k pf0l pf0m
pf0n pf0o pf0p pf0q pf0r pf0s pf0t pf0u pf0v pf0w pf0x pf10 pf11 pf12 pf13 pf14 pf15 pf16
pf17 pf18 pf19 pf1a pf1b pf1c pf1d pf1e pf1f pf1g pf1h pf1i pf1j pf1k pf1l pf1m pf1n pf1o
pf1p pf1q </div></html>


If you can be bothered, write this to an image with really small fontsize and it may increase rendering time!

Up to OP to figure out how to time this.

(This is barely a serious submission)

• lol, I thought about that! But, I didn't consider encoding it to base-36. 1-1,000,000 is a HUGE file in base-10. – CEPA Jan 16 '13 at 19:40
• Does base-36 really save you anything if your webserver is doing gzip? – gnibbler Jan 16 '13 at 22:38
• @gnibbler yes, because it means rendering less digits.. – Griffin Jan 17 '13 at 11:04
• @Griffin: But the entropy with base-36 is much higher than base-10 digits, so compression will be more efficient in base-10. I just generated 1-1,000,000 in base 10, it was 6.7MB. Then I generated 1-1,000,000 in base 36, it was 4.8MB. Then I 7-zipped them (which should be relatively similar to gzip), and they compressed to 80KB, and 314KB, respectively. So in fact, it seems the base 10 numbers would actually compress to a smaller size. – mellamokb Jan 17 '13 at 15:53
• @mellamokb, who cares about compression, the digits still have to be displayed (therefore renedered) on the screen... – Griffin Jan 17 '13 at 16:28

# PNG, 7874 bytes

This renders almost instantaneously in Firefox. There are 512 numbers on each line. Each number is displayed in base 16,777,216 as a single RGB pixel, with the numerical value of each being 65536 * R + 256 * G + B. The horizontal scroll bar will not be triggered in Firefox when you view an image.

The image was created in Mathematica using

Image[
Partition[
Table[IntegerDigits[x, 256, 3], {x, 1, 1000000}],
512, 512, {1, 1}, {{255, 255, 255}}],
"Byte", Magnification -> 1]


, exported as a PNG, and optimized.

• Upvoted because I laughed hard at your "base 16,777,216" solution. It's up to the OP to clearly define "a language that displays results in a browser". PHP may be the only programming language that started life as HTML template and fits the bill in a strict fashion. But yeah, why not PiNG, XSLT and any other type that renders in browser. – mleise Jan 7 '14 at 22:23

## HTML / Javascript

A semi-serious attempt. This is, in my opinion, one of the only sane ways to go about the problem. Render time is approximately 1-2 seconds for every browser I checked.

<html>
<title>Count</title>
<script type="text/javascript">
var output_area = document.getElementById('output_area');
var str = '';
for(var i=1; i <= 1000000; i++) {
str += i + ' ';
}
output_area.innerText = str;
}
</script>
<style type="text/css">
#output_area {
height: 100%;
width: 100%;
}
</style>
<textarea id="output_area"></textarea>
</body>
</html>


Using ruby and the web-framework sinatra:

# file: million.rb
require 'sinatra';get '/million.txt' do (1..(10*100*1000)).to_a.join("\n") end


Usage (requires ruby installed):

gem install sinatra
ruby million.rb


Then open http://0.0.0.0:4567/million.txt in any browser - took 636 ms hosted locally, opened in google-chrome.

Have fun ;)