w3schools por manejo linea leer example contenido bootstrap archivos archivo javascript cdn

por - leer el contenido de un archivo en javascript



Múltiples archivos en CDN vs. un archivo localmente (1)

Mi sitio web utiliza alrededor de 10 bibliotecas de JavaScript de terceros como jQuery, jQuery UI, prefixfree, algunos plugins jQuery y también mi propio código javascript. Actualmente extraigo las bibliotecas externas de CDN como Google CDN y cloudflare. Me preguntaba cuál es un mejor enfoque:

  1. Extrayendo las bibliotecas externas de los CDN (como lo hago hoy).
  2. Combina todos los archivos en un solo archivo js y un archivo CSS y almacénelos localmente.

Cualquier opinión es bienvenida siempre que se expliquen. Gracias :)


El valor de una CDN radica en la probabilidad de que el usuario ya haya visitado otro sitio que llame al mismo archivo desde esa CDN, y se vuelve cada vez más valioso según el tamaño del archivo. La probabilidad de que este sea el caso aumenta con la ubicuidad del archivo solicitado y la popularidad del CDN.

Con esto en mente, extraer un archivo relativamente grande y popular de un popular CDN tiene mucho sentido. jQuery, y, en menor grado, jQuery UI, se ajustan a esta ley.

Mientras tanto, la concatenación de archivos tiene sentido para archivos más pequeños que probablemente no cambien mucho: los complementos comúnmente utilizados se adaptarán a esta factura, pero es probable que el código específico de su aplicación central no lo haga: puede cambiar de una semana a otra, y si usted '' re concatenándolo con todos tus otros archivos, tendrías que obligar al usuario a descargar todo de nuevo.

La plantilla repetitiva HTML5 hace un buen trabajo al proporcionar una solución genérica para esto:

  1. Modernizr se carga desde el local en la cabeza: es muy pequeño y difiere bastante de una instancia a otra, por lo que no tiene sentido que lo fuente desde un CDN y no lastimará demasiado al usuario para cargarlo de su servidor. Se lo pone en la cabeza porque CSS puede estar usándolo, por lo que quiere que sus efectos se conozcan antes de que el cuerpo lo renderice. Todo lo demás está en la parte inferior, para evitar que tus scripts más pesados ​​bloqueen el procesamiento mientras se cargan y se ejecutan.
  2. jQuery del CDN, ya que casi todo el mundo lo usa y es bastante pesado. Es probable que el usuario ya tenga este caché antes de visitar su sitio, en cuyo caso lo cargarán desde el caché de manera instantánea.
  3. Todas las dependencias de terceros más pequeñas y los fragmentos de código que probablemente no cambien mucho se concatenan en un archivo plugins.js cargado desde su propio servidor. Esto se almacenará en caché con un encabezado de caducidad distante la primera vez que el usuario visita y se carga desde el caché en visitas posteriores.
  4. Su código principal va en main.js , con un encabezado de expiración más cercano para tener en cuenta el hecho de que la lógica de su aplicación puede cambiar de una semana a otra o de un mes a otro. De esta forma, cuando haya solucionado un error o haya introducido una nueva funcionalidad cuando el usuario visite una quincena a partir de ahora, puede cargarse mientras todo el contenido anterior se puede traer de la memoria caché.

Para sus otras bibliotecas principales, debe verlas individualmente y preguntarse si deberían seguir el ejemplo de jQuery, cargarse individualmente desde su propio servidor o concatenarse. Un ejemplo de cómo puede llegar a esas decisiones:

  • Angular es increíblemente popular y muy grande. Obtenlo del CDN.
  • Twitter Bootstrap tiene un nivel similar de popularidad, pero tienes una selección relativamente delgada de sus componentes, y si el usuario aún no la tiene, puede que no valga la pena descargarla por completo. Habiendo dicho eso, la forma en que encaja en el resto de tu código es bastante intrínseca, y no es probable que la cambies sin reconstruir todo el sitio, por lo que es posible que desees mantenerlo alojado localmente, pero mantener sus archivos separados de los tuyos. plugins.js principales De esta manera, siempre puede actualizar su plugins.js con las extensiones de Bootstrap sin forzar al usuario a descargar todo el núcleo de Bootstrap.

Pero no es imprescindible: su millaje puede variar.