弱鸡问一个前端问题

[kekexili]

36 氪 打开 36 氪，头部和尾部会先加载，然后主体内容在加载，这样做的好处和原理分别是什么呢？

[newljs]

异步加载
头尾是全局模块，本地一次缓存，全站通用，省资源，省流量
而且碰到网速慢的情况不会让人以为网站挂了

[geelaw]

这个东西本质和异步没关系，不过 36kr 确实用了异步的方式，如果不想用异步也可以把加载内容的代码放在 body 的最后。

头尾是固定的，中间是动态的，又没有直接 render 出来（容易看见第一次发来的 HTML 没有中间的内容），需要客户端再次请求数据（你会发现这个网站关掉 JS 是用不了的）。好处在于每次访问主页不用重新下载主页的 HTML ，只要从缓存里面拿，然后重新请求真正易变的数据。

此外后面请求的数据是数据本身，而不是 render 好的 HTML ，这样可以减轻服务器拼接 HTML 的麻烦，前端的修改只要改 JS 不用改服务器返回请求的代码，而且这样做是符合 data 和 UI 形式解耦的想法的。

[morethansean]

尾部先出来……真的很蠢……

[qhxin]

很讨厌这种内容不能一次性加载完的图文站，还要开 js 才能看

[murmur]

不要把这个东西异步什么说的很美
说句简单的就是，卡了
好的，让我们把鼠标移动到中间，调试工具打开，看到了么，有个 div id=app
这就好解释了，反正 36k 用了个 mvvm 框架，主体是中间， header 和 footer 是写死的 html
由于 bundle 太大了，连资源带数据带库中间花了好久才渲染完。。。

[zhangolve]

话说真的是好慢啊。