前后端分离是否会影响首屏加载时间?

如今很多公司为了提高开发效率采用前后端分离的开发模式,这是架构上的分离解耦,前后端各司其职,通过RESTful API来调用数据。这样做的好处也有不少,如:

  • 逻辑分离:业务逻辑放在后端,前端逻辑放在前端,这样一来,数据及逻辑上都很清晰;

  • 前后端分离部署:减轻了后端服务器的压力,后端服务器不需要负责前端页面的渲染,只负责数据处理,性能上会有所提高;

  • 复用性较高:前后端分离本质上也是系统分离,可以做到同一个后端系统提供数据给多个前端系统,扩展性更高;

  • 并行开发,提高效率:前后端并行开发,提前约定好数据格式即可(mock),提升了项目开发效率。

但是,前后端分离也带来了一些问题,比如大家比较关注的首屏加载渲染时间的问题。

对于前后端分离会不会影响首屏加载,我想说的是,多少都是有的,但影响程度要看代码的质量了,只要优化得好,首屏加载时间不会太慢。

我们在进行前后端分离时有一些技巧来缩短首屏加载时间的,分享给大家:

  • 前端与后端分别部署,都走CDN加速;

  • 前端尽可能少的调用多个API,建议调用一个API网关来实现多个API的请求合并;

  • 后端API域名使用单独域名,禁止cookies传输;

  • 部分数据本地缓存处理;

  • 不重要的数据惰性请求加载。


综上,前后端分离在一定程度上是会影响首屏加载时间的,但是也有调优方案,总体上时间不会相差太多。

以上回答希望对大家有所帮助,如果其它网友有不同见解,也欢迎在下方评论交流 ~

谢邀,根据我在BAT的开发经验来说,如果使用了前后端分离,首屏加载时间是会受到一定影响,但是与前后端分离带来的好处比起来,这个缺点是可以通过其他方式来弥补的。

首先由于前端要与后端通信才能获取数据,再渲染到页面上,这个等待时间在没有缓存的情况下,一定会使首屏加载时间变慢。

我提供以下4个思路给大家分享:

1 在前后端分离的中间层使用node或者php。中间层可以做很多事情,比如路由控制,接口代理,服务端渲染等等,这里不妨用php来进行服务端渲染,从而加快数据的获取速度。

前后端分离是否会影响首屏加载时间?

2 做一个loading的覆盖页,分散用户的注意力,从而使其忽视加载时间长短。比如目前APP常见的开屏广告,很多都是在wifi模式下预下载好的,然后等你下次打开app的时候,作为首屏展示给你,在你等待广告过去,或者去寻找那个小小的“跳过”按钮的时候,前后端的通信已经完成了。对于APP来说,即挣了广告费,又不会让用户感觉到自己加载慢,真的是一举两得。

前后端分离是否会影响首屏加载时间?

3 使用第三方组件,比如react-placeholder。

4 优化网络,包括减少请求数(比如不要打开首屏的时候就发送一堆请求给后端),减少传输体积(header和body中精简数据),合理安排请求顺序(比如在页面上方的数据调用A接口,下方的数据调用B接口,那么就要先调用A接口,再调用B接口,尽快把用户先看到的区域数据加载好)等,通过这些方式,也能够减少首屏的加载等待时间。

前后端分离是否会影响首屏加载时间?

以上是我的浅见,欢迎各位在下方评论区给我交流点赞。

我是苏苏思量,来自BAT的Java开发工程师,每日分享科技类见闻,欢迎关注我,与我共同进步。

之前在网上看到过一张调侃前后端分离的搞笑动图(下图所示),感觉不能在真实了。回归到这道问题,前后端分离是否会影响首屏加载时间?我认为是有一定影响的。

前后端分离是否会影响首屏加载时间?

前后端分离应用有一个致命缺点,就是首屏渲染。用户第一次打开页面,要通过ajax加载后端的数据,因为是首次打开,所以要加载的数据较多,用户就感知到了延迟;而传统的后端渲染页面,直接给浏览器返回的是已经包含要填充的数据的HTML页面,所以几乎不存在首屏渲染问题。

这么说吧,服务器渲染,HTML直出,浏览器加载到文档就可以开始渲染。而前后端分离,你得等框架、业务代码加载到了才能渲染,所以会在一定程度上影响加载速度。

前后端分离会有白屏时间 这主要是因为spa应用生成首页的js和数据的传输有一定时间 好在发展到现在已经有很多办法去规避这些问题了

从时间上 就是使用cdn技术 让数据和js更快的到达用户端 减少等待时间 如果足够短 是基本可以消除大部分白屏时间 甚至都感觉不到

从页面上也有几种方案

一种是通过service worker这一类缓存方案 使得下一次访问能够更快拿到数据和js 减少时间

一种是通过内联css绘制骨架屏 让页面有一些定西看起来没那么空 一般骨架屏是按照实际页面绘制成的色块 会有一种逐渐加载的感觉

一种是直接从服务器入手 将那种不怎么和后端交互或者不会因为用户需要产生个性化的页面在打包代码的同时先生成好 就能返回一个不白屏的页面了 这称为预渲染

最后一种是ssr 服务器端渲染 让node.js作为服务器 生成好页面再返回给浏览器 消除白屏

大概流行的就这几种方案

应该不会,除非是技术还不过关。

原创文章,作者:秒收,如若转载,请注明出处:https://www.miaoshou.cc/5285.html

(0)
上一篇 2021年6月24日 15:18
下一篇 2021年6月24日 15:23

相关推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注