Question

这与应用程序中的webview相关（iPad 2，因此使用WebKit）。

似乎布局立即发生，但它没有立即绘制到屏幕上。

我的HTML输出看起来与此示例有点相似，

<div style="position:relative;width:1024px;height:768px;" data-reactid=".0.1.0">
    <img src="blob:http%3A//localhost%3A8080/d4e138d6-aa6b-41a6-878b-8ee26ba450a3" style="position:absolute;left:51.055712117927555px;top:93.9596791675699px;width:972.9442878820724px;height:157.16280078040322px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4////fwAJ+wP9CNHoHgAAAABJRU5ErkJggg==);" data-reactid=".0.1.0.$notation-1728">
    <img src="blob:http%3A//localhost%3A8080/b860fbef-8b40-4a09-9d00-2575fac9bb8c" style="position:absolute;left:4.661608497723819px;top:271.12247994797315px;width:1019.3383915022762px;height:191.79189247778018px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4////fwAJ+wP9CNHoHgAAAABJRU5ErkJggg==);" data-reactid=".0.1.0.$notation-1729">
    <img src="blob:http%3A//localhost%3A8080/2b655007-792a-4ad7-8fcd-42b9ece6ec2f" style="position:absolute;left:4.661608497723819px;top:482.9143724257533px;width:1019.3383915022762px;height:188.46217212226315px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4////fwAJ+wP9CNHoHgAAAABJRU5ErkJggg==);" data-reactid=".0.1.0.$notation-1730">
</div>

图像通过React
使用blob网址有三张图片
所有blob都是在启动时从base64字符串生成的，并且不会重新计算（确认是这种情况）
有少量CSS定位和其他样式
base64字符串不大于60kb，因此图像不大于40kb
图像按比例缩小

您可以导航到不同的部分，这些部分将在略有不同的位置（通过React完成）替换具有相似数量图像的图像。

但是，更改部分的速度很慢。看到新的部分感觉就像400-600毫秒。

我有一个没有使用react的实现：每个部分都放在一个div上，除了当前部分之外的所有部分都将在屏幕外。当你改变部分时，我只会移动div。此过程在几毫秒内完成，但仍然需要相同的400-600毫秒来查看屏幕上的更改。这导致我得出第二句话：布局立即发生，但它没有同时绘制到屏幕上。

我是否认为布局和绘图在不同时间发生？我可以使用任何优化措施吗？

Webkit Performance渲染5-ish图像

0 个答案: