Rails 关于 Rails 5 移动端页面加载速度

geriyoga · 发布于 2017年01月03日 · 最后由 gazeldx 回复于 2017年01月04日 · 1241 次阅读
96

今天在生产环境下测试app速度,PC端差不多500ms左右,在微信内置浏览器打开需要6-7S,差距为何这么大,是不是哪里配置没有做好?

共收到 50 条回复
6764

PC 端设置下 throttling 看下呢

96

PC端与移动端都是在同一个WLAN环境下测试的。。。而且用throttling测,标准移动网络下好像也没那么慢

De6df3

网站地址给出来看看啊,光这点信息怎么能发现问题?

2973

微信有没有重新编码呢?

96

#4楼 @small_fish__ 请问微信重新编码指什么?。。。我这个案例是放在微信公众号中,只是简单地打开一个RAILS开发的APP链接。。。初始页面完全呈现出来的时间大概需要6-7S,但同样的链接在PC端差不多500MS就OK,两者在相同的wlan环境下测试。。。案例有使用react.js for rails,我在网上搜,好像移动端的html,javascript处理性能较pc短低不少,难道会低这么多吗?。。。就是想问下大家开发有没有遇到类似问题?是否我的rails配置存在问题,或者说有其他优化方法。。。谢谢

96

目前没有使用图片等资源,仅仅用的react的一些组件。RAILS有配置支持GZIP

96

#3楼 @huacnlee 因为还没有部署正式服务器,没有一直在线,页面也比较简单,所以就不提供了。整个页面就是用rails-react 做得一个初步的页面,只使用了nav/面板等基本组件,就类似我们ruby china推荐的那篇react.js for rails指南那篇翻译的文章。。。。另外有使用bootstrap,就是这样,没有其他东东。

1

用 newrelic 监控页面耗时看看。

96

#8楼 @Rei

newrelic没有pro版,看不到详细的加载时间,大概就是上面这图,4.62S,network时间应该就是加载react.js等相关文件的时间吧,这个在PC上很快。 这个就是通过手机微信公众号浏览器浏览的响应时间记录

1

#9楼 @geriyoga pro 版有试用。

96

#10楼 @Rei pro试用版好像没有了,没注意怎么回事😀 Session Traces Now that your Browser Pro Trial has ended your account has reverted back to Lite. You can enjoy Browser Lite features for free, forever.

To continue to access your Browser Session Traces including every loaded asset, ajax request, user interaction (like clicks and scrolls), JavaScript event, and error – upgrade to Browser Pro today.

1

#11楼 @geriyoga 以前已经用完了。你可以找找其他替代品,微信的问题,桌面调试工具不一定能重现,依靠监控工具比较好。

De6df3

想办法把网站发出来看,问题就很容易发现了。

你如果都能描述清楚怎么弄的,你就能找到问题在哪里了,你可能说很多都是一些无关紧要的地方。

此外 NewRelic 搞不定就先别管了,不要从一个问题转移到另外一个问题上面去

96

哦。。好的,再找下看看。。。。。发这个贴主要目的就是看看各位凭经验感觉,微信浏览端有没有可能有大的提升,这个以前没有用rails做过。。。另外就是还有一个问题,微信端似乎没有缓存下来,不知什么原因,每次打开页面都差不多是这种同样时间,也就是说react等相关资源并没有在手机微信内置浏览器中缓存下来。

De6df3

再比如,你说 PC 浏览器没问题,微信浏览器有问题,那你有没有试过其他手机端的访问方式?以及速度怎么样?

实际上微信的浏览器打开很多网站都很慢的,可能是它在载入之前做了许多事情,例如安全检查,说不一定还有链接替换

96

#15楼 @huacnlee 谢谢了,请问现在在线吗?

就这个链接,简单的测试页面,chrome打开速度大概400多ms,通过微信公众号内打开需要接近5s.

96

#17楼 @huacnlee 请再试下,刚才防火墙有做控制

De6df3

#18楼 @geriyoga

https://bam.nr-data.net/

这个是什么东西,先去掉试试,我这里加载要 3s

