Rails Homeland React 前端的性能/体验

hbm · April 26, 2020 · Last by ad583255925 replied at April 28, 2020 · 4476 hits

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

如果保持前后端的分离,

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

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

服务端渲染

Reply to Rei

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

我只是好奇

类似 ruby-china 的项目

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

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

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

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

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

Reply to huacnlee

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

Reply to jicheng1014

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

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

Reply to hbm

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

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

Reply to mizuhashi

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

Reply to mizuhashi

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

Reply to hbm

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

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

13 Floor has deleted
Reply to 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 个优点,对于网站后台类型的网页(交互相对简单),我觉得还是后端渲染方便些。

Reply to hjiangwen

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

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

Reply to mizuhashi

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

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

You need to Sign in before reply, if you don't have an account, please Sign up first.