¿Por qué debería evitar las secuencias de comandos en línea?

Un amigo experto recientemente miró un sitio web que ayudé a lanzar, y comentó algo como "sitio muy bueno, lástima de las secuencias de comandos en línea en el código fuente".

Definitivamente estoy en condiciones de eliminar la secuencia de comandos en línea donde ocurre; Soy vagamente consciente de que es "algo malo". Mi pregunta es: ¿cuáles son los problemas reales con las secuencias de comandos en línea? ¿Hay un problema de rendimiento importante o es principalmente una cuestión de buen estilo? ¿Puedo justificar una acción inmediata en el frente de secuencias de comandos en línea para mis superiores, cuando hay otras cosas en las que trabajar que podrían tener un impacto más obvio en el sitio? Si llegas a un sitio web y le echas un vistazo al código fuente, ¿qué factores te llevarían a decir "hmm, trabajo profesional aquí", y qué te haría retroceder de un trabajo obviamente aficionado?

Bien, esa pregunta se convirtió en múltiples preguntas por escrito. Pero básicamente, secuencias de comandos en línea: ¿cuál es el problema?

¿Cuáles son los problemas reales con las secuencias de comandos en línea? ¿Hay un problema de rendimiento importante o es principalmente una cuestión de buen estilo?

Las ventajas no se basan en el rendimiento, sino que (como señaló Michael en su comentario) tienen más que ver con la separación de la vista y el controlador. El archivo HTML / CSS debería, idealmente, contener solo la presentación y se deberían usar archivos separados para los scripts. Eso hace que sea más fácil para usted (y sus compañeros) leer y mantener los aspectos visuales y funcionales.

¿Puedo justificar una acción inmediata en el frente de secuencias de comandos en línea para mis superiores, cuando hay otras cosas en las que trabajar que podrían tener un impacto más obvio en el sitio?

No, probablemente no. Puede ser muy difícil convencer a los poderes de un trabajo de mantenimiento puro, incluso si cree que les ahorrará dinero a largo plazo. Sin embargo, en este caso, no creo que sea tan importante que debas detener todo y deshacerte de tus scripts en línea. En cambio, solo asegúrate de hacer un esfuerzo consciente para rectificar áreas mientras trabajas en ellas por otras razones. La refactorización del código debe ser algo que haces regularmente, pero solo un poco a la vez.

Si llegas a un sitio web y le echas un vistazo al código fuente, ¿qué factores te llevarían a decir "hmm, trabajo profesional aquí", y qué te haría retroceder de un trabajo obviamente aficionado?

El factor número uno que me diría que no es profesional es el uso excesivo de tablas o divs. Aquí hay un artículo que explica por qué ninguno de los dos debe ser usado en exceso.

No voy a ser el defensor del diablo, pero no existe una relación estricta entre el trabajo de aficionados y JavaScript en línea. Veamos el código fuente de varios sitios web más conocidos:

• Google
• Wikipedia
• Microsoft
• Adobe,
• Dell
• IBM

Cada una de sus páginas de inicio usa JavaScript en línea. ¿Significa que todas esas compañías contratan gente aficionada para crear sus páginas de inicio?

Soy uno de esos desarrolladores que no pueden poner código JavaScript dentro de HTML. Nunca lo hago dentro de los proyectos en los que trabajo (excepto, probablemente, algunas llamadas como <a href="javascript:...">para los proyectos donde JavaScript discreto no era un requisito desde el principio, y siempre elimino JavaScript en línea cuando refactorizo ​​el código de otra persona. Pero vale la pena el esfuerzo ? No tan seguro.

En cuanto al rendimiento, no siempre tiene mejores rendimientos al colocar JavaScript en un archivo separado. Por lo general, estamos tentados a considerar ese ancho de banda de desperdicio de JavaScript en línea, ya que no se puede almacenar en caché (excepto cuando se trata de HTML estático almacenable en caché). Por el contrario, un archivo .js externo se carga solo una vez.

En realidad, esta es solo otra optimización prematura : puede estar en lo cierto al pensar que externalizar JavaScript sujetará su sitio web, pero también puede estar totalmente equivocado:

• ¿Qué pasa si la mayoría de sus usuarios vienen con un caché vacío?
• ¿Consideró que con un archivo .js externo, se realizará una solicitud a este archivo en cada solicitud de página, si el sitio web no está configurado correctamente (y, por lo general, no lo está),
• ¿El archivo .js está realmente en caché (con IIS, puede que no sea tan fácil)?

Entonces, antes de optimizar prematuramente, recopile estadísticas sobre sus visitantes y evalúe el rendimiento con y sin JavaScript en línea.

Luego viene el argumento final: mezcló JavaScript y HTML en su fuente, por lo que apesta. ¿Pero quién dijo que mezclabas ambos? El código fuente utilizado por el navegador no siempre es el código fuente que escribió. Por ejemplo, el código fuente puede ser comprimido, minified o varios archivos CSS o JS se puede unir en un solo archivo, pero esto no quiere decir que realmente asignado el nombre de variables a, b, c... a1, etc., o que anotó una gran archivo CSS sin espacios ni líneas nuevas. De la misma manera, puede inyectar fácilmente código fuente externo de JavaScript en HTML en el momento de la compilación o más tarde a través de las plantillas.

Para concluir, si combina JavaScript y HTML en el código fuente que escribe, debería considerar no hacerlo en sus proyectos futuros. Pero eso no significa que si el código fuente enviado al navegador contiene JavaScript en línea, siempre es malo.

• Puede ser malo
• Por el contrario, puede ser una señal de que el sitio web fue escrito por profesionales que se preocuparon por el rendimiento, realizaron pruebas específicas y determinaron que sería más rápido para sus clientes incorporar partes de JavaScript.
• O puede que no signifique nada en absoluto.

así que más bien avergonzar a la persona que dice "sitio muy bueno, lástima de las secuencias de comandos en línea en el código fuente" mirando solo la fuente enviada al navegador, sin saber nada acerca de cómo se hizo el sitio web.

En general, es bueno tratar de mantener HTML y JS generalmente separados. HTML es para la vista, JS es para la lógica de la aplicación. Pero en mi experiencia, el desacoplamiento extremo de html y javascript (en aras de la pureza) no lo hace más fácil de mantener; en realidad puede ser menos mantenible.

Por ejemplo, a veces uso este patrón (tomado de ASP.net) para configurar controladores de eventos:

<input type="button" id="yourId" onclick="clickYourId()" />

o

<input type="button" id="yourId" onclick="clickYourId(this)" />

No hay misterio sobre lo que está desencadenando un evento. La razón es que seis meses después puede inspeccionar el elemento (por ejemplo, en Chrome) y ver de inmediato qué evento de JavaScript se activa.

Por otro lado, imagina que estás leyendo el código de otra persona, que es cien mil líneas, y te encuentras con un elemento mágico que dispara un evento javascript:

<input id="yourId"  />

¿Cómo puede decirme fácilmente a qué método de JavaScript está llamando? Chrome ha hecho esto más fácil, pero tal vez el evento está vinculado a la identificación, o tal vez está vinculado al primer elemento secundario del contenedor. Tal vez el evento está adjunto al objeto padre. ¿Quién sabe? Buena suerte en encontrarlo. :)

Además, diría que ocultar javascript completamente del diseñador puede aumentar la probabilidad de que lo rompan en una actualización. Si alguien edita código para un elemento mágicamente activo, ¿qué indicación en el código tienen que les permita saber que este es un elemento activo en la página?

En resumen, la mejor práctica es separar HTML y Javascript. Pero también entiendo que las reglas generales a veces son contraproducentes cuando se llevan al extremo. Yo abogaría por un enfoque de camino medio. Evite grandes cantidades de js en línea. Si usa en línea, la firma de la función debe ser muy simple como:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

Un argumento que me falta aquí es la posibilidad de una mayor protección contra ataques de secuencias de comandos en sitios cruzados .

Es posible deshabilitar la ejecución de JavaScript en línea en el navegador moderno a través de la Política de seguridad de contenido . Esto redujo el riesgo de que su sitio sea víctima de XSS. Este puede ser un argumento más convincente para que su gerencia invierta en eliminar el script en línea.

Aquí hay algunas razones.

1. El script en línea no se puede minificar (convertir a una versión más corta mediante la reducción de símbolos) No es una preocupación para la banda ancha, pero considere un dispositivo móvil en un área de ancho de banda bajo, o los usuarios que se encuentran en itinerancia global de datos; cada byte puede contar.

2. El navegador no puede almacenar en caché el script en línea a menos que la página en sí sea almacenable en caché (lo que haría una página muy aburrida). Los archivos Javascript externos solo deben recuperarse una vez, incluso si el contenido de la página cambia cada vez. Puede afectar seriamente el rendimiento en conexiones de bajo ancho de banda.

3. La secuencia de comandos en línea es más difícil de depurar porque el número de línea asociado con cualquier error no tiene sentido.

4. El script en línea tiene fama de interferir con las consideraciones de accesibilidad (508 / WAI), aunque eso no significa que todos los script en línea causen problemas. Si termina con un lector de pantalla que anuncia el contenido del script, ¡tiene un problema! (Sin embargo, nunca he visto que esto suceda).

5. El script en línea no se puede probar independientemente de su página; Los archivos Javascript externos se pueden ejecutar a través de pruebas independientes, incluidas pruebas automatizadas.

6. La secuencia de comandos en línea puede conducir a una separación deficiente de las preocupaciones (como se describe en muchas de las otras respuestas aquí).

Hay varias razones que justificarían no incluir el script en línea:

• En primer lugar, la respuesta obvia: hace que el código sea más limpio, más conciso, más fácil de entender y leer.

• Desde un punto de vista más práctico, a menudo desea reutilizar scripts / CSS / etc. en todo su sitio web, incluir estas partes significaría tener que editar cada página cada vez que realice un pequeño cambio.

• Si usa un SCM para su proyecto, entonces tener sus diferentes componentes bien separados facilitará el seguimiento de los cambios y los compromisos para todos los involucrados.

Hasta donde yo sé, el rendimiento no sería una preocupación. Dependería de muchas cosas relacionadas con la naturaleza de su sitio web, las especificaciones de su servidor, etc. Por ejemplo, si su página web usa mucho javascript, su navegador puede almacenar en caché los scripts, lo que resultaría en un mejor rendimiento cuando El código está separado en varios archivos. Por otro lado, me vería tentado a decir que algunos servidores pueden servir un solo archivo grande más rápido que varios archivos más pequeños, en este caso uno podría argumentar que no separar el código es mejor en cuanto al rendimiento.

No conozco ninguna prueba formal en esta área, aunque es muy probable que alguien las haya hecho.

Al final, diría que es una cuestión de buenas prácticas más que cualquier otra cosa, y que las ventajas en términos de legibilidad y organización (específicamente el punto 2 del wrt) hacen que la separación del código en archivos distintos sea una opción mucho mejor.

La respuesta realmente depende de cómo se use el código en línea (suponiendo javascript).

Utilizamos una combinación de código en línea, SSI (incluye del lado del servidor), archivos js y archivos css para crear los efectos que queríamos y también para reducir los viajes de retorno del servidor para eventos onClick.

Entonces, para alguien hacer una declaración general de que el uso del "código en línea" es malo sin comprender completamente cómo se usa puede ser engañoso.

Dicho esto, si cada página tiene la misma copia y el código de JavaScript pegado en lugar de usar un archivo js, ​​digo que es malo.

Si cada página tiene su propia copia y sección CCS pegada en lugar de usar un archivo CSS, digo que es malo.

También es muy costoso incluir toda su biblioteca js en cada página, especialmente si ninguna de las funciones se está utilizando en esa página.

Voy a asumir javascript en línea aquí.

Sin ver el código, es difícil estar seguro. Sospecho que se refería a cualquiera de dos cosas:

1. Te has <script>dispersado por toda la página.
2. Todo lo que JS está en el encabezado de la página, no en archivos externos

