名站技术Facebook页面加载有何独特之处？
- 内容介绍
- 文章标签
- 相关推荐
本文共计585个文字，预计阅读时间需要3分钟。
未使用代理访问facebook，注册进入个人主页后，习惯性地查看源代码，发现一个有趣的现象：主页内容不少，但HTML代码很少，却有很多段JavaScript代码。
没事使用代理上了下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 UIPagelet(\"c4c13a3ed2dd1e0e349b72\", \"\\\/pagelet\\\/generic.php\\\/WelcomeBoxPagelet\\\/\", {}, {});; ;"], "onafterload":[],"onpagecache":[],"onafterpagecache":[],"refresh_pagelets":[],"invalidate_cache":[], "content":{ "pagelet_welcome_box":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML" }, "page_cache":true }); </script>
让我们再看看big_pipe.onPageletArrive函数到底做了什么了？我们只关注参数中的id,js,css,content4个参数，可以看出js和css都是进行过编码，下面是解码后我们关注的代码：
<script> big_pipe.onPageletArrive({ "id":"pagelet_welcome_box", "css":{ name: "css/c5mv8gd5gwoc4kk0.pkg.css" permanent: true src: "static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css" type: "css" }, "js":{ name: "js/19khsprwvtvokwow.pkg.js" permanent: false src: "static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js" type: "js" }, "content":{ "pagelet_welcome_box":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML" } }); </script>
看到还原后的JS，你应该猜出onPageletArrive函数是干嘛的吧，其实onPageletArrive最主要实现就是把"content"中的html内容插入到对应id(上面的"pagelet_welcome_box")的html元素中,并下载对应的css和JS。
三、chunk、flush
看到上面的分析后，大家一定奇怪，facebook为什么要生成那么多段JS，再用js去动态插入html代码，这不是脱了裤子放屁，多此一举吗？还不如直接生成html代码了。facebook当然不会那么笨了，让我们先监控下facebook的www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外)，转载请注明出处.
本文共计585个文字，预计阅读时间需要3分钟。
未使用代理访问facebook，注册进入个人主页后，习惯性地查看源代码，发现一个有趣的现象：主页内容不少，但HTML代码很少，却有很多段JavaScript代码。
没事使用代理上了下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 UIPagelet(\"c4c13a3ed2dd1e0e349b72\", \"\\\/pagelet\\\/generic.php\\\/WelcomeBoxPagelet\\\/\", {}, {});; ;"], "onafterload":[],"onpagecache":[],"onafterpagecache":[],"refresh_pagelets":[],"invalidate_cache":[], "content":{ "pagelet_welcome_box":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML" }, "page_cache":true }); </script>
让我们再看看big_pipe.onPageletArrive函数到底做了什么了？我们只关注参数中的id,js,css,content4个参数，可以看出js和css都是进行过编码，下面是解码后我们关注的代码：
<script> big_pipe.onPageletArrive({ "id":"pagelet_welcome_box", "css":{ name: "css/c5mv8gd5gwoc4kk0.pkg.css" permanent: true src: "static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css" type: "css" }, "js":{ name: "js/19khsprwvtvokwow.pkg.js" permanent: false src: "static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js" type: "js" }, "content":{ "pagelet_welcome_box":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML" } }); </script>
看到还原后的JS，你应该猜出onPageletArrive函数是干嘛的吧，其实onPageletArrive最主要实现就是把"content"中的html内容插入到对应id(上面的"pagelet_welcome_box")的html元素中,并下载对应的css和JS。
三、chunk、flush
看到上面的分析后，大家一定奇怪，facebook为什么要生成那么多段JS，再用js去动态插入html代码，这不是脱了裤子放屁，多此一举吗？还不如直接生成html代码了。facebook当然不会那么笨了，让我们先监控下facebook的www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外)，转载请注明出处.