1. Análise de código de publicidade
Muitos sistemas de publicidade de terceiros usam document.write para carregar anúncios, como o seguinte link de publicidade JavaScript.
A cópia do código é a seguinte:
<script type = "text/javascript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
Esta solicitação de JavaScript retorna um pedaço de código como este:
A cópia do código é a seguinte:
document.write ("<a href = 'http: //gg.5173.com/adpolestar/wayl/;" +
"AD = 6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" +
"PU = 5173;/? http: //www.7bao.com/g/xlsbz/index 'Target =' _ Blank '> <img src ='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif '" +
"Border = '0' /> </a>");
Esse tipo de método de carregamento que parece um pouco 2, mas você não pode modificá-lo porque é um terceiro. Além disso, o código adicionou função de estatística. O link de anúncio JavaScript acima será contado quando sempre que for solicitado. O código gerado também possui a função das estatísticas de cliques, o que significa que ele deve ser carregado dessa maneira.
document.write é sincronizado durante a renderização da página. Você deve esperar até que o código JavaScript seja baixado e o documento.Write seja executado antes de renderizar o seguinte conteúdo. Se houver muitos anúncios, isso fará com que a página bloqueie, especialmente se vários anúncios com tamanhos de imagem maiores forem inseridos na primeira tela da página. A situação de bloqueio será bastante óbvia e séria, o que fará com que os usuários sintam que sua página da web é muito lenta.
2. Reescreva document.write
Para evitar o bloqueio, o método Document.Write não pode ser executado durante a renderização da página. Você deve encontrar uma maneira de fazer o código de anúncio JavaScript executar depois que a árvore Dom estiver pronta. No entanto, depois que a árvore Dom estiver pronta, a página inteira será renderizada novamente, o que não é possível. Embora o Document.Write seja um método nativo do navegador, você também pode personalizar um método para substituir o método original. Antes que o código do anúncio JavaScript seja carregado, reescreva o documento.Write, aguarde até que ele seja carregado e executado antes de alterá -lo.
3. Carregamento de atraso do código JavaScript
A etapa da chave acima é atrasar o carregamento do código JavaScript. Como implementá -lo? Primeiro, tente reescrever o atributo de tipo de script, como definir o tipo em uma propriedade personalizada "Tipo/cache", mas, dessa maneira, a maioria dos navegadores (o Chrome não baixará) ainda fará o download deste código, mas não o executará. O download de um pedaço de código durante a renderização da página ainda será bloqueado. Reescrever o tipo de script não pode atingir o carregamento reativo com atraso. No máximo, ele só pode carregar, mas não executar, e existem problemas de compatibilidade.
Coloque a tag de script na tag textarea e leia o conteúdo da textarea quando precisar ser carregado. Dessa forma, você pode perceber o atraso real do carregamento do script. Este método é graças à solução Bigrender (fora da parede) de Yu Bo.
A cópia do código é a seguinte:
<div>
<textarea style = "display: nenhum">
<script type = "text/javascript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
</sexttarea>
</div>
Atraso no carregamento de script e reescrita document.write. A seguir, a implementação do código:
A cópia do código é a seguinte:
/**
* Reescrever document.write para implementar o script de carregamento sem bloqueio
* @param {Dom objeto} elemento textarea
*/
var loadScript = function (elem) {
var url = elem.value.match (/src = "([/s/s]*?)"/i) [1],
pai = elem.parentnode,
// cache nativo document.write
docwrite = document.write,
// Crie um novo script para carregar
script = document.createElement ('script'),
cabeça = document.head ||
document.getElementsByTagName ('Head') [0] ||
document.documentElement;
// rewrite document.write
document.write = function (text) {
parent.innerhtml = text;
};
script.type = 'text/javascript';
script.src = url;
script.onerror =
script.onload =
script.onReadyStateChange = function (e) {
e = e || Window.Event;
if (! script.readyState ||
/loaded|complete/.test(Script.ReadyState) ||
e === 'erro'
) {
// Restaurar o documento nativo.Write
document.write = docwrite;
Head.RemoVechild (Script);
// Desinstalar eventos e desconectar referências de DOM
// Tente evitar vazamentos de memória
cabeça =
pai =
elem =
script =
script.onerror =
script.onload =
script.onReadyStateChange = null;
}
}
// Carregar script
Head.InsertBefore (Script, Head.FirstChild);
};
4. Versão aprimorada do carregamento de atraso de imagem
Pode ser otimizado ainda mais implementando o carregamento preguiçoso desbloqueado do código de anúncio JavaScript? Se o anúncio não aparecer na primeira tela, ele pode ser usado para atrasar a carga como o carregamento usual de atraso das imagens? A resposta é sim. Expandi o plug-in de carregamento preguiçoso para a imagem que escrevi antes e alterei o método original de carregamento de imagem (Substitua SRC) para o método de carga acima para alcançá-lo. Obviamente, apenas essas modificações ainda serão problemáticas. Se houver várias imagens e o carregamento for realizado simultaneamente, e document.write é um método global, não é garantido que não afete B ao carregar A. Eles devem ser carregados um por um, para que B só possa ser carregado após o carregamento de A.
V. Controle da fila
Para que os códigos de anúncios JavaScript sejam carregados em ordem, é necessária uma fila para controlar o carregamento. Portanto, também está disponível o seguinte código de controle de filas simples:
A cópia do código é a seguinte:
var loadQueue = [];
// Participe da lista
Var Queue = function (Data) {
loadQueue.push (dados);
if (loadQueue [0]! == 'Running') {
dequeue ();
}
};
// Delist
var dequeue = function () {
var fn = loadQueue.shift ();
if (fn === 'runing') {
fn = loadQueue.shift ();
}
if (fn) {
loadQueue.unshift ('Runing');
fn ();
}
};
Consulte o artigo de comparação para atraso na imagem Loader: http://www.vevb.com/article/50685.htm