javascript - multiple - Jquery GetScript caching

load javascript source dynamically

Question

Por defecto $ .getScript () deshabilita el almacenamiento en caché y puede usar $ .ajaxSetup y establecer el almacenamiento en caché en verdadero. Cuando se prueba si la secuencia de comandos se almacena en caché con Firebug la mayoría de las veces, la secuencia de comandos vuelve a 200 (lo que significa que la secuencia de comandos es una copia nueva) y una en quizás 20 o 30 veces regresará 304 (lo que significa que utilizó una memoria caché). versión). ¿Por qué está recibiendo una copia nueva la gran mayoría de las veces?

$.ajaxSetup({
cache: true
});
$.getScript( scriptFile );

Los archivos que recupera GetScript no se han editado y las solicitudes son un cambio de página aparte.

Answer 1

De forma predeterminada, $ .getScript () establece la configuración de caché en falso. Esto agrega un parámetro de consulta con marca de tiempo a la URL de solicitud para garantizar que el navegador descarga la secuencia de comandos cada vez que se solicita.

El sitio jQuery doc tiene una extensión agradable para no agregar una marca de tiempo a la solicitud y omitir el caché:

jQuery.cachedScript = function( url, options ) {
// Allow user to set any option except for dataType, cache, and url
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax( options );
};
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
console.log( textStatus );
});

Source

Answer 2

En realidad, hay una mejor opción, puede activar el almacenamiento en caché para ciertas solicitudes, por ejemplo:

$.ajaxPrefilter(function( options ) {
if ( options.type===''GET'' && options.dataType ===''script'' ) {
options.cache=true;
}
});

Answer 3

Hay un error a partir de la fecha en que se publicó esta pregunta, en la que tanto Firefox como Chrome declararían que no se está cargando un script desde la memoria caché cuando en realidad lo está. A la fecha de esta respuesta, este problema aún existe. La forma más fácil de probar es usar console.log y enviar un número de versión.

Para almacenar en caché una secuencia de comandos cargada dinámicamente, simplemente debe hacerlo utilizando el siguiente código.

function onDemandScript ( url, callback ) {
callback = (typeof callback != ''undefined'') ? callback : {};
$.ajax({
type: "GET",
url: url,
success: callback,
dataType: "script",
cache: true
});
}

Para el desarrollo deberías comentar cache: true.

Answer 4

Lo que quizás esté buscando es una función getScriptOnce , que básicamente, si sabe que el archivo ya se cargó correctamente, no vuelve a cargar dicho archivo cuando se llama a esa función.

Escribí tal función. Puedes probar con la pestaña Red en las herramientas de desarrollo de Firebug o Chrome. Esto solo carga el mismo archivo una vez. Solo necesita copiar en sus archivos la función getScriptOnce y la matriz global ScriptArray

