HTML5WebApppart4: Use WebWorkers to accelerate your mobile Web application (below )...-

Source: Internet
Author: User
Listing 4. loadDeals function vardeals; varsections; vardealDetails {}; vardealsUrl & amp; quot; deals. ebay. comfeedsxml & amp; quot; functionloadDeals () {varxhrnewXMLHttpRequest (); xhr. onreadystatechan ...,. Listing 4.loadDealsFunction

Var deals = []; var sections = []; var dealDetails ={}; var dealsUrl = "http://deals.ebay.com/feeds/xml"; function loadDeals () {var xhr = new XMLHttpRequest (); xhr. onreadystatechange = function () {if (this. readyState = 4 & this. status = 200) {var I = 0; var j = 0; var dealsXml = this. responseXML. firstChild; var childNode ={}; for (I = 0; I <dealsXml. childNodes. length; I ++) {childNode = dealsXml. childNodes. item (I); switch (childNode. localName) {case 'item': deals. push (parseDeal (childNode); break; case "MoreDeals": for (j = 0; j
 
  

InloadDetailsFirst, check the global scope (windowObject)WorkerFunction. If the function is not there, you do not need to do anything. Otherwise, checklocalStorageTo obtain the details of the transaction. This is a common local cache policy for mobile Web applications. This policy is described in detail in Part 1 of this series.

If XML is located locallyparseFromXmlThe function parses it and adds transaction detailsdealDetailsObject. Otherwise, a Web Worker is derived and usedpostMessageSend the Item ID to it. After the Worker retrieves the data and publishes the data back to the main thread, you parse the XML and add the resultdealDetailsAnd then store the XMLlocalStorage. Listing 6 shows the Worker Script: details. js.

Listing 6. Transaction details Worker script

importScripts("common.js?6.1.3");onmessage = function(message){    var itemId = message.data;    var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function(){        if (this.readyState == 4 && this.status == 200){            postMessage({responseXml: this.responseText});        }    };    var urlStr = generateUrl(itemId);    xhr.open("GET", "proxy?url=" + escape(urlStr));    xhr.send(null);}

This Worker script is very simple. You use Ajax to call the proxy, which then calls the eBay Shopping API. After you receive the XML from the proxy, use a JavaScript object text (object literal) to send it back to the main thread. Note that even if you can useXMLHttpRequestBut all information will return itsresponseTextAttribute, not itsresponseXmlAttribute. This is because the Worker script does not have a JavaScript DOM parser. Note,generateUrlThe function is from the common. js file (see listing 7 ). You useimportScriptsFunction imports the common. js file.

Listing 7. Worker import script

function generateUrl(itemId){    var appId = "YOUR APP ID GOES HERE";    return "http://open.api.ebay.com/shopping?callname=GetSingleItem&"+        "responseencoding=XML&appid=" + appId + "&siteid=0&version=665"            +"&ItemID=" + itemId;}

Now that you know how to fill in the transaction details (to support Web Workers browsers), we return to figure 1 to study how to use this method in applications. Note that each transaction hasShow DetailsClick the button to modify the UI, as shown in figure 2.

Figure 2. Transaction details

This UI will be calledshowDetailsFunction. Listing 8 shows this function.

Listing 8. showDetails Functions

function showDetails(id){    var el = $(id);    if (el.style.display == "block"){        el.style.display = "none";    } else {        el.style.display = "block";        if (!el.innerHTML){            var details = dealDetails[id];            if (details){                var ui = createDetailUi(details);                el.appendChild(ui);            } else {                var itemId = id;                var xhr = new XMLHttpRequest();                xhr.onreadystatechange = function(){                    if (this.readyState == 4 &&                                      this.status == 200){                        var itemDetails =                                        parseFromXml(this.responseText);                        if (window.localStorage){                            localStorage.setItem(                                              itemDetails.id,                                              this.responseText);                        }                        dealDetails[id] = itemDetails;                        var ui = createDetailUi(itemDetails);                        el.appendChild(ui);                    }                };                var urlStr = generateUrl(id);                xhr.open("GET", "proxy?url=" + escape(urlStr));                xhr.send(null);            }        }    }}

You receive the ID of the transaction to be displayed and switch whether to display it. When this function is called for the first time, it checks whether the details are stored in the dealDetails detaing. If the browser supports Web Workers, these details have been stored and Its UI has been created and added to the DOM. If the details are not loaded yet, or if the browser does not support Workers, You need to execute an Ajax call to load the data. This is why this application works normally, no matter whether it has Workers or not. This means that if Workers is supported, the data is loaded and the UI will respond immediately. Without Workers, the UI will still be loaded, but it takes several seconds.

Conclusion

For Web developers, Web Workers sounds like a new external technology. However, as described in this article, they are very practical applications. This is especially true for mobile Web applications. These Workers can be used to prefetch data or perform other pre-operations to provide a more real-time UI. This is especially true for mobile Web applications that need to load data through a network that may be slow. Using this technology and cache policy together, your application's quick response will surprise your users!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.