Caricamento CSS lento in Chrome

Question

Ho riscontrato alcuni casi strani di problemi di posizionamento durante il caricamento lento di CSS in Chrome, ad es. il posizionamento di alcuni elementi (assoluto, relativo e in cascata) è fuori da un margine a volte enorme.

Fondamentalmente quello che sto facendo è lasciare fuori il caricamento standard del foglio di stile tramite un link-Tag e invece posizionare un segnaposto span-Tag per il gusto di avere un modo semplice per recuperare l'URL più tardi alla fine del il tag del corpo. Dopo il DOM caricata completamente, sostituisco l'arco-Tag con un generato link-Tag in questo modo:

loadCSS: function() 
{ 
    var el = jQuery('.is_css'); 
    if(!el.length) return; 

    // Build link element 
    var linkEl = jQuery('<link />').attr({ 
     media: 'all', 
     type: 'text/css', 
     rel: 'stylesheet', 
     href: el.data('src') 
    }); 

    el.replaceWith(linkEl); 
} 

posso verificare che il CSS è a pieno carico come la maggior parte degli elementi sono alla ricerca esattamente come se a incorporare la CSS direttamente nell'head-Tag. La mia ipotesi è che Chrome non calcoli correttamente le posizioni in alcune circostanze per elementi posizionati in modo assoluto o relativo quando il CSS viene caricato dopo che il DOM è stato caricato.

Vorrei fornire frammenti HTML/CSS, sfortunatamente è fuori dall'ambito per isolare gli Elementi falsamente resi. Quindi, invece, sto chiedendo se qualcuno ha riscontrato problemi simili che possono causare questo comportamento. Forse ci sono alcuni suggerimenti generali su come risolvere questi problemi.

Cordiali saluti

Answer 1

Sutuma,

La metodologia che si sta cercando potrebbe avere un forte impatto sulle prestazioni. Come principio, è necessario caricare i CSS prima che il DOM HTML sia reso per avere un effetto. La mia ipotesi è che il tuo html sia reso prima che i CSS vengano caricati. Ecco l'opzione che puoi provare: 1. Carica tutti i CSS nel tag di intestazione html 2. Ricarica la pagina html di uno css il contenuto è scaricato. 3. È possibile utilizzare il template html con (richiede js + richiede il plugin css) per il caricamento lazy.

require js, require-css plugin