沒事使用代理上了下facebook,注冊進入個人首頁后,習慣性的查看源代碼,發現了1個很有意思的現象,首頁內容不少,但源代碼中HTML的代碼卻很少,但去多出了很多段的Javascript代碼,這些js代碼都是用于動態生成html的,facebook為什么需要這樣做了?出于職業習慣,研究研究:
一、html代碼。
先看看首頁查看的源代碼,因為源代碼比較大,所以把圖片壓縮了下,可能看不太清楚,只需要注意圖中紅色是html代碼,其余黑壓壓一片的就全部是JS代碼:
二、JS代碼
看到黑壓壓的JS代碼是不是被嚇一跳,下面就截取一段JS來分析(其余段的JS都是類似的),facebook源代碼中充斥了類似于下面的JS代碼:
<script>big_pipe.onPageletArrive({ "id":"pagelet_welcome_box","phase":1,"is_last":false,"append":false,
"bootloadable":[], "css":["lDRwi","eon+N"], "js":["F+B8D","IdQlc"], "resource_map":[],"requires":[],"provides":[], "onload":["window.__UIControllerRegistry[/"c4c13a3ed2dd1e0e349b72/"] = new UIPagele
t(/"c4c13a3ed2dd1e0e349b72/", /"http:////pagelet////generic.php////WelcomeBoxPagelet/////", {},
{});; ;"], "onafterload":[],"onpagecache":[],"onafterpagecache":[],"refresh_pagelets":[],"invalidate_
cache":[], "content":{ "pagelet_welcome_box":"<div id=/"c4c13a3ed2dd1e0e349b72/"><div class=/"UIIm
ageBlock clearfix fbxWelcomeBox/"> ...這里省略N多HTML" }, "page_cache":true});</script>
it知識庫:名站技術分析 — facebook奇特的頁面加載技術,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。