var getScriptOnce = (function(url, callback) {
var scriptArray = []; //array of urls
return function (url, callback) {
//the array doesn''t have such url
if (scriptArray.indexOf(url) === -1){
if (typeof callback === ''function'') {
return $.getScript(url, function(script, textStatus, jqXHR) {
scriptArray.push(url);
callback(script, textStatus, jqXHR);
});
} else {
return $.getScript(url, function(){
scriptArray.push(url);
});
}
}
//the file is already there, it does nothing
//to support as of jQuery 1.5 methods .done().fail()
else{
return {
done: function () {
return {
fail: function () {}
};
}
};
}
}
}());
/*#####################################################################*/
/*#####################################################################*/
//TEST - tries to load the same jQuery file twice
var jQueryURL = "https://code.jquery.com/jquery-3.2.1.js";
console.log("Tries to load #1");
getScriptOnce(jQueryURL, function(){
console.log("Loaded successfully #1")
});
//waits 2 seconds and tries to load again
window.setTimeout(function(){
console.log("Tries to load #2");
getScriptOnce(jQueryURL, function(){
console.log("Loaded successfully #2");
});
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

Primero, aclaremos lo que significa que jQuery desactiva el almacenamiento en caché.

Cuando jQuery desactiva el caché, significa que es forzar que el archivo sea cargado nuevamente por el navegador con algún tipo de truco, por ejemplo, agregando un número aleatorio adicional como parámetro al final de la url.

Cuando jQuery tiene habilitar el caché , no se fuerza nada y deja el caché que has establecido en el encabezado de este archivo. Lo que significa que si no ha establecido en el encabezado de los parámetros de los archivos para mantenerlo en el caché del navegador, el navegador intentará volver a cargarlo por algunos métodos.

Por lo tanto, con habilitar el caché por jQuery, también debe haber configurado los encabezados de caché correctos en sus archivos estáticos para que se guarden en el caché del navegador, de lo contrario el navegador puede intentar cargarlos nuevamente.

Para los archivos, el navegador ve la fecha de creación en el encabezado, luego se conecta al servidor solicitando nuevamente el encabezado, se compara y, si no se modifica, no se vuelve a cargar, pero se realiza una llamada al servidor.

Para los archivos que ha establecido una antigüedad máxima, y ​​no pregunte al servidor hasta esa fecha, entonces el navegador lo carga directamente desde el caché si lo encuentra.

Para resumir :
El cache:true es permitir que el navegador decida la caché de este archivo desde el encabezado que envíe.
El cache:false es forzar el archivo para que se cargue de nuevo.

Algunas preguntas relativas a la caché:
cachear archivos JavaScript
IIS7 Cache-Control

El código interior
El getScript() está llamando a jQuery.get() que es una función Ajax abreviada de

$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});

Entonces, al llamar a getScript() , realiza una llamada ajax, y jQuery no guardó ningún tipo de caché de sus archivos si esto es lo que piensa en primer lugar.

Función personalizada para cargar los sripts.
Si no ganó para crear un caché global: verdadero, y solo necesita que algunos archivos se carguen con caché: verdadero, puede hacer una función personalizada como:

function getScriptCcd(url, callback)
{
jQuery.ajax({
type: "GET",
url: url,
success: callback,
dataType: "script",
cache: true
});
};

Esto no se ve afectado por el parámetro de caché global y se carga los archivos de script sin agregar ningún parámetro que no sea de caché al final.

Answer 6

Sé que este es un post antiguo, y la respuesta existente es la respuesta real, pero tocando la preocupación de Iscariote, REALMENTE ES CACHING (al menos un poco). Esto es sólo una peculiaridad de Firefox. Tal vez esto sea útil para otros que están confundidos por esta peculiaridad.

Probé este concepto con un archivo javascript REALMENTE GRANDE que define los polígonos de google map para los límites del distrito DOT de Idaho basados ​​en arreglos de decenas de miles de latlones (el tamaño del archivo sin comprimir es 2,806,257, pero lo ejecuto mediante un proceso de compresión). Usando el siguiente javascript

// Grab polys if not already loaded
if (typeof(defaults.data.polys) === ''undefined'') {
/*$.getScript(''/Scripts/ScriptMaster.php?file=Districts'', function () {});*/
$.ajax({
type: "GET",
url: ''/Scripts/ScriptMaster.php?file=Districts'',
success: function() {
defaults.data.polys = getPolys();
data.polys = defaults.data.polys;
},
dataType: "script",
cache: true
});
}

y puede ver el php relevante (no desea que el archivo Districts.js real tome demasiado espacio en esta publicación, así que aquí está ScriptMaster.php)

