web前后端分离，首屏数据怎么快速加载？

Question

1.前后端分离，页面首屏数据怎么渲染，要求数据和DOM同时渲染出来（ajax会导致dom节点先渲染，数据会慢一点渲染）。目前暂不清楚做法，如果用PHP代码嵌套，那是不是违背了前后端分离思想。

注：首页数据主要为新闻类数据。

Answer 1

使用PHP代码嵌套并不违背前后端分离思想。因为一般前后端分离有一层中间层，可以使用node或者php等。中间层可以做很多操作，如: 接口代理, 路由控制, 服务端渲染... 其实你的问题就属于服务端渲染，你使用上php并没有任何问题。
另外其实你新闻相关页面应该使用类似这种组件处理react-placeholder

Answer 2

数据慢一些是肯定的啊 既然用了ajax加载 你还不如做个loading的覆盖页 等ajax 加载完再去掉比较容易

Answer 3

要最快只有静态化 其它都只能是各种优化 楼上几位的解答都是很好的可以参考

Answer 4

纯粹的前后分离本来就不适用于所有场景，不要为了分离而分离。既然你的需求用前后分离很难实现（确实可以实现，只不过麻烦），那首页就在后端渲染也并没有什么问题啊。

如果纯前端渲染又要 DOM 不提前显示出来，可以用 CSS 将最外层 DIV 设置为 display: hidden，待加载完之后再改回 display: block。如果用了 UI 框架可能会有些坑，琢磨琢磨吧

Answer 5

如果使用php嵌套方式，就是混合模式开发 耦合性比较高，不易于后期修改与维护,在初期加载可以运用缓存 这样速度就比较快，当ajax获取到数据 再修改界面渲染数据

Answer 6

要求数据和DOM同时渲染出来,只有在数据请求过来之前 body hide() ，隐藏掉，再加个loading了，

新闻类，可能图片比较多，试试 lazyload.js

Answer 7

你可以试试vue-router的路由懒加载，将模块进行拆分。

Answer 8

赞同楼上 @GhostCoder 意见，如果要求同时渲染，不用 ajax 的话，lazy 之类的就不在考虑之列了。关于是否要PHP代码嵌套混编，看项目实际情况，尽量不要太死板，PHP 是一门很灵活的语言；话说回来，主页如果是新闻数据的话，最快显示页面，大概就是做静态化了。

Answer 9

我也觉得上面几位说的对,服务端定时生成静态化首页,后面ajax更新dom节点,本地缓存部分数据
直觉应该还有更好的办法