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

16

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?

Steven
fuente
¿Qué quiere decir exactamente con que inserta JavaScript en línea en la página web ?
Salman A
3
Por el bien de otros que encuentran esta pregunta y están pensando en cosas como <a onClick="function(){/* do stuff */} ">Click Here</a>esta, entiendo, se considera MUY malo y uno debería separar su código de su HTML. Ver: Este artículo
TecBrat
1
@ user1066946 t.co/j1RpJgwoku :-)
Kos
1
@ user1066946 Me gusta mucho usar Angular, acabo de observar que la "web semántica" ha hecho un círculo (en términos de mantener un código de pegamento al lado del DOM)
Kos
1
"Aunque parece que el código JavaScript se coloca debajo del pie de página, todavía está en línea". - Parece que se refiere a JavaScript incrustado , en lugar de JavaScript "en línea" (al que TecBrat se refiere).
MrWhite

Respuestas:

13

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.

closetnoc
fuente
77
¿Negociar una segunda conexión a un presumiblemente el mismo host para descargar la misma cantidad de datos es más rápido que dentro de la transmisión activa? por lo general, si obtiene, por ejemplo, 50 Kbps en un archivo a un host, comenzar una segunda sesión puede reducirlo, de modo que ambos ahora son 25 Kbps. A menos que el host esté acelerando por conexión por alguna razón.
EkriirkE
Sin embargo, hay una estafa con los archivos externos. Si no se hace correctamente, crea un código de bloqueo DOM, es decir, el disparador doc.ready es más lento, lo que afecta la velocidad percibida . Pero si se hace correctamente, externo es el camino a seguir
Martijn
44
.jslos archivos son mejores para el almacenamiento en caché, no tiene sentido que dos conexiones al mismo host aumenten mágicamente la velocidad de descarga.
La idea de dividir el ancho de banda, aunque entiendo su lógica y no es del todo incorrecta, es un poco engañosa. El HTML es más pequeño y lleva menos tiempo y cualquier llamada posterior puede esperar.
closetnoc
3
si está buscando tiempo, está equivocado al mirar el ancho de banda. mire el generador de perfiles en los tiempos de carga: normalmente los tiempos de conexión son 10-100x MÁS GRANDES que el tiempo real de intercambio de datos. Esto significa que la FRAGMENTACIÓN es un problema real, y el uso de un archivo externo dedicado para js realmente pequeños puede ser peor que en línea. Inline es mejor en el navegador que no hace paralelización real
Lesto
29

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.

Stephen Ostermiller
fuente
12

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.

foamcow
fuente
4

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.

trejder
fuente
Okay. El desarrollador parece usar widgets de terceros para todo; Autocompletar, cargas de imágenes ajax, etc. Todo esto agrega js en línea.
Steven
No, no puedo estar de acuerdo. Estoy usando Twitter Bootstrap en mis aplicaciones de Yii (probablemente la mayor extensión de Yii y un gran conjunto de widgets), así como muchas otras extensiones de Yii y ninguna de ellas usa JS en línea. Su desarrollador tendría que ser muy afortunado de encontrar widgets y extensiones, que solo usan Javascript en línea. Debe tener bastante experiencia en Yii para comenzar a escribir sus propias extensiones (con la excepción de las pocas, muy mal escritas) e incluso el desarrollador de Yii semi-experimentado usa el código en línea como última opción, si todo lo demás falla.
trejder
Usar extensiones y widgets de terceros en Yii es una gran idea (no tiene que inventar la rueda nuevamente). Pero, usar código JS en línea en la aplicación o extensión Yii realmente es una mala actitud. Entonces, obligue a su desarrollador a escribir un mejor código / use mejores extensiones y widgets o ... ¡obtenga un mejor desarrollador! :]
trejder
Ok, gracias por los comentarios. Además de Stackoverflow, ¿dónde puedo encontrar una buena comunidad Yii?
Steven
En el foro de Yii . La mayoría de las páginas son de libre acceso. Algunos requieren registrar una cuenta e iniciar sesión. La mayoría de los desarrolladores de Yii en Stack Overflow tienen cuentas propias en el foro. Después de casi seis años de existencia, el marco de Yii se ha ganado una gran comunidad de desarrolladores, por lo que si observa con cuidado, debería poder encontrar pocos desarrolladores de Yii en su comunidad local o incluso en su vecindario. Buena suerte.
trejder
3

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.

Abhijith Bhattu
fuente
2

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).

Salman A
fuente
2

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

sidra de pera
fuente
0

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

Yunzen
fuente