把你的 CSS 移到 JS 前面去 很有可能由于微信内置浏览器机制的问题,他要等待这些东西都加载好,计算完成以后才显示界面。

96

#19楼 @huacnlee 不清楚啊。。没有添加过这种啊?https://bam.nr-data.net/。。。。

De6df3

#20楼 @geriyoga HTML 头部哪两段 <script> 移到页面的最后,或者最好先去掉,试试微信速度在说

1

nrdata 是 new relic 收集节点

96

好的,我马上试试

96

#21楼 @huacnlee head里面几个东东暂时都拿掉了,请看看,然后再一个一个加上去看看

De6df3

#24楼 @geriyoga 把 newrelic 的 gem 去掉先

96

#21楼 @huacnlee 我这边看好像速度还是慢,已经没什么东西了

De6df3

这不是东西么?该去掉的每去掉 😪

96

#27楼 @huacnlee 稍等,我看看😁

96

#27楼 @huacnlee 奇怪,applicaion模版head中已经清空了,还是有。。。系统自动加上的?还有哪个位置可能有加

De6df3

#29楼 @geriyoga

前面都说了啊,去掉 gem 'newrelic-rpm'

96

#30楼 @huacnlee 现在速度好像还行吧,呵呵,已经没东西了

De6df3

#32楼 @geriyoga 剩下的问题仔细看我前面的回复,尤其是 #19楼

96

好的,我马上试试。。。。“把你的 CSS 移到 JS 前面去 很有可能由于微信内置浏览器机制的问题,他要等待这些东西都加载好,计算完成以后才显示界面。”

96

#33楼 @huacnlee 👍 ,好像可以了,把js那段放到页面最后,其他恢复原样。。。请帮看看目前情况怎么样?

De6df3
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>

这段也去掉试试?

96

#36楼 @huacnlee 已经清掉,这段系统自动给的

96

#35楼 @geriyoga 还有什么可以优化的地方吗、

De6df3

不是你一个人慢,都他妈这样,微信浏览器干了什么事,可能

https://www.zhihu.com/question/26249152

2016 年,我们终于干掉了 IE6,结果却来了个微信浏览器...

96

#39楼 @huacnlee 哦。。是啊。。不过刚才这些已经很不错了。。。rails自动生成的代码,是不是可以建议对针对移动端进行优化呢?,呵呵。。。。。我这边也再深入了解下,多谢多谢!👏

De6df3

#38楼 @geriyoga 你最后试试在 application.js 那个 <script> 上增加 async="true" 看看是否有改观,我怀疑微信浏览器是等 JS 算好以后才显示的。

96

#41楼 @huacnlee 哦。。好的,我现在试试看

96

#41楼 @huacnlee async设置后好像面板列表出不来,请看看。。。我开始以为是写错,换了几种写法都一样

1

#40楼 @geriyoga 锅给微信,鬼知道它怎么执行的。

从 newrelic 粗报看,花了很多时间在网络,可能把下载并发调得很低,碎文件打包成一个可能有帮助,但没有详报只是猜的。

1

#43楼 @geriyoga async 改变 js 执行顺序,如果 js 有依赖关系需要改写。现在不是首选项。

96

#45楼 @Rei 哦。谢谢。。刚才按照@huacnlee的提示,,目前微信中页面打开速度应该在2S内,还没有newrelic测试。。

96

#45楼 @Rei newrelic pro版好贵啊,每月75美元?

96

@huacnlee @Rei 这是通过newrelic测试的响应时间图,平均4.62S ->平均537ms,前后对比,简直有点神奇,多谢两位的帮助。

68

#44楼 @Rei #41楼 @huacnlee 确实存在在微信和QQ浏览器中打开慢,在其它手机浏览器中打开很快的问题。 不过当小文件有缓存后,再打开就快了。但第一次访问许多时候要花去8秒时间,这个是不可原谅的。 这个问题我也遇到了,我还在找原因我解决方法。 当然,最好是QQ浏览器团队解决掉这个问题。腾讯要是经查在玩一些恶心的事情,就Lose face了。

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