开发者问题收集

如何提高reactjs在移动端的初始渲染性能?

2016-05-16
1141

我有一个用 reactjs 写的应用,组件渲染速度很快,但是页面渲染速度太慢了,在电脑上大概需要 2 秒,但是在手机上,页面渲染速度要 8 秒左右,太慢了。

有没有什么通用的方法可以提高网站的加载速度?

我用 chrome timeline 分析了一下性能,发现 browser.js 耗费了大量的时间。我想知道将 reactjs jsx 转换为 javascript 是否有帮助。

我还看到在显示 dom 之前有一个长时间的停顿,我不确定浏览器在此期间做了什么以及如何解决这个问题。

在此处输入图像描述

1个回答

您绝对应该为生产预编译您的 React 代码。另外,将 process.env.NODE_ENV 设置为 production 也非常重要。这将大大加快一般和初始渲染速度(对于服务器端渲染更是如此)。 您可以为此使用 browserify 插件 envify ,或相应的 webpack 插件(取决于您的堆栈)。

此外,我推荐这个会议演讲,其中包括许多其他次要/主要的渲染加速: https://www.youtube.com/watch?v=PnpfGy7q96U

Scarysize
2016-05-16