Come javascript nel blocchi di rendering HTML, non è forse il caso con i CSS anche?

StackOverflow https://stackoverflow.com/questions/4026183

  •  26-09-2019
  •  | 
  •  

Domanda

Come JavaScript in blocchi di rendering HTML, ed è buona norma tenere JavaScript in fondo, poco prima della chiusura tag body, non è forse il caso con i CSS anche?

Lo so che non possiamo tenere fuori CSS esterno.

È stato utile?

Soluzione

CSS non bloccare nello stesso modo in JavaScript fa

Per citare Developer Network Blog di Yahoo

  

Con fogli di stile, resa progressiva è bloccato fino a che tutti i fogli di stile sono stati scaricati. Ecco perché è meglio spostare i fogli di stile nell'intestazione del documento, in modo da ottenere scaricati prima e il rendering non è bloccato. Con gli script, la resa progressiva è bloccato per tutti i contenuti sotto lo script. Spostamento di script come basso nella pagina come possibile mezzo c'è più contenuti al di sopra dello script che è reso più presto.

Inoltre, quando CSS viene aggiunto alla testa, viene analizzato prima, e si traduce in HTML viene designato anche come viene scaricato. Questo evita il Flash di contenuti senza stile che succede se si inserisce tag di stile in fondo a una grande pagina di HTML.

Altri suggerimenti

Non solo i CSS non blocca la strada Javascript fa, ma anche alcuni browser farà cose strane se si mette CSS ovunque, ma la <head>, come ignorarlo, o applicare in maniera incompleta. HTML5 vieta in realtà <style> di apparire <head> esterno (se non con la funzione di "ambito", che AFAIK nessuno implementa ancora).

fogli di stile CSS vengono caricati utilizzando l'elemento <link>, questo elemento è valida solo quando è nella testa del documento. Per quanto riguarda i CSS bloccare il rendering HTML, questo non è il caso perché il CSS viene applicato una volta che il browser viene caricata proprio come gli altri elementi <link>. blocchi JS HTML perché il browser assume il JS vuole prendere il controllo ed effettivamente fare qualcosa prima di caricare completamente il DOM, in fondo JS viene eseguito e poi lasciato solo.

Pensateci, se CSS è stato caricato lo stesso JS, nessun elemento verrebbe designato perché sarebbe riferirsi ad elementi non ancora caricati, quindi viene applicato successivamente e non blocca il caricamento.

No, css si applica ai DOM elemento di destra dopo che il browser leggere il css.

In caso di JavaScript è possibile mantenere lo script alla lettura, in quanto si rendono eseguito dopo tutti i carichi html, come: 

window.onload = function (){

//here we start
}

JS

Da JS può cambiare la tua pagina web (modificare il DOM) browser attendere che tutti JS esterni da scaricare (parallelamente), interpretati ed eseguiti prima di continuare con il resto del codice HTML che viene dopo <script src="..." > Quindi è buona norma mettere tutti JS esterni al fondo del <body>. In questo modo il codice HTML viene analizzato e reso e l'utente ha la sensazione che qualcosa sta accadendo ...

CSS

CSS d'altra parte non può cambiare il DOM, non può apportare alcuna modifica "pesanti" sulla pagina e che è il motivo per cui il browser non blocca download, l'analisi del resto del codice HTML, e il rendering progressivo è caso con il JS. Sembra che lo fa bloccare il rendering, ma è ancora meglio per metterlo in alto e evitare la lunga FOUC . Esso non blocca download, anche se

Ora, sembra che con l'aumento dei dispositivi mobili mettere il vostro CSS per il vostro HEAD e JS in fondo non è abbastanza ... Si vuole mettere l'ATF (sopra la piega) CSS in linea e il resto della tua enorme CSS minimizzato insieme con i vostri JS - in fondo / defered e asincrone

Date un'occhiata a questo: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

Perché sarebbe una buona pratica per mantenere Javascript in fondo?

Direi che meglio pratica di mettere i CSS e JavaScript in file separati e inserirli nel documento HTML utilizzando la sezione <head>.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top