1. Inicio
  2. Pregunta y respuesta
  3. Cómo pedir <script> etiquetas contra <style> etiquetas en el marcado HTML para obtener los mejores resultados

Cómo pedir <script> etiquetas contra <style> etiquetas en el marcado HTML para obtener los mejores resultados

2010-03-30 20 views
10

Estoy construyendo mi sitio en http://royronalds.com, y estoy tratando de averiguar qué orden de elementos en el <head> tiene más sentido. Sólo para tomar de lo que actualmente tengo, tengo:Cómo pedir <script> etiquetas contra <style> etiquetas en el marcado HTML para obtener los mejores resultados

  • <head>
  • <style> estilo externa
  • <meta>
  • <title>
  • <link> a favicon
  • <script> para jQuery
  • <script> principal javascript para el sitio
  • <script> google analytics, script asincrónico.
  • </head>

razones hay para ordenar estos de manera diferente para que los tiempos de carga y otros problemas ocurren con más facilidad, y si es así, ¿cuál sería el orden ideal?

Fuente

2010-03-30 Kzqai

Respuesta

6

Los navegadores modernos esperan con cualquier tipo de representación hasta que se recupera toda la sección <head> (incluidos los archivos vinculados dentro de ella). Por lo tanto, el orden no importa para rendimiento. Para Javascript, el orden de los archivos es el orden de ejecución. Para las hojas de estilo, el orden determina la precedencia (la regla que se definió último tiene prioridad si todas las demás cosas son iguales).

Si desea optimizar el rendimiento del cliente, es muy recomendable mover su Javascript incluye a the very end of the <body> element, en lugar de ponerlos en el <head> en absoluto. Hay más consideraciones, vale la pena leer su tiempo Yahoo's list of optimisations. Google has some good advice también.

Fuente

2010-03-30 21:07:34 molf

+1

El orden de ejecución para scripts asíncronos no es necesariamente el orden en que aparecen en la página. Tampoco es necesariamente recomendable colocar scripts asincrónicos en la parte inferior. En muchas páginas, colocar secuencias de comandos asincrónicas cerca de la parte superior puede reducir el tiempo total de carga de la página sin bloquear el contenido debido a un mayor paralelismo. – Brian

6

Una cosa que puede tener un gran efecto es mover las etiquetas <script> al pie de la página si no son esenciales para el contenido.

Por ejemplo, me muevo de Google Analytics <script> etiqueta a ser la última cosa antes de la etiqueta </body> en cada página. Las etiquetas de secuencia de comandos son "contenido bloqueado", por lo que el navegador no continuará con una página de renderizado hasta que la secuencia de comandos se haya descargado y ejecutado. Es probable que los archivos principales de javascript y JQuery no se puedan mover tan fácilmente, dependiendo de cómo los esté usando, pero es posible que los análisis estén en la parte inferior.

Consulte YSlow best practices para obtener más técnicas de optimización.

Fuente

2010-03-30 21:06:52 zombat

+1

Las etiquetas de script asíncronas como el fragmento de seguimiento asíncrono de Google Analytics no bloquean el contenido como lo hacen los scripts normales. Por favor vea: http://www.stevesouders.com/blog/2010/03/03/p3pc-google-analytics/ – Brian

+0

Interesante. Ese es un cambio relativamente reciente al código GA. No estaba al tanto, gracias por el enlace. La mayoría de los sitios probablemente sigan utilizando el viejo script no asíncrono a partir de los sonidos del mismo. – zombat

+0

La mayoría de los sitios lo hacen, y su comentario definitivamente se aplica al fragmento de GA no asíncrono. Solo quería señalar que esta pregunta me preguntaba acerca de async GA. – Brian

0

Considere también el hecho de que los navegadores detendrán la ejecución de javascript cuando se produce un error.

Debido a esto, es muy importante que su trabajo javascript en todos los navegadores de lo contrario corre el riesgo de su código de Analytics no ejecución y la captura de las estadísticas ...

que suelo poner mi Google Analytics por encima de mi propio código para que se ejecute primero, y si en el raro caso de que mi código se rompa o cause errores JS, aún puedo obtener información de seguimiento.

mi orden sería:

<head> 
<meta> content encoding 
<title> 
<link> favicon 
<style> external/third-party stylesheet 
<style> site stylesheet 
</head> 
<body> 
... 
<script> google analytics 
<script> jQuery 
<script> jQuery plugins 
<script> site javascript 
</body>

Fuente

2010-03-31 02:33:45 farinspace

+1

Los navegadores solo detienen la ejecución del script para la etiqueta del script donde ocurre el error. Continuarán ejecutando código en otros scripts. Tener un script roto encima del script GA no detendrá el seguimiento del envío de balizas. – Brian

1

por cierto, trata de AntiSpam su dirección de correo electrónico ...

es decir:

<SCRIPT TYPE="text/javascript"> 
document.write('<A HREF=' + '"mai' + 'lto:' + '[email protected]' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>') 
</SCRIPT>

Funciona para mí ...

Fuente

2010-03-31 11:00:30

+0

Sí, intentaré pensar en algo (preferiblemente algo más accesible) para eso. – Kzqai

Cuestiones relacionadas

 Cuestiones relacionadas