Загрузка JavaScript без блокировки оказывает большое влияние на оптимизацию производительности страницы, что может эффективно снизить блокировку загрузки страницы с помощью JS. Особенно для некоторых рекламных файлов JS, поскольку рекламный контент может быть богатым медиа, он, вероятно, станет узким местом для вашей страницы. Высокопроизводительный JavaScript сообщает нам одноклассники, чтобы улучшить скорость вашей веб-страницы, загрузить JS без блокировки.
Итак, появляется код.
(function () {var s = document.createElement ('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; VAR x = document.getelementsbytagname (' script ') [0]; x.parentnode.Все знакомы с вышеизложенным. Студенты, которые читали книгу, знают о преимуществах такой неблокирующей нагрузки, и эффект довольно хороший. Когда такие не блокирующие сценарии сталкиваются с общими рекламными объявлениями JS, они будут писать проблемы - код AD появляется в HTML, но объявление не отображает объявление.
Нани? HTML не отображается на страницу?
Давайте посмотрим на код рекламы JS
Кода -копия выглядит следующим образом:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
Код довольно прост, просто вывод HTML -код в документе. Prowrite (я считаю, что рекламные объявления, такие как это). В чем проблема с страницей, не показывающей рекламу? Проблема заключается в этом документе. Почему? Давайте сначала посмотрим на определение Document.Write.
Определение и использование
Метод write () может записать HTML -выражения или код JavaScript в документ.
Несколько параметров (exp1, exp2, exp3, ...) могут быть перечислены, и они будут добавлены в документ по порядку.
Метод:
Одним из них является использование этой стороны для вывода HTML в документе, а другая - генерировать новые документы в Windows и Frameworks за пределами окон, где называется метод. Во втором случае обязательно используйте метод Close () для закрытия документа.
Но его принцип должен быть выполнен во время процесса ввода потока страницы. После загрузки страницы Document.Write () снова вызывается, и Document.Open () будет вызвано неявно, чтобы стереть текущий документ и запустить новый документ. То есть, если мы используем Document.Write после загрузки HTML, мы устраним предыдущий сгенерированный HTML и отобразим выходной выход из Document.Write.
В нашем примере, после загрузки страницы, документ. Парт выводится в HTML и не будет выполнен. Я знаю проблему и принцип, так как решить эту проблему?
Асинхронно использует Ajax, с разными линиями. Многие рекламные файлы являются сторонними. При разных доменных именах существуют проблемы между доменом, и мы не можем контролировать вывод их кода. В этом случае мы подумали о том, как переписать Document.write, а затем переписать Document.Write после загрузки файла JS. Посмотрите на код.
Первая версия загружает рекламу JS без блокировки:
function LoadAdScript (url, контейнер, обратный вызов) {this.dw = document.write; this.url = url; this.containerobj = (typeof intainer == 'string'? document.getElementById (контейнер): контейнер); this.callback = обратный вызов || function () {}; } LoadAdScript.prototype = {startload: function () {var script = document.createElement ('script'), _this = this; if (script.readystate) {// ie script.onreadystatechange = function () {if (script.readystate == "загружен" _This.finished (); }}; } else {// Другой script.onload = function () {_This.Fined (); }; } 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); }, закончено: function () {document.write = this.dw; this.callback.apply (); }};Код вызова страницы:
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 ();Реклама JS код
//ad.jsdocument.write('simg 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"> ');Проблема с первой версией заключается в том, что когда вызваны несколько файлов, возникают некоторые проблемы:
1. Из -за различной скорости загрузки файлов некоторые могут быть загружены сначала, а некоторые могут быть загружены позже, что неупорядочено, и во многом, что нам нужно, упорядочено. Например, нам нужно сначала загрузить объявление на первом экране.
2. Если вам нужны некоторые рекламные объявления, вам нужно установить некоторые параметры перед настройкой, например, Google Adsense
Чтобы решить эти две проблемы, они дополнительно изменяются до конечной неблокирующей версии JS.
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> <div = "msat-adwrap> "msat-adwrap2"> </div> <script type = "text/javascript"> loadscript.add ({url: 'ad.js', контейнер: 'msat-adwrap', callback: function () {console.log ('msat-adwrap');}}). Callback: function () {console.log ('msat-adwrap2'); "CA-PUB-2152294856721899"; }). execute (); </script> </body> </html>loadscript.js исходный код
/*** Не блокирующие объявления* @author arain.yu*/var loadscript = (function () {var adqueue = [], dw = document.write; // cach js 'собственное документ. : container); script.onsharestatechange = function () {if (script.readystate == "Загрузка" || Document.Write Document.Write = Функция (AD) {var html = _This.containerobj.innerhtml; document.getElementsbytagname ('head') [0] .appendchild (script); }, закончено: function () {// восстановить документ. }, startNext: function () {adqueue.shift (); this.callback.apply (); if (adqueue.length> 0) {adqueue [0] .startload (); } else {this.fined (); }}}}; return {add: function (adobj) {if (! adobj) return; adqueue.push (new loadadscript (adobj.url, adobj.container, adobj.init, adobj.callback)); вернуть это; }, execute: function () {if (adqueue.length> 0) {adqueue [0] .startload (); }}}};} ());