Webkit Performance Рендеринг 5-ти изображений
Это относится к веб-просмотру в приложении (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
- Есть три изображения, используя URL-адреса BLOB-объектов
- Все BLOB-объекты генерируются из строк base64 при запуске, и это не пересчитывается (подтверждено, что это так)
- Существует небольшое количество CSS-позиционирования и других стилей.
- Строки base64 имеют размер не более 60 КБ, поэтому изображения имеют размер не более 40 КБ.
- Изображения уменьшены
Вы можете перемещаться по разным разделам, которые заменят изображения одинаковым количеством изображений в немного разных местах (сделано через React).
Однако смена раздела происходит медленно. Похоже, 400-600 мс, чтобы увидеть новый раздел.
У меня была реализация, в которой не было реакции: каждый раздел был бы помещен в div, а все, кроме текущего, были бы размещены вне экрана. Когда вы меняете раздел, я просто перемещаю div. Этот процесс длился миллисекунды, но все равно потребовалось те же 400-600 мс, чтобы увидеть изменения на экране. Это привело меня к заключению второго предложения: что компоновка происходит немедленно, но она не отображается одновременно на экране.
Правильно ли я считаю, что макет и рисунок происходят в разное время? И есть ли какие-либо оптимизации, которые я мог бы использовать?