Rails Homeland React 前端的性能/体验

hbm · 2020年04月26日 · 最后由 ad583255925 回复于 2020年04月28日 · 3722 次阅读

看了@huacnlee 写的 https://react-homeland.herokuapp.com/ 很赞 但是页面切换总有一个短暂的载入画面,性能好像不如 ruby-china, 体验也算很好。 我理解这是 react 要等所有资源载入以后才开始渲染

如果保持前后端的分离,

  • 有哪些可能的优化可以减轻这个问题
  • 其他网站怎么解决这个问题

是不是可以认为 react/vue 等框架适合 app 类型的应用,比如在线文档,而不是页面/内容型的 web 应用?

服务端渲染

Rei 回复

理解。可不可以认为, 对于内容管理系统,论坛这样传统的基于页面的程序, react 等框架的优势不大?(看到了论坛前面的讨论,感觉是这个意思)

我只是好奇

类似 ruby-china 的项目

用前端渲染和后端渲染, 大家能感受到运行时间差异么?

我自己用 react 的理由主要有两点

  1. 直接操作 dom 变来变去, 还要考虑状态很麻烦, react 的 data 直接确定 ui 在处理复杂应用时不用考虑过多细节与状态.

  2. react 有丰富的 UI 组件可以用

至于页面渲染时间, 10-50ms 我自己是感觉不到区别

huacnlee 回复

非常感谢详细回复,帮助很大。我暂时就不考虑前后端分离的办法。才注意到 homeland 原来一直在更新,并且是 mit license,会考虑基于 homeland 做应用,谢谢 ruby-china 团队对社区的贡献!

jicheng1014 回复

按我最近的理解,react 的一个主要缺点就是首页载入的等待时间,也许只是几十 ms,在单页应用里它只出现一次,问题不大。但是在类似 ruby-china 这样的网站里,如果每个页面都重新加载等待这几十 ms,能感觉到延时。

显示器刷新频率 30 和 60 的差别只在 16ms, 差别是比较明显的。

hbm 回复

首页载入倒不会在每个页面都出现,载入首页(或者任何一页)后,进入其它页面就是 ajax + 前端渲染了,比单纯服务端渲染快。然后 homeland 用了 rails 的 turbolinks 模拟 ajax + 前端渲染的效果,增加了换页的速度。

花一天时间体验一下 next js,就会改观的,erb 的开发体验已经跟不上这个时代了

mizuhashi 回复

需要用 rails 的 api 模式 还要一个 node 实例做渲染吧 改动大了一些

mizuhashi 回复

你说的是开发体验,楼主说的是用户体验。而且所谓的开发体验也要看具体场景,并不绝对

hbm 回复

前端直接部署到 zeit now(现在叫 vercel)就行,只需要管 api 服务器

react 照样可以 lazy load,除去 react 本身的包有点大之外并不会导致加载速度慢的问题

14 楼 已删除
mizuhashi 回复

可以讲一下erb 的开发体验已经跟不上这个时代了的原因吗?是哪个 next js 特性让你有这个观点?

看了 next js 的官网,比较吸引人的特性是零配置、ready for production。我没用过 next js,只用过 ant design pro,ant 也有这 2 个特性。

我喜欢 React、Vue 的原因跟 4L 一样:

不用用 JS 修改 DOM,关心 State 即可,框架会根据 State 渲染出对应的 UI UI 框架(ant design 等等)提供了丰富的组件 即使有这 2 个优点,对于网站后台类型的网页(交互相对简单),我觉得还是后端渲染方便些。

hjiangwen 回复

表单啊,就光是做表单,用 react+api 也比用 rails form 方便,重用方便,样式管理方便,逻辑也看得更清楚。后端渲染唯一的优势就是 seo,但是 next 可以全自动处理 ssr

后台啊,那就比文章型的更难了,我还以为说文章型的比前后分离方便,后台要是用到 sjr,那也是必然不可能比纯前端写方便的

mizuhashi 回复

服务器渲染网站还有一个优点,省内存省 CPU,不要小看这点,无论哪种应用,最后功能拼完了,就是拼性能,否则 zoom 也不会在会议软件一片红海中胜出了。

没啥好争论的,当你发现传统项目前端实现某些功能开始有些吃力的时候,自然会去用 React/Vue,否则则不需要

需要 登录 后方可回复, 如果你还没有账号请 注册新账号