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

geriyoga · 2017年01月03日 · 最后由 StephenZzz 回复于 2019年05月30日 · 3788 次阅读

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

PC 端设置下 throttling 看下呢

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

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

微信有没有重新编码呢?

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

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

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

用 newrelic 监控页面耗时看看。

#8 楼 @Rei

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

#9 楼 @geriyoga pro 版有试用。

#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.

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

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

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

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

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

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

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

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

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

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

#18 楼 @geriyoga

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

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

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

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

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

nrdata 是 new relic 收集节点

好的,我马上试试

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

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

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

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

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

#29 楼 @geriyoga

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

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

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

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

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

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

这段也去掉试试?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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