Shulou(Shulou.com)06/02 Report--

This article focuses on "how to rewrite [xss_clean] to achieve non-blocking loading JS ads", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to rewrite [xss_clean] to achieve non-blocking loading of JS ads.

Non-blocking loading javascript plays an important role in page performance optimization, which can effectively reduce the blocking of js to page loading. Especially some advertising js files, as the advertising content may be rich media, it is more likely to become the bottleneck of your page loading speed, high-performance javascript tells us, students, to improve your web page speed, load JS without blocking.

So the code appears.

(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 [XSS _ clean] .insertBefore (s, x);}) ()

The above is familiar to everyone, and students who have read the book all know the benefits of such non-blocking loading, and the effect is quite good. When such non-blocking scripts encounter general js ads, there is a writing problem-the ad code appears in HTML but does not display ads.

What? If the HTML comes out, it will not be rendered on the page.

Take a look at the ad js code first.

[xss_clean] ('

')

The code is quite simple, just a [xss_clean] output HTML code (I believe many advertisers' ads are like this), where is the problem that the page does not display ads? The problem lies in this [xss_clean]. Why? Let's first w3schools to see that the definition of [xss_clean] is very useful.

Definition and usage

The write () method writes HTML expressions or JavaScript code to the document.

Multiple parameters (exp1,exp2,exp3,...) can be listed and will be appended to the document sequentially.

Methods:

One is to use this party to output HTML in the document, and the other is to generate a new document in a window or frame other than the window in which the method is called. In the second case, be sure to use the close () method to close the document.

But the principle is that it is executed during the page flow input process, and once the page is loaded, call [xss_clean] () again, implicitly calling document.open () to erase the current document and start a new document. In other words, if we use [xss_clean] after the HTML is loaded, we will generate html before erasing, and display the content of the [xss_clean] output.

In our example, the output [xss_clean] in html after the page is loaded will not be executed. The problem is known, the principle is known, then how to solve this problem?

Asynchronous use of ajax, different lines, many advertising files are third-party, in different domain names, there is a cross-domain problem, and we can not control the output of its code. In this case, one way we can think of is to rewrite [xss_clean] and then rewrite [xss_clean] back after the js file has finished loading. Look at the code.

* the non-blocking version loads js ads:

Function LoadADScript (url, container, callback) {this.dw = [xss_clean]; this.url = url; this.containerObj = (typeof container = = 'string'?document.getElementById (container): container); this.callback = callback | | function () {} } LoadADScript.prototype = {startLoad: function () {var script = document.createElement ('script'), _ this = this If (script.readyState) {/ / IE script.onreadystatechange = function () {if (script.readyState = = "loaded" | | script.readyState = = "complete") {script.onreadystatechange = null; _ this.finished ();}} } else {/ / Other script.onload = function () {_ this.finished ();};} [xss_clean] = function (ad) {var html = _ this.containerObj [XSS _ clean] _ this.containerObj [XSS _ clean] = html + ad;} script.src = _ this.url; script.type = 'text/javascript'; document.getElementsByTagName (' head') [0] .appendChild (script);}, finished: function () {[xss_clean] = this.dw This.callback.apply ();}}

Page call code:

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-adwrap3')) }); loadScript.startLoad ()

Advertisement JS code

/ / ad.js [xss_clean] ('

'); / / ad2.js [xss_clean] ('

'); / / ad3.js [xss_clean] ('

')

The problem with the * version is that some problems occur when multiple files are called:

1. Due to the different speed of loading files, there may be some loading first and then loading, that is, unordered, and most of the time what we need is orderly. For example, we need to load the ads on the * screen first.

two。 Think of some ads that need to set some parameters in advance, such as google adsense

In order to solve these two problems, it can be further modified to the final non-blocking loaded js version.

HTML page code:

New_file loadScript.add ({url:'ad.js', container: 'msat-adwrap', callback:function () {console.log (' msat-adwrap');}}) .add ({url:'ad2.js', container: 'msat-adwrap2', callback:function () {console.log (' msat-adwrap2')) }}). Add ({/ / google adsense url:' http://pagead2.googlesyndication.com/pagead/show_ads.js', container: 'msat-adwrap', init: function () {google_ad_client = "ca-pub-2152294856721899"; / * 250x250 rich * / google_ad_slot = "3929903770"; google_ad_width = 250 Google_ad_height = 250;}, callback:function () {console.log ('msat-adwrap3');}}) .execute ()

Loadscript.js source code

/ * * non-blocking load ads * @ author Arain.Yu * / var loadScript = (function () {var adQueue = [], dw = [xss_clean]; / / cache js's own [xss_clean] function LoadADScript (url, container, init, callback) {this.url = url; this.containerObj = (typeof container = 'string'? Document.getElementById (container): 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 = function () {if (script.readyState = = "loaded" | | script.readyState = = "complete") {script.onreadystatechange = null; _ this.startNext ();}} } else {/ / Other script.onload = function () {_ this.startNext ();};} / rewrite [xss_clean] [xss_clean] = function (ad) {var html = _ this.containerObj [XSS _ clean] _ this.containerObj [XSS _ clean] = html + ad;} script.src = _ this.url; script.type = 'text/javascript'; document.getElementsByTagName (' head') [0] .appendChild (script) }, finished: function () {/ / restore [xss_clean] [xss_clean] = 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 (new LoadADScript (adObj.url, adObj.container, adObj.init, adObj.callback); return this;}, execute: function () {if (adQueue.length > 0) {adQueue [0] .startLoad ();};} ()) At this point, I believe you have a deeper understanding of "how to rewrite [xss_clean] to achieve non-blocking loading JS advertising". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.