¿Qué tan grande es "demasiado grande" para un archivo de JavaScript

Question

Con todos los complementos jQuery increíbles por ahí, es muy tentador comenzar a incluirlos por todo el lugar para mejorar el aspecto de nuestro sitio web.

Estoy buscando algunas opiniones sobre si y cuando debería preocuparme por los tamaños de estos scripts.

Supongamos que se almacenan en caché en el nivel del servidor web, así que supongo que las posibles preocupaciones son el ancho de banda para los scripts que se sirven del servidor web, así como el rendimiento en el navegador del cliente que necesita descargar todos estos scripts .

Answer 1

Aquí hay dos problemas que usted mencionó.

El primero es la carga del servidor. Si esto es un problema, puede usar el Google AJAX Libs APIs y obtener sus libretas directamente desde el CDN de Google.

El segundo problema es el tiempo de carga del lado del cliente. Bueno, debes decidir quién es tu audiencia objetivo y cuánto deseas dejar que el usuario espere. Como regla general, la mayoría de los sitios web actuales consumen ~300KB de ancho de banda por página, incluidos scripts, hojas de estilo e imágenes.

Answer 2

¿Cuánto dura un trozo de cuerda?

Depende del ancho de banda de su público objetivo, el ancho de banda de los servidores y el valor relativo que proporciona el JS.

Answer 3

Tienes que ponerlo en perspectiva. Vea cuánto tiempo está cargando su página y qué porcentaje de eso es javascript. Por lo general, no es tan grande.

Dado que js generalmente agrega detalles a un sitio, puede que no importe si se carga por última vez o con relativa lentitud, siempre que no bloquee la carga de otros elementos.

En la forma en que lo veo, si necesita la funcionalidad, tendrá que cargar el código para que sea inevitable. Si es decorativo, cargue ese js decorativo al final, y es mejor tenerlo un poco más tarde que no tenerlo.

Answer 4

Como otros han dicho para jQuery que es mejor usar cualquier copia pública alojada en CDN, también recomendaría usar una herramienta para agrupar sus plugins/scripts personalizados en un paquete que tenga sentido. Esto variará dependiendo de su tipo de servidor, pero 2 herramientas comunes son ASP.NET ScriptManager Control - Script Combining - What's the big deal? y Bundler - Bundler Now Supports Css And .less. En la última publicación hay más información sobre este tema en general.

Editar: La solución actual que uso con .NET es http://getcassette.net/ casete proporciona la mejor historia para el desarrollo ASP.NET, almacenar sólo .debug. copias de los archivos JS en la solución, los archivos javascript obtienen fácilmente intellisense, cuando ejecuta la depuración obtiene todos los archivos jg de depuración, y cuando ejecuta con depuración = falso el resultado se combina y se minimiza. En ambos escenarios, tienen cadenas de protección de memoria caché para que nunca tengas que preocuparte por cambiar + actualizar para no usar JavaScript obsoleto.

Answer 5

No creo que deba preocuparse demasiado por eso. Por lo general, las imágenes consumirán la mayor parte del ancho de banda y no los archivos de Javascript.

Si desea acelerar su sitio, reducir el número de solicitudes HTTP en su página es el lugar para comenzar. Esto probablemente dará un impulso de rendimiento mucho mejor. Intenta comprimir todos tus archivos .js en solo uno y utiliza las técnicas de sprite de CSS para mostrar tus imágenes.