Carregar JavaScript sem bloqueio tem um grande efeito na otimização de desempenho da página, que pode efetivamente reduzir o bloqueio da carga da página por JS. Especialmente para alguns arquivos JS publicitários, como o conteúdo de publicidade pode ser rico em mídia, é provável que se torne um gargalo para a velocidade de carregamento da sua página. JavaScript de alto desempenho nos diz, colegas de classe, para melhorar a velocidade da sua página da web, carregar JS sem bloquear.
Então um código aparece.
(function () {var s = document.createElement ('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js' ;car x = document.getElementsbyTagName (' script ') [0];Todo mundo está familiarizado com o exposto acima. Os alunos que leram o livro conhecem os benefícios de esse carregamento não bloqueador, e o efeito é muito bom. Quando esses scripts não bloqueadores encontram anúncios gerais de JS, eles escrevem problemas - o código do anúncio aparece no HTML, mas o anúncio não exibe o anúncio.
Nani? HTML não é renderizado para a página?
Vamos dar uma olhada no código do anúncio
A cópia do código é a seguinte:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
O código é bastante simples, basta produzir código HTML em um documento.WRITE (acredito que os anúncios de muitos anunciantes são assim). Qual é o problema com a página que não mostra anúncios? O problema está neste documento. Por que? Vamos primeiro olhar para a definição de documento.write.
Definição e uso
O método write () pode gravar expressões HTML ou código JavaScript no documento.
Vários parâmetros (Exp1, Exp2, Exp3, ...) podem ser listados e serão anexados ao documento em ordem.
método:
Um é usar essa parte para gerar HTML no documento, e a outra é gerar novos documentos no Windows e estruturas fora das janelas onde o método é chamado. No segundo caso, use o método Close () para fechar o documento.
Mas seu princípio deve ser executado durante o processo de entrada de fluxo de página. Depois que a página for carregada, o document.write () é chamado novamente e document.open () será chamado implicitamente para apagar o documento atual e iniciar um novo documento. Ou seja, se usarmos o Document.Write após o carregamento do HTML, eliminaremos o HTML gerado anterior e exibiremos a saída de conteúdo do document.write.
Em nosso exemplo, depois que a página é carregada, o documento.Write é emitido no HTML e não será executado. Eu conheço o problema e o princípio, então como resolver esse problema?
Utiliza assíncrono Ajax, com linhas diferentes. Muitos arquivos de publicidade são de terceiros. Sob diferentes nomes de domínio, existem problemas de domínio cruzado e não podemos controlar a saída de seu código. Nesse caso, pensamos em uma maneira de reescrever document.write e, em seguida, reescrever document.write de volta após o carregamento do arquivo JS. Veja o código.
A primeira versão carrega anúncios JS sem bloquear:
função loadadscript (url, contêiner, retorno de chamada) {this.dw = document.write; this.url = url; this.ContAineRoBJ = (tipoof contêiner == 'string'? Document.getElementById (contêiner): contêiner); this.callback = retorno de chamada || função(){}; } Loadadscript.prototype = {startLoad: function () {var script = document.createElement ('script'), _This = this; if (script.ReadyState) {// ie script.onReadyStateChange = function () {if (script.readyState == "carregado" || script.readyState == "complete") {script.onReadyStatechange = null; _This.finished (); }}; } else {// outro script.onload = function () {_this.finished (); }; } document.write = function (ad) {var html = _this.containerobj.innerhtml; _This.Containerobj.innerhtml = html + ad; } script.src = _this.url; script.type = 'text/javascript'; document.getElementsByTagName ('Head') [0] .AppendChild (Script); }, finalizada: function () {document.write = this.dw; this.callback.apply (); }};Código de chamada da página:
var loadScript = new loadAdscript ('ad.js', 'msat-adwrap', function () {console.log ('msat-adwrap');}); loadScript.startLoad (); var loadScript = new loadAdscript ('ad2.js', 'msat-adwrap', function () {console.log ('msat-adwrap2');}); loadScript.startLoad (); var loadScript = new loadAdscript ('ad3.js', 'msat-adwrap', function () {console.log ('msat-adwrap2');}); loadScript.startLoad (); var loadScript = new loadAdscript ('ad3.js', 'msat-adwrap', function () {console.log ('msat-adwrap3');}); loadScript.startLoad ();Código JS de publicidade
//ad.jsdocument.write('<img src="http://images.cnblogs.com/logo_small.gif">');//ad2.jsdocument.write('<img src="http://www.baidu.com/img/baidu_sylogo1.gif" usemap = "#mp"> '); // ad3.jsdocument.write (' <img id = "hplogo" src = "http://www.google.com/images/srpr/logo3w.png"> ');O problema com a primeira versão é que, quando vários arquivos são chamados, alguns problemas surgirão:
1. Devido à velocidade diferente do carregamento de arquivos, alguns podem ser carregados primeiro e outros podem ser carregados posteriormente, o que não é ordenado, e muitas vezes o que precisamos é de ordem. Por exemplo, precisamos carregar o anúncio na primeira tela primeiro.
2. Se você deseja alguns anúncios, precisará definir alguns parâmetros antes de definir, como o Google AdSense
Para resolver esses dois problemas, ele é ainda mais modificado na versão JS final não bloqueadora.
Código da página HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <title> new_file </title> <script type = "text/javascript" src = "loadscript.js"> </script> </head> <body> <diD = "ms-s- ms-script.js"> </script> </head> <body> <d id "<drc =" loadscript.js "> </script> </head> <bod> <d id =" "msat-adwrap2"> </div> <script type = "text/javascript"> loadscript.add ({url: 'ad.js', contêiner: 'msat-adwrap', reclack: function () {console.log ('msat-adwrap');}}). Callback: function () {console.log ('msat-adwrap2'); "Ca-Pub-2152294856721899"; }). Execute (); </script> </body> </html>LoadScript.js Código -fonte
/*** anúncios não bloqueadores* @Author Arain.yu*/var loadScript = (function () {var adQueue = [], dw = document.write; // cache js 'próprio document.write function.clocontiScript (url, contêiner, initer, digite) {this.url =' urLAdScript (typeROrBj = initner, time) {this.url = urLement.containersinOrBj = initner, tipo de retorno) {this.url = url; : Container); script.onreadystatechange = function () {if (script.readyState == "carregado" || document.write document.write = function (ad) {var html = _this.containerobj.innerhtml; document.getElementsByTagName ('Head') [0] .AppendChild (Script); }, finalizada: function () {// restaure document.write docum.write = this.dw; }, startNext: function () {adqueue.shift (); this.callback.apply (); if (adqueue.length> 0) {adqueue [0] .startLoad (); } else {this.finished (); }}}}; return {add: function (adobj) {if (! Adobj) return; adqueue.push (novo loadadscript (Adobj.url, Adobj.Container, Adobj.init, Adobj.Callback)); devolver isso; }, execute: function () {if (adqueue.length> 0) {adqueue [0] .startLoad (); }}}};} ());