1
\$\begingroup\$

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.

Improve this question
\$\endgroup\$
6
  • 5
    \$\begingroup\$ 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. \$\endgroup\$
    – Howard
    Jan 16, 2013 at 6:05
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – Mr Lister
    Jan 16, 2013 at 7:11
  • \$\begingroup\$ Added my speed measurement code to the question. However, any code that measures run time is satisfactory. \$\endgroup\$
    – CEPA
    Jan 16, 2013 at 13:10
  • \$\begingroup\$ Why not use microtime(true) instead of doing your own math? \$\endgroup\$
    – Mr. Llama
    Jan 16, 2013 at 16:08
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – CEPA
    Jan 16, 2013 at 19:37

4 Answers 4

Reset to default
7
\$\begingroup\$

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)

Improve this answer
\$\endgroup\$
8
  • \$\begingroup\$ 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. \$\endgroup\$
    – CEPA
    Jan 16, 2013 at 19:40
  • 1
    \$\begingroup\$ Does base-36 really save you anything if your webserver is doing gzip? \$\endgroup\$
    – gnibbler
    Jan 16, 2013 at 22:38
  • 1
    \$\begingroup\$ @gnibbler yes, because it means rendering less digits.. \$\endgroup\$
    – Griffin
    Jan 17, 2013 at 11:04
  • \$\begingroup\$ @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. \$\endgroup\$
    – mellamokb
    Jan 17, 2013 at 15:53
  • 2
    \$\begingroup\$ @mellamokb, who cares about compression, the digits still have to be displayed (therefore renedered) on the screen... \$\endgroup\$
    – Griffin
    Jan 17, 2013 at 16:28
5
\$\begingroup\$

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.

Numbers 1 to 1,000,000

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.

Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – mleise
    Jan 7, 2014 at 22:23
2
\$\begingroup\$

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>
  <head>
    <title>Count</title>
    <script type="text/javascript">
      function load_me() {
        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>
  </head>
  <body onload="load_me()">
    <textarea id="output_area"></textarea>
  </body>
</html>
Improve this answer
\$\endgroup\$
1
\$\begingroup\$

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 ;)

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.