¿El JavaScript en línea es bueno o malo?

Actualmente he cambiado de WordPress a Yii framework y un desarrollador externo está reconstruyendo mi sitio.

Una cosa que noté es que cada vez que invoca AJAX / jQuery de la manera Yii, inserta insertos JavaScript en línea en la página web. Aunque parece que el código JavaScript se coloca debajo del pie de página, todavía está en línea.

En general, parece que el código JavaScript se coloca con mayor frecuencia dentro de la página web. Siempre he pensado que los scripts de JavaScript deberían, en la medida de lo posible, colocarse en archivos de JavaScript. ¿Es esta una tendencia "nueva" que viene? ¿O debería intentar mantener el código JavaScript en archivos separados?

JavaScript en línea aumenta los tiempos de descarga de la página, lo que no es bueno. Con una llamada a un .jsarchivo, al menos estas pueden ser llamadas paralelas y los tiempos de descarga de contenido disminuyeron. Sí, hay momentos en los que está bien poner JavaScript directamente en el código HTML, pero a menudo es mejor descargarlo tanto como sea posible.

Tenga en cuenta que los tiempos de descarga de la página (es decir, el HTML) y no todas las llamadas de recursos afectan las métricas que afectan la clasificación (aunque no sea como PageRank o en los SERP). El punto es que afecta el rendimiento de un sitio para SEO, sin embargo, se manifiesta.

En mi sitio de conversión de moneda, la mayoría de las sesiones son vistas de una sola página. Esto se debe a que los usuarios pueden hacer su cálculo de moneda directamente en la página de destino (todo el cálculo se maneja del lado del cliente con JavaScript).

Mi página se descarga y se procesa en aproximadamente la mitad del tiempo cuando todos los recursos (css, js e incluso imágenes ) están en línea en la página. Debido a que muy pocos de mis usuarios ven varias páginas, no me beneficiaría mucho que algunos de estos recursos se almacenen en caché entre las vistas de página.

Mi sitio no es típico. La mayoría de los sitios tienen varias páginas por sesión e imágenes grandes que harían que mi técnica sea menos aplicable. No hay una solución correcta para esta pregunta; Depende del sitio. Debe medirlo usted mismo según el comportamiento típico de sus usuarios.

No es necesariamente malo tener JavaScript dentro de su archivo HTML, pero debe tomar una decisión al respecto.

Que es malo si usted tiene una gran cantidad de JavaScript se utiliza a través de múltiples páginas. En ese caso, el JavaScript debe estar en un archivo externo, comprimido y almacenable en caché y, si su sitio tiene mucho tráfico, debe utilizar un CDN.

Sin embargo, si tiene una pequeña cantidad de JavaScript, el hecho de tener que realizar una solicitud HTTP adicional para recuperarlo puede negar el guardarlo en un archivo externo. En este caso, sería más eficiente mantener el JavaScript en su página.

Por otra parte, si se utiliza este pequeño fragmento de JavaScript en varias páginas, sería beneficioso colocarlo en un archivo externo para aprovechar el almacenamiento en caché.

En última instancia, debe sopesar el tamaño del JavaScript frente a la sobrecarga de realizar solicitudes HTTP adicionales. En su mayor parte, para un sitio 'promedio', probablemente no va a hacer una gran diferencia solo ponerlo en un archivo externo.

Soy desarrollador de Yii y puedo decirte que Yii no tiene nada que ver con esto . Está completamente del lado del desarrollador , ya sea que él o ella coloque el código Javascript en un archivo separado y lo registre con la página HTML (ver) con CClientScript::registerScriptFilemétodo o lo ponga directamente para ver el código (HTML) y regístrelo usando el CClientScript::registerScriptmétodo.

Según su respuesta, la mayoría de los desarrolladores de Yii (¿profesionales?) Votan firmemente por el primer enfoque, es decir, mantener la mayor cantidad de código Javascript en archivos separados como sea posible. Por lo tanto, esta no es una nueva tendencia de codificación, sino una mala práctica del desarrollador. Al menos, así es como se ve en la comunidad Yii.

EDITAR : En realidad, me olvidé del argumento más importante. Yii (así como la mayoría de los demás frameworks PHP profesionales) se basa en el patrón de diseño MVC (en realidad: patrón arquitectónico). Y se puede usar el mismo patrón al frente: el código HTML es el modelo (datos), CSS es la vista (decorador) y Javascript es el controlador. Todos ellos se colocan en archivos separados , .jsy .cssarchivos: minificados, obscurecidos y comprimidos en el mejor escenario.

Cuando construye su aplicación Yii, puede romper el patrón MVC y mantener todo en el mismo archivo. La pregunta es: ¿vale la pena hacerlo? ¿Cuáles son los beneficios (ninguno) y hacia dónde los llevará? Puede usar la misma argumentación, al preguntar, si debe mantener el código JS en línea o no.

De hecho, depende del propósito de la página web que está desarrollando:

Utilizo una pequeña cantidad de JavaScript en línea, mientras que prefiero buscar archivos externos de JavaScript si es grande.

De cualquier manera, cuando la página carga JavaScript, primero debe ejecutarse. La mejor práctica es usar JavaScript externo para que no alargue el contenido de su página. También facilita la depuración.

La respuesta realmente depende de lo que se esté haciendo.

Si observa JavaScript en línea que se utiliza en todo el sitio web (por ejemplo, un widget que se muestra dentro del encabezado en todas las páginas del sitio web), entonces sería apropiado moverlo a un archivo JavaScript "común".

De hecho, movería la mayor cantidad de JavaScript posible a un archivo JavaScript común, incluso si se usara en una sola página. Configuraría el servidor para enviar encabezados fuertes de almacenamiento en caché y compresión para archivos JavaScript; lo que reduce el tamaño de la (s) página (s) pero no aumenta mucho el tamaño del archivo JavaScript.

Por otro lado, si JavaScript es simplemente un conjunto de opciones de configuración / inicialización, por ejemplo:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

donde por alguna razón no fue posible mover el código a un archivo JavaScript externo (por ejemplo, cuando los parámetros de la imagen provienen de la base de datos) lo mantendría en línea. Dicho esto, elegiría complementos de terceros que sean "discretos" (o los convierta como tales).

Estas respuestas dan en el blanco. Echa un vistazo al almacenamiento en caché en línea .

Dado que Yii está codificado en PHP, un patrón PHP común (o quizás poco común) que encontrará es que los desarrolladores a veces escriben código PHP para generar código Javascript dinámicamente en el servidor, en función de algún estado, condición o valor conocido por el servidor. y luego lo envía todo al cliente en un lote, lo que permite al cliente ejecutar la función y omitir parte del cálculo que ya ha realizado el servidor.

En lugar de enviar un montón de funciones genéricas de Javascript en un archivo .js al cliente que no tienen contexto hasta que se proporcionan datos (datos que pueden estar en el servidor y requieren un viaje de ida y vuelta), podemos "hornear" el contexto / datos como parte de la función Javascript. Esto es económico porque significa que está enviando la funcionalidad / datos juntos, y solo está enviando la funcionalidad / datos que un cliente puede necesitar en ese momento, en lugar de enviar toda la aplicación en la primera carga de la página. También significa que no tiene que exponer toda su aplicación para que se descargue fácilmente y realice ingeniería inversa en la primera carga de la página porque solo está inyectando pequeñas porciones de funcionalidad que cada cliente individual puede necesitar en ese momento. No estoy seguro de qué tan bien es un augurio para el SEO, pero estoy seguro de que se puede optimizar en consecuencia.

Considere el caso de un usuario final que escribe una página en algún software CMS utilizando un editor WYSIWYG. ¿Cómo va a agregar este usuario una nueva funcionalidad a la página cuando no tiene acceso a sus archivos .js de origen en el servidor? Cambian a la pestaña HTML y usan Javascript en línea.

No todo el Javascript en línea es malo; a veces onclick también está bien. Como recomendación general, evite escribir Javascript en línea y comenzará a desarrollar buenos hábitos.

Referencias

• Almacenamiento en línea
• Optimizando JavaScript dinámico con cachés en línea
• Explicación de máquinas virtuales de JavaScript en JavaScript: cachés en línea
• ¿Por qué debería evitar las secuencias de comandos en línea? (vea la respuesta de MainMa y user1389596)

Normalmente, el código JS en línea es malo, como dijeron los demás antes que yo.

Pero pienso en un caso de uso donde JS en línea es mejor .

Piense en un CMS que inserte una galería impulsada por JS. La galería puede estar hecha en jQuery. Se identifica mediante un atributo de identificación, que no solo es único en la página, sino que también es único en todo el sitio. En este caso, creo, JS en línea sería mejor, porque el código JS se usa solo en una página y no tiene sobrecarga HTTP