jQuery Mobile Listview é muito lento com iScroll

Question

Estou fazendo um aplicativo com PhoneGap 1.3.0 e Jquery Mobile 1.0.Para rolar um listview Quero usar o iScroll, mas o desempenho da rolagem é muito ruim.A rolagem é muito lenta.

Também fiz alguns testes.

Se eu usar o código sem jQuery Mobile é rápido

<div id="scroller">
    <ul id="thelist" >
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

...

Mas se eu adicionar o tipo jQuery Mobile listview como.

<div id="scroller">
    <ul id="thelist" data-role="listview" data-inset="true" data-theme="c">
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

Está lento.Como posso consertar isso?

Answer 1

Você pode remover o -down e -hover Estilos CSS da folha de estilos do jQuery Mobile.Ao rolar uma lista, você está "passando" o dedo sobre um item da lista, o que o aciona para alterar seu estilo devido ao -hover classe que é aplicada.Se você mudar o -hover classe seja igual à -up class, então nenhum redesenho ocorrerá e a rolagem será muito mais suave.Eu testei isso e funcionou muito bem no meu dispositivo Android 2.3.

Aqui está um exemplo do que quero dizer, observe o -up/-down/-hover versões das regras da classe:

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {
    border: 1px solid       #000 /*{a-bhover-border}*/;
    background:             #444444 /*{a-bhover-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bhover-color}*/;
    text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
}

.ui-btn-down-a {
    border: 1px solid       #000 /*{a-bdown-border}*/;
    background:             #3d3d3d /*{a-bdown-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bdown-color}*/;
    text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
}

ATUALIZAR

Então, para fazer as alterações que sugeri, é tão simples quanto baixar o framework jQuery Mobile, abrindo a versão não reduzida da folha de estilo CSS (também encontrada aqui: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css) e excluindo o -down e -hover Aulas.

Você pode baixar o jQuery Mobile aqui: http://jquerymobile.com/download/

Basicamente, procure por todos os .ui-btn-***-* declarações de classe e exclua o código dentro daquelas onde *** é igual a hover ou down, e haverá múltiplos porque há um para cada tema, é o que o último * é para, a-e.

O CSS acima ficaria assim quando você terminar:

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {}

.ui-btn-down-a {}

Observe que eu não fiz nada para o .ui-btn-up-a class, é a classe padrão e não quero alterar a aparência da página, só quero impedir que o navegador redesenhe o documento ao rolar uma lista.

Quando terminar de editar a folha de estilo CSS, copie o código e cole-o em http://htmlcompressor.com/compressor.html, escolha a opção "CSS" à direita e clique em "Compressa". Isso criará uma versão minificada da sua folha de estilo CSS pronta para o ambiente de produção (isso reduzirá bastante o tamanho do código).

Answer 2

remover .ui-btn-hover-x e .ui-btn-down-x não fez nenhuma diferença para mim.

jquery.mobile-1.1.1

remover o wrapper de conteúdo corrigiu isso para mim.

<div data-role='content'> </div>

ele rola tão suavemente quanto uma página da web no Safari.

Answer 3

Olhe para CSS3 transform

Com a aceleração de hardware habilitada, o listview jqm com iScroll está rolando como se estivesse na manteiga agora.

Este comportamento parece ter acontecido apenas em dispositivos móveis.

Fiz um violinista aqui para mostrar como funciona:(Use um dispositivo móvel para ver a diferença)http://jsfiddle.net/SuY7f/1/

Este código foi testado com Cordova PhoneGap 2.4.0