Wie verbessert man die anfängliche Rendering-Leistung von mobilen Geräten?

Question

Ich habe eine App in reactjs geschrieben, es ist ziemlich schnell, wenn die Komponenten gerendert werden, aber es ist zu langsam für die Wiedergabe. Auf dem Computer dauert es ungefähr 2 Sekunden, aber auf Mobilgeräten dauert es etwa 8 Sekunden, bis die Seite gerendert wird. Das ist wirklich zu langsam.

Gibt es generische Methoden, um die Ladezeit für die Website zu verbessern?

Ich habe Chrome-Timeline verwendet, um die Leistung zu analysieren. Ich habe gesehen, dass viel Zeit mit browser.js verbracht wurde. Ich habe mich gefragt, ob die Konvertierung von reactjs jsx zu Javascript hilft.

Ich sah auch, es gibt eine lange Pause, bevor die Doms gezeigt werden, ich bin mir nicht sicher, was der Browser während dieser Zeit tut und wie man das löst.

Answer 1

Sie sollten auf jeden Fall vorab kompilieren Sie den Code für die Produktion reagieren. Außerdem ist es sehr wichtig, dass Sie process.env.NODE_ENV auf production setzen. Dies wird das allgemeine und anfängliche Rendern um einiges beschleunigen (noch mehr beim serverseitigen Rendern). Dazu können Sie das browserify-Plugin envify verwenden, oder das entsprechende Webpack-Plugin (abhängig von Ihrem Stack).

Auch empfehle ich, diese Konferenz zu sprechen, die viele andere kleinere/Haupt Rendering-Geschwindigkeit-ups umfasst: https://www.youtube.com/watch?v=PnpfGy7q96U