การโหลดจาวาสคริปต์โดยไม่ต้องปิดกั้นมีผลอย่างมากในการเพิ่มประสิทธิภาพการทำงานของหน้าซึ่งสามารถลดการอุดตันของการโหลดหน้าเว็บได้อย่างมีประสิทธิภาพโดย 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 = เอกสารทุกคนคุ้นเคยกับข้างต้น นักเรียนที่อ่านหนังสือรู้ถึงประโยชน์ของการโหลดที่ไม่ปิดกั้นและผลกระทบก็ค่อนข้างดี เมื่อสคริปต์ที่ไม่ปิดกั้นดังกล่าวพบโฆษณา JS ทั่วไปพวกเขาจะเขียนปัญหา - รหัสโฆษณาจะปรากฏใน HTML แต่โฆษณาไม่แสดงโฆษณา
นานี่? HTML ไม่ได้แสดงผลในหน้า?
มาดูรหัสโฆษณา JS
การคัดลอกรหัสมีดังนี้:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
รหัสนั้นค่อนข้างง่ายเพียงแค่ส่งออกรหัส HTML ในเอกสารเขียน (ฉันเชื่อว่าโฆษณาของผู้โฆษณาจำนวนมากเป็นเช่นนี้) ปัญหาเกี่ยวกับหน้าไม่แสดงโฆษณาคืออะไร? ปัญหาอยู่ในเอกสารนี้เขียน ทำไม ก่อนอื่นให้ดูที่คำจำกัดความของ document.write
คำจำกัดความและการใช้งาน
วิธีการเขียน () สามารถเขียนนิพจน์ HTML หรือรหัส JavaScript ไปยังเอกสาร
สามารถแสดงพารามิเตอร์หลายพารามิเตอร์ (exp1, exp2, exp3, ... ) และพวกเขาจะถูกผนวกเข้ากับเอกสารตามลำดับ
วิธี:
หนึ่งคือการใช้ปาร์ตี้นี้เพื่อส่งออก HTML ในเอกสารและอีกฝ่ายคือการสร้างเอกสารใหม่ใน Windows และ Frameworks นอกหน้าต่างที่มีการเรียกวิธีการ ในกรณีที่สองอย่าลืมใช้วิธีปิด () เพื่อปิดเอกสาร
แต่หลักการของมันคือการดำเนินการในระหว่างกระบวนการป้อนข้อมูลการไหลของหน้า เมื่อโหลดหน้าเว็บแล้ว Document.write () จะถูกเรียกอีกครั้งและ document.open () จะถูกเรียกโดยปริยายเพื่อลบเอกสารปัจจุบันและเริ่มเอกสารใหม่ กล่าวคือถ้าเราใช้ document.write หลังจากโหลด HTML เราจะกำจัด HTML ที่สร้างขึ้นก่อนหน้านี้และแสดงเอาต์พุตเนื้อหาจาก document.write
ในตัวอย่างของเราหลังจากโหลดหน้าเว็บแล้ว Document.write จะถูกส่งออกใน HTML และจะไม่ถูกเรียกใช้งาน ฉันรู้ปัญหาและหลักการดังนั้นจะแก้ปัญหานี้ได้อย่างไร?
ใช้ Ajax แบบอะซิงโครนัสโดยมีสายต่างกัน ไฟล์โฆษณาจำนวนมากเป็นบุคคลที่สาม ภายใต้ชื่อโดเมนที่แตกต่างกันมีปัญหาข้ามโดเมนและเราไม่สามารถควบคุมผลลัพธ์ของรหัสได้ ในกรณีนี้เรานึกถึงวิธีการเขียนเอกสารใหม่เขียนแล้วเขียนเอกสารใหม่เขียนกลับหลังจากโหลดไฟล์ JS ดูรหัส
เวอร์ชันแรกโหลดโฆษณา JS โดยไม่ต้องปิดกั้น:
ฟังก์ชั่น loadadscript (url, container, callback) {this.dw = document.write; this.url = url; this.containerObj = (typeof container == 'string'? document.getElementById (คอนเทนเนอร์): คอนเทนเนอร์); this.callback = การโทรกลับ || การทำงาน(){}; } loadadscript.prototype = {startload: function () {var script = document.createElement ('script'), _this = this; if (script.readyState) {// ie script.onreadyStateChange = function () {ถ้า (script.readyState == "โหลด" || script.readyState == "เสร็จสมบูรณ์") {script.onreadyStateChange = null; _this.finished (); - } else {// 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.getElementByTagname ('head') [0] .AppendChild (สคริปต์); }, เสร็จสิ้น: function () {document.write = this.dw; this.callback.apply (); -รหัสการโทรหน้า:
var loadscript = ใหม่ loadadscript ('ad.js', 'msat-adwrap', function () {console.log ('msat-adwrap');}); loadscript.startload (); var loadscript = ใหม่ 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 = ใหม่ loadadscript ('ad3.js', 'msat-adwrap', function () {console.log ('msat-adwrap3');}); loadscript.startload ();โฆษณารหัส JS
//ad.jsdocument.write('<img src = "http://images.cnblogs.com/logo_small.gif"> '); // ad2.jsdocument.write (' <img src = "http://www.baidu.com/img/img 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> "MSAT-ADWRAP2"> </div> <script type = "text/javascript"> loadscript.add ({url: 'ad.js', container: 'msat-adwrap', การเรียกกลับ: function () {console.log ('msat-adwrap');}}) การโทรกลับ: function () {console.log ('msat-adwrap2');}}). เพิ่ม ({// google adsense url: 'http: //pagead2.googlesyndication.com/pagead/show_ads.js' "CA-PUB-2152294856721899"; }). ดำเนินการ (); </script> </body> </html>ซอร์สโค้ด loadscript.js
/*** โฆษณาที่ไม่ปิดกั้น* @author arain.yu*/var loadscript = (function () {var adqueue = [], dw = document.write; // cache js 'document.write function loadadscript (url, container, init, callback) {this.url = url; container); this.init = init || function() { }; this.callback = callback || function() { }; } LoadADScript.prototype = { startLoad : function() { var script = document.createElement('script'), _this = this; _this.init.apply(); if(script.readyState) {//IE script.onreadystatechange = ฟังก์ชั่น () {if (script.readyState == "โหลด" || script.ReadyState == "เสร็จสิ้น") {script.onreadyStateChange = null; html = _this.containerobj.innerhtml; _this.containerobj.innerhtml = html + ad; }, เสร็จสิ้น: function () {// restore document.write document.write = this.dw; }, startNext: function () {adqueue.shift (); this.callback.apply (); if (adqueue.length> 0) {adqueue [0] .startload (); } else {this.finished (); - return {add: function (adobj) {ถ้า (! adobj) return; adqueue.push (ใหม่ loadadscript (adobj.url, adobj.container, adobj.init, adobj.callback)); คืนสิ่งนี้; }, execute: function () {if (adqueue.length> 0) {adqueue [0] .startload (); -