Improving performance for Cordova DOM painting

mobile
1

I’ve noticed a correlation between # of list elements and WKWebview’s ability to repaint the DOM while scrolling on both iOS and Android. I’m experiencing this on 1.2.1 and 1.3 on both iOS and Android, and have tried every CSS / Cordova ‘hack’ I can find to improve performance.

An infinite scroll implementation would partially solve scrolling down, however if scrolling quickly upward, it will repaint & lag on the repaint. Has anyone experienced behavior similar to this?

GIFs (quality is choppy but you’ll get the idea):

<li class="vendor__list-item {{#unless this.open}}is-closed{{/unless}}" style="background-image: url('{{this.company_picture}}');" id="{{this._id}}" >
    <div class="vendor__list-item-mask">
      <img src="/images/loader-white.gif" class="vendor__list-item-mask-img">
    </div>

    <div class="vendor__list-item-container">
      <div class="vendor__list-item-info">
        <div class="vendor__list-item-title">{{this.company_name}}</div>
        <div class="vendor__list-item-hours {{#unless this.open}}is-closed{{/unless}}">
          {{#unless this.open}}
            Closed
          {{/unless}}
        </div>
      </div>
    </div>
  </li>
2

Does it work any differently if you just open the page in the mobile browser?

Check the resolution of the images and ideally make them the exact size that they will be displayed at on the mobile device (excessive resizing up or down will quickly destroy any dreams you may have had of decent performance :slight_smile:

3

@ephemer: Wow that was it - been pulling my hair out for a while with this one, never thought to check the resolution. Put them at 20% original resolution and it’s running amazingly. Thanks!

1 Like