<?php
require_once(''../settings.php'');
if (!isset($_GET[''file''])) die();
$file = $_GET[''file''];
$doCache = $file == ''Districts'';
header(''Content-type: application/x-javascript'');
if ($doCache) {
// This is a luxury for loading Districts.js into cache to improve speed
// It is at the top because firefox still checks the server for
// headers even when it''s already cached
$expires = 7 * 60 * 60 * 24; // set cache control to expire in a week (this is not likely to change)
header(''Cache-Control: max-age=''.$expires.'', must-revalidate'');
header(''Last-modified: Fri, 3 May 2013 10:12:37 GMT'');
header(''Expires: ''.gmdate(''D, d M Y H:i:s'', time() + $expires).''GMT'');
header(''Pragma: public'');
}
ob_start("compress");
require_once($file.".js");
ob_end_flush();
function compress($buffer) {
global $doCache;
if (DEV_MODE && !$doCache) return $buffer;
/* remove comments */
$buffer = preg_replace(''/////.+?$/m'', '''', preg_replace(''!//*[^*]*/*+([^/][^*]*/*+)*/!'', '''', $buffer));
/* remove tabs, spaces, new lines, etc. */
$buffer = str_replace(array("/r/n", "/r", "/n", "/t", '' '', '' '', '' ''), '''', $buffer);
/* remove unnecessary spaces */
$buffer = str_replace('': '', '':'', $buffer);
$buffer = str_replace('' :'', '':'', $buffer);
$buffer = str_replace('', '', '','', $buffer);
$buffer = str_replace('' ,'', '','', $buffer);
$buffer = str_replace(''; '', '';'', $buffer);
$buffer = str_replace('' ;'', '';'', $buffer);
$buffer = str_replace(''{ '', ''{'', $buffer);
$buffer = str_replace('' {'', ''{'', $buffer);
$buffer = str_replace(''} '', ''}'', $buffer);
$buffer = str_replace('' }'', ''}'', $buffer);
if ($doCache) { header(''Content-Length: ''.strlen($buffer)); }
return $buffer;
}
?>

Es importante tener en cuenta que llamar a las funciones del encabezado de php ANTES que el script incluso ejecute la cadena que se va a imprimir como a diferencia de Chrome y posiblemente (probablemente, soy demasiado vago para verificar) otros navegadores Firefox parece hacer un ping al servidor para Compruebe si hay encabezados antes de usar caché. Tal vez con más investigación podría determinar si esto pertenece a los elementos de igual manera que lo hace con ajax (probablemente no).

Así que hice cinco ejecuciones de prueba que muestran los tiempos de carga de este script con ajax como se indica en firebug. Aquí están los resultados

#results loading the script after clearing cache (yes those are seconds, not ms)
200 OK 4.89s
200 OK 4.9s
200 OK 5.11s
200 OK 5.78s
200 OK 5.14s
#results loading the page with control+r
200 OK 101ms
200 OK 214ms
200 OK 24ms
200 OK 196ms
200 OK 99ms
200 OK 109ms
#results loading the page again by navigating (not refreshing)
200 OK 18ms
200 OK 222ms
200 OK 117ms
200 OK 204ms
200 OK 19ms
200 OK 20ms

Como puede ver, la conexión de mi servidor local a servidor web no es la más consistente y las especificaciones de mi computadora portátil son un poco en mal estado (procesador de un solo núcleo y todo, también tienen algunos años) PERO EL PUNTO es que hay una caída significativa en la carga Tiempo después de cargar el caché.

[También en el caso de que alguien tenga curiosidad sin el script de compresión (no como las pestañas, los espacios o las nuevas líneas se desperdician, solo tiene que ser legible) tarda entre 7-8 segundos en cargarse, pero no voy a hacer eso. veces]

Así que nunca tengas miedo, realmente es caché. Para scripts más pequeños que solo tardan en cargar ms, es posible que no note la diferencia en Firefox, honestamente; simplemente porque comprueba los encabezados del servidor. Lo sé debido al cambio en el tiempo de carga de mover esas funciones de encabezado desde el final de la secuencia de comandos al inicio. Si tienes esas funciones después de que PHP pasa por la cadena, demora más en cargar.

¡Espero que esto ayude!