Как можно оптимизировать HTML & JS в проекте под android?
Вообщем с ростом html структуры и кода JS в смартфонах начинаются различные проблемы. Например при использовании translate для выезжающих div (для реализации окон-activity) начинают возникать тормоза анимации как с CSS так и при помощи js движка (например Anime.js || TweenMax). Либо допустим был такой момент: в html при загрузке сразу лежал div (аля popup окошечко) c двумя тегами video, сам div был за пределами окна + display:none. Однако когда нужен был div с скроллом, где большой список картинок, обнаружилась проблема с рендером при скроллинге, т.е. в смартфоне листая скролл все объекты вырисовывались с тормозами и если резко мотануть скролл, становился чистый div и только через пару секунд прорисовывались объекты. Методом проб, обнаружил что удалив div c video все стало лучше и без тормозов, в итоге сделал чтоб video тег динамически вставлялся из JS когда был нужен, а после удалялся снова.
В итоге возник вопрос, есть ли статьи или может ваши рекомендации из опыта, какие могут быть подобные ошибки в html и js, которые в итоге выливаются в медленную анимацию, торможение, съеданию лишней оперативной памяти ну и вызывающие нагрузку на цп\гпу смартфона?
Буду очень благодарен за подсказки, ссылки на статьи и за совет из вашего личного опыта! :)
Спасибо, но все что нашел это ссылку на mikamai где всего два пункта это использование transitions css и ajax loading - и первое и второе используется(css кстати глючит больше чем JS анимация). Еще видел includeHTML однако тут тоже не то немножко, так как проблем с загрузкой долгой нет, есть проблема именно с рендером всяческих движений (анимация, скролл, трансформация).
Сам я фонегап и джикверимобайл не использую в проектах.
Чем у Вас реализованы движения и трансформации, может проблема в синхронных таймерах на js?
Я использую (уже давно!) crafty.js для анимаций/2D-игр и на супер-старых мобилах (Android 2.3-4.2) очень шустро работает (это без phonegap, просто в родном браузере).
xmoonlight, использую anime js по тестам (где сравниваются все известные библиотеки) смотрел не уступает твинмакс. Надо посмотреть и изучить что за зверь такой этот крафти :)
До этого было на CSS но на не мощных смартфонах глючило слишком уж, даже учитывая что я использваол transform3d, а вот anime.js по лучше стало, но все равно чутка есть лаги. Особенно при долгой работе в приложении.
alexjet73, лупы анимаций - делаются всеми по-разному. Здесь нужно смотреть код.
У крафти - есть плагин по выводу fps с графиком нагрузки.
Сложные вещи - пишутся на C, затем перегоняются в webAsm через emscripten и потом C-функции вызываются уже из клиентского js.
Это даёт в 4 раза прирост производительности.
