เจ้า Facebook ที่เราใช้กันอยู่ทุกวันนี้ถ้าสังเกต กว่าจะ load หน้ามันเข้ามาจะใช้เวลาหน่วงพอสมควร เราลองเจาะเข้าไปดู source code ของ FB ดูซิว่า หน้าตามันเป็นอย่างไร
ส่วนแรกเราจะเจอ stylesheet 4 ชุด
<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/yV/r/YAgO_lPbwSR.css" />
<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/yG/r/gITZRzEd4mG.css" />
<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/yP/r/rfa2eSxPHQ1.css" />
<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v2/yG/r/3gZ1uDednbZ.css" />
ต่อมา จะเจอ script ตัวแรก
<script src="http://static.ak.fbcdn.net/rsrc.php/v2/yy/r/Ze_5aUqe0W3.js"></script>
จะเห็นว่าเรียกมาจากไซด์ที่ชื่อว่า fbcdn.net เราก็ลองโหลด JavaScript ตัวนี้มาดู
จะยกเฉพาะบรรทัดที่ 20 มาให้ดูเป็นตัวอย่างนะ
(function(a){if(a.require)return;var b=Object.prototype.toString,c={},d={},e={},f=0,g=1,h=2,i=Object.prototype.hasOwnProperty;function j(s){if(a.ErrorUtils&&!a.ErrorUtils.inGuard())return ErrorUtils.applyWithGuard(j,this,arguments);var t=c[s],u,v,w;if(!c[s]){w='Requiring unknown module "'+s+'"';throw new Error(w);}if(t.hasError)throw new Error('Requiring module "'+s+'" which threw an exception');if(t.waiting){w='Requiring module "'+s+'" with unresolved dependencies';throw new Error(w);}if(!t.exports){var x=t.exports={},y=t.factory;if(typeof y==='string'){var z='('+y+')';y=eval.apply(a,[z]);}if(b.call(y)==='[object Function]'){var aa=[],ba=t.dependencies,ca=ba.length,da;if(t.special&h)ca=Math.min(ca,y.length);try{for(v=0;v<ca;v++){u=ba[v];aa.push(u==='module'?t:(u==='exports'?x:j(u)));}da=y.apply(t.context||a,aa);}catch(ea){t.hasError=true;throw ea;}if(da)t.exports=da;}else t.exports=y;}if(t.refcount--===1)delete c[s];return t.exports;}function k(s,t,u,v,w,x){if(t===undefined){t=[];u=s;s=m();}else if(u===undefined){u=t;if(b.call(s)==='[object Array]'){t=s;s=m();}else t=[];}var y=c[s];if(y){if(x)y.refcount+=x;return;}else if(!t&&!u&&x){e[s]=(e[s]||0)+x;return;}else{y={id:s};y.refcount=(e[s]||0)+(x||0);delete e[s];}y.factory=u;y.dependencies=t;y.context=w;y.special=v;y.waitingMap={};y.waiting=0;y.hasError=false;c[s]=y;o(s);}function l(s,t,u){k(s,t,undefined,g,u,1);}function m(){return '__mod__'+f++;}function n(s,t){if(!s.waitingMap[t]&&s.id!==t){s.waiting++;s.waitingMap[t]=1;d[t]||(d[t]={});d[t][s.id]=1;}}function o(s){var t=[],u=c[s],v,w,x;for(w=0;w<u.dependencies.length;w++){v=u.dependencies[w];if(!c[v]){n(u,v);}else if(c[v].waiting)for(x in c[v].waitingMap)if(c[v].waitingMap[x])n(u,x);}if(u.waiting===0&&u.special&g)t.push(s);if(d[s]){var y=d[s],z;d[s]=undefined;for(v in y){z=c[v];for(x in u.waitingMap)if(u.waitingMap[x])n(z,x);if(z.waitingMap[s]){z.waitingMap[s]=undefined;z.waiting--;}if(z.waiting===0&&z.special&g)t.push(v);}}for(w=0;w<t.length;w++)j(t[w]);}function p(s,t){c[s]={id:s};c[s].exports=t;}p('module',0);p('exports',0);p('define',k);p('global',a);p('require',j);p('requireDynamic',j);p('requireLazy',l);k.amd={};a.define=k;a.require=j;a.requireDynamic=j;a.requireLazy=l;j.__debug={modules:c,deps:d};var q=false,r=function(s,t,u,v){k(s,t,u,v||h);};a.__d=function(s,t,u,v){t=['global','require','requireDynamic','requireLazy','module','exports'].concat(t);r(s,t,u,v);};a.__e=a.__d;})(this);
จะเห็นว่าวิธีให้ค่าตัวแปรเป็น a ถึง z และ aa ถึง zz เพื่อลดความยาวโค๊ดให้ได้มากที่สุด ก็จะหมายถึงอ่านแกะโค๊ดได้ยากที่สุดไปด้วย
วันนี้เอาแค่นี้ก่อนเน้อ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น