La primera es una mala decisión de diseño. La distribución de secuencias de comandos a lo largo de un archivo fuente hace que la página sea mucho más difícil de mantener, ya que debe buscar una secuencia de comandos determinada. Es mucho mejor mantener todo ese código en un solo lugar (prefiero en la parte superior del archivo fuente).

En cuanto a la segunda, eso no es necesariamente algo malo. El código específico de la página debe estar en esa página. Si tiene un código duplicado entre páginas, debe externalizarlo usando <script src>. Luego, cuando vaya a crear una nueva página, simplemente puede incluir ese archivo y cualquier error que haya solucionado allí no tendrá que ser revisado.

Una razón para NO usar Javascript InLine (ni siquiera onclick = "DoThis (this)" en los botones) es si tiene la intención de hacer que su aplicación web sea una aplicación de Chrome. Entonces, si planea portar su aplicación web a una aplicación nativa de Chrome, comience por NO incluir NINGÚN javascript en línea. Esto se explica justo al comienzo de lo que necesitará cambiar (obligatoriamente) desde su aplicación web si tiene la intención de "Chrome-etize".

¿Cuáles son los problemas reales con las secuencias de comandos en línea?

La secuencia de comandos en línea es mala y debe evitarse porque hace que el código sea más difícil de leer.

El código que es difícil de leer es difícil de mantener. Si no puede leerlo fácilmente y comprender lo que está sucediendo, no podrá detectar fácilmente los errores. Si es difícil de mantener, más tarde perderá más tiempo cuando haya problemas.

La dificultad generalmente proviene de codificaciones anidadas. Hay un problema en la siguiente línea de código, ¿puede detectarlo?

<a onclick='alert("What\'s going wrong here?")'>Alert!</a>

Lo ideal es que el código esté escrito de manera que sea fácil de detectar cuando hay un error. Joel Spolsky escribió un gran artículo que enfatiza este punto en 2005 . Los ejemplos de código podrían usar una mejora significativa, ya que muestran que tienen 9 años de edad, pero el concepto subyacente sigue siendo fuerte: escriba el código de una manera que facilite la detección de errores.

¿Hay un problema de rendimiento importante o es principalmente una cuestión de buen estilo?

Las secuencias de comandos en línea conducen a la repetición. En lugar de cambiar una línea de código para afectar a 100 páginas, es probable que necesite cambiar 100 páginas individualmente. Esto, junto con la escasa legibilidad, afecta seriamente el rendimiento del mantenedor . El tiempo de programación tiene un costo real que afecta el resultado final de un negocio más rápido que los pocos milisegundos de la mayoría de las optimizaciones de código. Ciertamente, la optimización de los cuellos de botella es importante, pero la diferencia de rendimiento del código es insignificante en este caso.

¿Puedo justificar una acción inmediata en el frente de secuencias de comandos en línea para mis superiores, cuando hay otras cosas en las que trabajar que podrían tener un impacto más obvio en el sitio?

No. Si es estúpido y funciona, no lo es.

El corolario de la programación es: si es un código estúpido y funciona, no es un código estúpido. Concéntrese en los problemas reales antes de intentar arreglar algo que no está roto. Cuando el código en línea finalmente necesite una actualización, ya sea en seis horas, seis meses o seis años, corrija el código de una manera que facilite el mantenimiento futuro.

¿Qué factores te llevarían a decir "hmm, trabajo profesional aquí" y qué te haría retroceder de un trabajo obviamente aficionado?

Tiendo a preferir definir "profesional" simplemente como alguien a quien se le paga para realizar una tarea, en lugar de suponer que poseen una habilidad significativa en lo que se les paga por hacer. Muchos profesionales son ciertamente capaces de realizar un buen trabajo, pero la mayoría de las veces me encuentro retrocediendo con horror por el terrible trabajo que otros profesionales han hecho en lugar de algo que un aficionado ha inventado. Gran parte de mi trabajo hasta la fecha ha involucrado la recuperación de proyectos de naufragios de trenes que fueron frustrados por los desarrolladores iniciales, por lo que su kilometraje puede variar.

Dicho todo esto, generalmente es fácil elegir la programación de calidad empresarial