Usando como base o plugin pace.js (https://github.com/HubSpot/pace), ele utiliza diversos métodos para detectar o percentual de carregamento da página:
Requisições Ajax:
- O plugin verifica as requisições, calculando o percentual de cada uma dependendo do seu tipo:
Se a requisição for um XMLHttpRequest ele utiliza o evento "progress", que retorna um objeto com o tamanho do arquivo sendo baixado e quanto ja foi concluído, se estiver disponível o Content-Length no Header da requisição de resposta. Além de também verificar os eventos "load", "abort", "timeout" e "error" para determinar se a requisição terminou.
request.addEventListener('progress', function(evt) {
//Verifica se Content-Length foi declarado no Header de resposta
if (evt.lengthComputable) {
//Calcula a porcentagem de acordo com o quanto já foi baixado.
return _this.progress = 100 * evt.loaded / evt.total;
} else {
//Se não há Content-Length retorna uma porcentagem sintética.
return _this.progress = _this.progress + (100 - _this.progress) / 2;
}
}, false);
Se o tipo de requisição for um WebSocket ele verifica os eventos "error" e "open" para determinar se a requisição terminou.
SocketRequestTracker = (function() {
function SocketRequestTracker(request) {
var event, _j, _len1, _ref2,
_this = this;
this.progress = 0;
_ref2 = ['error', 'open'];
//Registra listener aos eventos acima para determinar quando conexão estiver estabelecida, ou não.
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
event = _ref2[_j];
request.addEventListener(event, function() {
return _this.progress = 100;
}, false);
}
}
return SocketRequestTracker;
})();
Documento HTML:
- O plugin utiliza o document.readystate para determinar o estado no qual o documento está ("loading", "interactive", "complete") e atribui uma porcentagem para cada.
DocumentMonitor = (function() {
//Determina porcentagens para cada estado de document.readyState.
DocumentMonitor.prototype.states = {
loading: 0,
interactive: 50,
complete: 100
};
function DocumentMonitor() {
var _onreadystatechange, _ref2,
_this = this;
//Verifica document.readystate e atribui valor ao estado atual da página
this.progress = (_ref2 = this.states[document.readyState]) != null ? _ref2 : 100;
_onreadystatechange = document.onreadystatechange;
//Nas mudanças de estado atualiza o valor da porcentagem
document.onreadystatechange = function() {
if (_this.states[document.readyState] != null) {
_this.progress = _this.states[document.readyState];
}
return typeof _onreadystatechange === "function" ? _onreadystatechange.apply(null, arguments) : void 0;
};
}
return DocumentMonitor;
})();
Lag no Loop de Eventos:
- O plugin verifica, através do lag no loop de eventos, se existe código javascript sendo executado e calcula um porcentagem relativa ao lag.
EventLagMonitor = (function() {
function EventLagMonitor() {
var avg, interval, last, points, samples,
_this = this;
this.progress = 0;
avg = 0;
samples = [];
points = 0;
last = now();
//Utiliza um timer para calcular o Lag no loop de eventos do javascript
interval = setInterval(function() {
var diff;
//Calcula a diferença entre o tempo de execução determinado para o Timer (50ms) e o tempo real de execução
diff = now() - last - 50;
last = now();
samples.push(diff);
if (samples.length > options.eventLag.sampleCount) {
samples.shift();
}
//Calcula a amplitude media a partir dos Lag's salvos
avg = avgAmplitude(samples);
//Verifica se a amplitude dos Lag's está acima do limite na execução do javascript
if (++points >= options.eventLag.minSamples && avg < options.eventLag.lagThreshold) {
_this.progress = 100;
return clearInterval(interval);
} else {
//Se estiver, calcula a porcentagem a partir dessa amplitude.
return _this.progress = 100 * (3 / (avg + 3));
}
}, 50);
}
return EventLagMonitor;
})();
Elementos HTML(opcional):
- O plugin verifica a existência de certos elementos predeterminados usando o document.querySelector.
//De acordo com a documentação - Define as classes/id's a serem verificados pelo pace.js
paceOptions = {
elements: {
selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
}
}
//Para verificar a existência dos elementos no documento
ElementTracker = (function() {
function ElementTracker(selector) {
this.selector = selector;
this.progress = 0;
this.check();
}
ElementTracker.prototype.check = function() {
var _this = this;
if (document.querySelector(this.selector)) {
return this.done();
} else {
return setTimeout((function() {
return _this.check();
}), options.elements.checkInterval);
}
};
ElementTracker.prototype.done = function() {
return this.progress = 100;
};
return ElementTracker;
})();
XMLHttpRequest.addEventListener("progress", function, false)
, porém a pagina precisa expor o seu trabanho no Header atraves da propriedadeContent-Length
.