2010-01-06 10 views
6

Im Folgenden sind einige der "weird" Schnipsel, die auf der Google-Startseite sind .. (google.com/ncr, das ist)Könnte jemand bitte die Google-Homepage JS erklären?

({"s":{"#":[{"h":"ad","g":["Google","E4hE342CDKOgAFYm15AW","1",0,0,1]},{"h":"p","g":["ghead"," 

,0]},{"h":"p","g":["footer"," 

",0]},{"h":"p","g":["body"," 

",0]},{"h":"p","g":["xjsi"," 

Und dann das es gibt:

<script>if(google.y)google.y.first=[];if(google.y)google.y.first=[];if(!google.xjs){google.dstr=[];google.rein=[];window.setTimeout(function(){var a=document.createElement(\"script\");a.src=\"/extern_js/f/CgJlbiswCjhMQAgsKzAOOAosKzAWOBQsKzAXOAQsKzAYOAQsKzAZOA0sKzAdOBssKzAhOCtAASwrMCU4yYgBLCswJjgILCswJzgCLCswKjgCLCswKzgJLCswPDgCLCswQDgFLCswRDgALCswRTgALA/JqRMsHQD1vo.js\";(document.getElementById(\"xjsd\")||document.body).appendChild(a);if(google.timers&&google.timers.load.t)google.timers.load.t.xjsls=(new Date).getTime();},0);\u000agoogle.xjs=1};google.y.first.push(function(){google.ac.m=1;google.ac.b=true;google.ac.i(document.f,document.f.q,'','','OvaKevzR5YKoeJu2mSddyQ');(function(){\u000avar a=window.google.f={};a.f=1;a.s=1;a.a=(new Date).getTime();google.rein.push(function(){a.f=1;a.s=1;a.a=(new Date).getTime()});google.dstr.push(function(){google.fade=null});function m(b,g,e,f){var d,c=[],i=[];for(var h=0,k;k=b[h++];){var l=document.getElementById(k);if(l)c.push(l)}for(var h=0,j;j=g[h++];){var o=n(j[0],j[1]);while(d=o.pop())c.push(d)}while(d=c.pop())i.push([d,\"opacity\",e,f,0,\"\"]);return i}function n(b,\u000ag){var e=[];for(var f=document.getElementsByTagName(b),d=0,c=f[d];c=f[d++];)if(c.className==g)e.push(c);return e}google.fade=function(b){b=b||window.event;var g=1;if(b&&b.type==\"mousemove\"){var e=b.clientX,f=b.clientY;g=a.x||a.y?Math.abs(a.x-e)+Math.abs(a.y-f):0;a.x=e;a.y=f}var d=(new Date).getTime(),c=d-a.a;if(google.fx&&g&&c>602)if(a.f){a.f=0;var i=[\"fctr\",\"ghead\",\u000a\"pmocntr\",\"sbl\",\"tba\",\"tbe\"],h=[[\"span\",\"fade\"],[\"div\",\"gbh\"]];google.fx.animate(602,m(i,h,0,1))}};\u000a})();\u000a});if(google.j&&google.j.en&&google.j.xi){window.setTimeout(google.j.xi,0);google.fade=null;}</script>",0]},{"h":"zz","g":[0,1]}]},"c":{"1":{"cc":[],"co":["ghead","body","footer","xjsi"],"pc":[],"nb":0,"css":"td{line-height:.8em;}.gac_m td{line-height:17px;}form{margin-bottom:20px;}body,td,a,p,.h{font-family:arial,sans-serif}.h{color:#36c;font-size:20px}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}em{font-weight:bold;font-style:normal}.lst{font:17px arial,sans-serif;margin-bottom:.2em;vertical-align:bottom;}input{font-family:inherit}.lsb,.gac_sb{font-size:15px;height:1.85em!important;margin:.2em;}#fctr,#ghead,#pmocntr,#sbl,#tba,#tbe,.fade{opacity:0;}#fctr,#ghead,#pmocntr,#sbl,#tba,#tbe,.fade{background:#fff;}#gbar{float:left;height:22px}.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}.gbh{height:0;position:absolute;top:24px;width:100%}#gbs,.gbm{background:#fff;left:0;position:absolute;text-align:left;visibility:hidden;z-index:1000}.gbm{border:1px solid;border-color:#c9d7f1 #36C#36C#a2bae7;z-index:1001}#guser{padding-bottom:7px !important;text-align:right}#gbar,#guser{font-size:13px;padding-top:1px !important}.gb1,.gb3,.gb3i,.gb3f{zoom:1;margin-right:.5em}.gb2,.gb2i,.gb2f{display:block;padding:.2em .5em}a.gb1,a.gb2,a.gb3,a.gb4{color:#00c !important}.gb2,.gb2i,.gb2f,.gb3,.gb3i,.gb3f{text-decoration:none}a.gb2:hover{background:#36c;color:#fff !important}","main":"<div id=ghead></div><span id=body></span><span id=footer></span><span id=xjsi></span>"}}}) 

Hier ist eine sehr interessantes:

onload=\"window.lol&amp;&amp;lol()\" 

Warum entkommen sie alles?

Das scheint ziemlich selbsterklärend:

onblur=\"google&amp;&amp;google.fade&amp;&amp;google.fade()\" 

es begrüßen, wenn Sie eine der oben genannten erklären kann. Danke!

+2

Warum der Downvote? Diese sehen für mich wie legitime und etwas interessante Fragen aus! –

Antwort

9

Die frühen Beispiele sind im Grunde nur Minification (Entfernen von Leerzeichen, Verwendung von kurzen Variablennamen, etc.), um die Größe der Seite zu reduzieren.

Was:

onload=\"window.lol&amp;&amp;lol()\" 

Die Seite tatsächlich hat:

onload="window.lol&amp;&amp;lol()" 

Es hat &amp; weil & muss auf diese Weise in HTML dargestellt werden (außer in CDATA-Blöcke, die Werte nie sind Attribut) . So bedeutet es:

window.lol && lol(); 

das bedeutet:

Wenn das Fenster Objekt hat eine Eigenschaft lol genannt, die diese Eigenschaft als eine Funktion auszuführen.

Die Verwendung des expliziten window Objekts in erster Linie ist es erroring zu stoppen, wenn die Eigenschaft nicht definiert ist, und der Mangel in der zweiten Instanz zu verwenden, ist die Größe der Seite zu reduzieren (seit window ist impliziert, wenn eine Funktion aufgerufen wird, die nicht explizit eine Methode eines anderen Objekts ist).

+0

Ich verstand die lol, aber danke für Ihre Erklärung sowieso! – MrSplashyPants

4

Ich kann keine vollständige Antwort geben, aber die endlose Flucht ist wahrscheinlich für ältere Browser mit unsachgemäßer Zeichensatzunterstützung.

Der Grund, der natürlich so komprimiert ist, ist, dass er wirklich schnell geladen wird.

edit: Ich würde den Code nicht so sehr obscurified nennen, wie es extrem hoch optimiert ist.

+0

Ich mag das, weil es einfach und süß ist. – Hazior

0

Wahrscheinlich nicht das Tool für Googles Homepage verwendet, aber googles closure compiler könnte diese Art von Kauderwelsch produzieren.

+0

Es ist wahrscheinlich von ihren Optimierungstechniken eher inspiriert, dass was sie ursprünglich verwendet – ternaryOperator

Verwandte Themen