vue首屏加载慢如何解决前后端分离是否会影响首屏加载时间？

2021-03-16

1325

前后端分离是否会影响首屏加载时间？目前，为了提高开发效率，很多公司都采用了前端和后端分离的开发模式，即体系结构的分离和解耦。前端和后端执行各自的任务，并通过restfulapi调用数据。这种方式有很多

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

目前，为了提高开发效率，很多公司都采用了前端和后端分离的开发模式，即体系结构的分离和解耦。前端和后端执行各自的任务，并通过restfulapi调用数据。这种方式有很多优点，比如：前后端分离部署：降低了后端服务器的压力，后端服务器不需要负责前端页面的呈现，只负责数据的处理，所以性能会得到提高；

高重用性：前后端分离本质上也是系统分离，它可以实现同一个后端系统向多个前端系统提供数据，并且具有良好的可扩展性更高；

并行开发，提高效率：前端和后端并行开发，提前约定好数据格式（mock），提高项目开发效率。

但是，前端和后端的分离也带来了一些问题，例如第一次屏幕加载和渲染时间。

至于前端和后端的分离是否会影响第一次屏幕加载，我想说的是有很多，但影响的程度取决于代码的质量。只要优化效果好，第一屏加载时间不会太慢。

，与大家分享：

前端和后端分开部署，CDN加速；

前端尽量少调用多个API，建议调用API网关，实现多个API的请求合并；

后端API域名使用单独的域名，禁止cookie传输；

一些数据本地缓存处理；

不重要的数据延迟请求加载。

如果其他网友有不同意见，请在下面发表评论。单页应用程序（SPA）是一种网站应用程序模型，它可以动态重写当前页面以与用户交互，而无需重新加载整个页面。目前，在react、Vue和angular的领导下，单页应用得到了广泛的应用。单页应用程序的优点和缺点是什么？

作为一种流行的网站应用模式，单页应用应该充分考虑自身的情况，权衡利弊，再决定是否采用单页应用开发。

谢燕，页面上有很多白屏，比如第一次加载屏幕前的白屏时间，页面代码崩溃导致整个页面不可用的白屏，业务代码错误，以及spa页面不呈现等

我知道您要检测的是所有白屏状态。然后通过第一次有意义的绘制来确定白屏的加载时间。如果您想看到页面崩溃或意外的白色屏幕。

Mutationobserver@dickeylth提到，确实可以通过此API获得页面状态更改，但频繁遍历页面节点状态更改是愚蠢的。在这里，我将添加前面的共享中提到的遍历优化方法。

获得白色屏幕和页面的第一个屏幕很有帮助。原来不是我，而是GMTC阿里云前端监控团队的前端技术专家彭伟春。

[第1316期]大前端时代前端监控的最佳实践

让我来截图一下这部分的实现。Ppt说得很清楚。

根据这个想法，我们可以考虑如何判断和检测白屏。