Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

后台路由选型:前端路由 VS iframe #2

Open
gaoryrt opened this issue Jun 9, 2018 · 5 comments
Open

后台路由选型:前端路由 VS iframe #2

gaoryrt opened this issue Jun 9, 2018 · 5 comments

Comments

@gaoryrt
Copy link
Member

gaoryrt commented Jun 9, 2018

最原始的方式是纯后端路由,更新 url 时,由后端合成导航页和分页,再分发给前端。
前端路由和 iframe 的方式都可以减少后端的计算量。
iframe 方式使用一个导航页加多个分页,使用导航页面切换不同的 iframe 分页,从而实现路由。
前端路由是使用前端内存管理路由,更新 url 其实是由 js 修改替换页面内元素。

@gaoryrt
Copy link
Member Author

gaoryrt commented Jun 9, 2018

暂时想到需要考虑的方面有:

  • 开发迭代维护
  • 用户使用体验
  • 前后端数据交互

在从 iframe 转到前端路由的过程中,路由的控制权从后端下放到了前端。

相应的,使用前端路由在开发时,匹配路由呈现页面的工作就从后端转移到了前端:后端的路由粒度就更大了,这里损失的控制权里有一些其他东西(例如统计)的话,就需要新的 api 解决。当然前端以前需要后端参与的部分,这里也可以自己解决。这里需要对比谁更需要路由的控制权,或者是说要对比代码和路由的关联度。

对于迭代维护,以前修改单独的页面只需更新对应的部分即可,用户在使用新的页面时才会加载新的页面。使用前端路由后,每次修改也都需要更新这个 SPA,对于懒加载或分离了依赖的页面,两种方式没有太大的差距。

至于使用速度,前端路由胜:无论使用懒加载与否,页面加载速度都要比 iframe 快。同时不会有 iframe 阻塞加载完成。PWA 能做到页面秒开,这里节省的是 iframe 中建立 http 链接的时间,和加载 iframe 共用 html 头文件的时间。

对于数据交互,原来该有的 api 不变。这里也需要对比代码和路由的关联度。

TLDR

需要对比前后端在控制路由时的开发维护难度和数据交互难度,使用前端路由还会使用户体验上升一点。

@mpr0xy
Copy link

mpr0xy commented Jun 9, 2018

拉我进组

3 similar comments
@ghost
Copy link

ghost commented Jun 9, 2018

拉我进组

@leechan
Copy link

leechan commented Jun 9, 2018

拉我进组

@ZengYiming
Copy link

拉我进组

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants