TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

As much Stack Overflow as possible in 4096 bytes

382 点作者 df07超过 11 年前

27 条评论

mberning超过 11 年前
Very impressive. I wish extreme performance goals and requirements would become a new trend. I think we have come to accept a certain level of sluggishness in web apps. I hate it.<p>I wrote a tire search app a few years back and made it work extremely fast given the task at hand. But I did not go to the level that this guy did. <a href="http://tiredb.com" rel="nofollow">http:&#x2F;&#x2F;tiredb.com</a>
评论 #7254133 未加载
评论 #7257858 未加载
评论 #7255409 未加载
评论 #7256147 未加载
评论 #7260037 未加载
jc4p超过 11 年前
Some of the workarounds he mentions at the end of his Trello in 4096 bytes[1] post seem really interesting:<p>- I optimized for compression by doing things the same way everywhere; e.g. I always put the class attribute first in my tags<p>- I wrote a utility that tried rearranging my CSS, in an attempt to find the ordering that was the most compressible<p>[1] <a href="http://danlec.com/blog/trello-in-4096-bytes" rel="nofollow">http:&#x2F;&#x2F;danlec.com&#x2F;blog&#x2F;trello-in-4096-bytes</a>
评论 #7254006 未加载
评论 #7254632 未加载
评论 #7256667 未加载
评论 #7255033 未加载
Whitespace超过 11 年前
I&#x27;m curious if a lot of the customizations re:compression could be similarly achieved if the author used Google&#x27;s modpagespeed for apache[0] or nginx[1], as it does a lot of these things automatically including eliding css&#x2F;html attributes and generally re-arranging things for optimal sizes.<p>It could make writing for 4k less of a chore?<p>In any case, this is an outstanding hack. The company I work for has TLS certificates that are larger than the payload of his page. Absolutely terrific job, Daniel.<p>[0]: <a href="https://code.google.com/p/modpagespeed/" rel="nofollow">https:&#x2F;&#x2F;code.google.com&#x2F;p&#x2F;modpagespeed&#x2F;</a><p>[1]: <a href="https://github.com/pagespeed/ngx_pagespeed" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;pagespeed&#x2F;ngx_pagespeed</a><p><i>edit: formatting</i>
评论 #7254460 未加载
nej超过 11 年前
Wow navigating around feels instant and it almost feels as if I&#x27;m hosting the site locally. Great job!
derefr超过 11 年前
&gt; I threw DRY out the window, and instead went with RYRYRY. Turns out just saying the same things over and over compresses better than making reusable functions<p>This probably says something about compression technology vs. the state of the art in machine learning, but I&#x27;m not sure what.
cobookman超过 11 年前
First off, nice work. I&#x27;ve noticed that St4k is loading each thread using ajax, where-as stackoverflow actually opens a new &#x27;page&#x27;, reloading a lot of webrequests. Disclaimer I&#x27;ve got browser cache disabled.<p>E.g on a thread click:<p>St4k:<p>GET <a href="https://api.stackexchange.com/2.2/questions/21840919" rel="nofollow">https:&#x2F;&#x2F;api.stackexchange.com&#x2F;2.2&#x2F;questions&#x2F;21840919</a> [HTTP&#x2F;1.1 200 OK 212ms] 18:02:16.802<p>GET <a href="https://www.gravatar.com/avatar/dca03295d2e81708823c5bd62e752121" rel="nofollow">https:&#x2F;&#x2F;www.gravatar.com&#x2F;avatar&#x2F;dca03295d2e81708823c5bd62e75...</a> [HTTP&#x2F;1.1 200 OK 146ms] 18:02:16.803<p>stackoverflow.com (a lot of web requests):<p>GET <a href="http://stackoverflow.com/questions/21841027/override-volume-button-in-background-service" rel="nofollow">http:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;21841027&#x2F;override-volume-...</a> [HTTP&#x2F;1.1 200 OK 120ms] 18:02:54.791<p>GET <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" rel="nofollow">http:&#x2F;&#x2F;ajax.googleapis.com&#x2F;ajax&#x2F;libs&#x2F;jquery&#x2F;1.7.1&#x2F;jquery.min...</a> [HTTP&#x2F;1.1 200 OK 62ms] 18:02:54.792<p>GET <a href="http://cdn.sstatic.net/Js/stub.en.js" rel="nofollow">http:&#x2F;&#x2F;cdn.sstatic.net&#x2F;Js&#x2F;stub.en.js</a> [HTTP&#x2F;1.1 200 OK 58ms] 18:02:54.792<p>GET <a href="http://cdn.sstatic.net/stackoverflow/all.css" rel="nofollow">http:&#x2F;&#x2F;cdn.sstatic.net&#x2F;stackoverflow&#x2F;all.css</a> [HTTP&#x2F;1.1 200 OK 73ms] 18:02:54.792<p>GET <a href="https://www.gravatar.com/avatar/2a4cbc9da2ce334d7a5c8f483c9216e1" rel="nofollow">https:&#x2F;&#x2F;www.gravatar.com&#x2F;avatar&#x2F;2a4cbc9da2ce334d7a5c8f483c92...</a> [HTTP&#x2F;1.1 200 OK 90ms] 18:02:55.683<p>GET <a href="http://i.stack.imgur.com/tKsDb.png" rel="nofollow">http:&#x2F;&#x2F;i.stack.imgur.com&#x2F;tKsDb.png</a> [HTTP&#x2F;1.1 200 OK 20ms] 18:02:55.683<p>GET <a href="http://static.adzerk.net/ados.js" rel="nofollow">http:&#x2F;&#x2F;static.adzerk.net&#x2F;ados.js</a> [HTTP&#x2F;1.1 200 OK 33ms] 18:02:55.684<p>GET <a href="http://www.google-analytics.com/analytics.js" rel="nofollow">http:&#x2F;&#x2F;www.google-analytics.com&#x2F;analytics.js</a> [HTTP&#x2F;1.1 200 OK 18ms] 18:02:55.684<p>GET <a href="http://edge.quantserve.com/quant.js" rel="nofollow">http:&#x2F;&#x2F;edge.quantserve.com&#x2F;quant.js</a><p>....and more....
评论 #7257937 未加载
评论 #7256409 未加载
SmileyKeith超过 11 年前
This is amazing. As others have said I really wish this kind of insane performance would be a goal for sites like this. After trying this demo I found it difficult to go back to the same pages on the normal site. Also I imagine even with server costs this would save them a lot of bandwidth.
masswerk超过 11 年前
And now consider that 4096 bytes (words) was exactly the total memory of a DEC PDP-1, considered to be a mainframe in its time and featuring timesharing and things like Spacewar!.<p>And now we&#x27;re proud to have a simple functional list compiled into the same amount of memory ...
评论 #7255801 未加载
afhof超过 11 年前
4096 is a good goal, but there is a much more obvious benefit at 1024 since it would fit within the IPv6 1280 MTU (i.e. a single packet). I recall hearing stories that the Google Homepage had to fit within 512 bytes for IPv4&#x27;s 576 MTU.
评论 #7254589 未加载
jonalmeida超过 11 年前
Pages load almost instantly like as if it&#x27;s a local webserver - I&#x27;m quite impressed.
blazespin超过 11 年前
Very impressive! So incredibly fast.<p>My only thoughts are that search is the real bottleneck.
Jakob超过 11 年前
I didn’t realize that the original site is already quite optimized. With a primed cache the original homepage results in only one request:<p><pre><code> html ~200KB (~33 gzipped) </code></pre> Not bad at all. Of course the 4k example is even more stunning. Could the gzip compression best practices perhaps be added to an extension like mod_pagespeed?
kislayverma超过 11 年前
Very very awesome.<p>I&#x27;d take some trade-off between between crazy optimization and maintainability, but I&#x27;d definitely rather do this than slap on any number of frameworks because they are the new &#x27;standard&#x27;.<p>Of course, the guy who has to maintain my code usually ends up crying like a little girl.
dclowd9901超过 11 年前
&gt;&quot;I threw DRY out the window, and instead went with RYRYRY. Turns out just saying the same things over and over compresses better than making reusable functions&quot;<p>I would love to investigate this further. I&#x27;ve always had a suspicion that the aim to make everything reusable for the sake of bite size actually has the opposite effect, as you have to start writing in support and handling tons of edge cases as well, not to mention you now have to write unit test so anyone who consumes your work isn&#x27;t burned by a refactor. Obviously, there&#x27;s a place for things like underscore, jquery, and boilerplate code like Backbone, but bringing enterprise-level extensibility to client code is probably mostly a bad thing.
nathancahill超过 11 年前
This is really fast! Love it. I thought the real site was fast until I clicked around on this.
arocks超过 11 年前
Looks broken on my Android mobile, but seriously this is incredible!<p>Wonder how we can unobfuscate the source. It would be great if there is a readable version of the source as well, just like we have in Obfuscated C Code Contests. Or perhaps, some way to use the Chrome inspector for this.
评论 #7256904 未加载
TacticalCoder超过 11 年前
In a different style, the &quot;Elevated&quot; demo, coded in 4K (you&#x27;ll have a hard time believing it if you haven&#x27;t seen it yet):<p><a href="http://www.youtube.com/watch?v=_YWMGuh15nE" rel="nofollow">http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=_YWMGuh15nE</a>
shdon超过 11 年前
His root element is &quot;&lt;html dl&gt;&quot;. I&#x27;m not aware of the dl attribute even existing... Is that for compressibility or does the &quot;dl&quot; actually do something?
jazzdev超过 11 年前
Impressive, and a useful exercise, but it doesn&#x27;t seem practical to give up DRY in favor of RYRYRY just because it compresses better and saves a few bytes.
iamdanfox超过 11 年前
The simpler UI is quite pleasant to use isn&#x27;t it! I wonder if companies would benefit from holding internal &#x27;4096-challenges&#x27;?
nandhp超过 11 年前
Code is formatted in a serif font, instead of monospace, which seems like a rather important difference. Otherwise, it is quite impressive.
评论 #7254989 未加载
评论 #7255177 未加载
评论 #7254792 未加载
timtadh超过 11 年前
funny, his compressor must do a better job than mine:<p><pre><code> $ curl -s http:&#x2F;&#x2F;danlec.com&#x2F;st4k | wc 14 80 4096 $ curl -s http:&#x2F;&#x2F;danlec.com&#x2F;st4k | gzip -cd | wc 17 311 11547 $ curl -s http:&#x2F;&#x2F;danlec.com&#x2F;st4k | gzip -cd | gzip -c | wc 19 103 4098</code></pre>
评论 #7256389 未加载
scoopr超过 11 年前
There seems to be many bytes left! :)<p><pre><code> $ zopfli -c st4k |wc 11 127 4050</code></pre>
评论 #7257894 未加载
dangayle超过 11 年前
I&#x27;d love to see a general list of techniques you use, as best practices.
评论 #7254550 未加载
tantalor超过 11 年前
&gt; The stackoverflow logo is embedded?<p>Did you try a png data url? Could be smaller.
jpatel3超过 11 年前
Way to go!
stefan_kendall超过 11 年前
Maybe part of the story here is that gzip isn&#x27;t the be-all-end-all of compression. A lot of the changes were made to appease the compression algorithm; seems like the algorithm could change to handle the input.<p>A specialized compression protocol for the web?