Maison interface Web Tutoriel H5 HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...

HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...

May 17, 2016 am 09:09 AM

清单 4. loadDeals 函数

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
<p>清单 4 展示了 <code>loadDeals</code> 函数,以及应用程序中使用的全局变量。您使用了一个 deals 数组和一个 sections 数组。它们是相关交易的附加组(例如,<code>Deals under $10</code>)。还有一个名为 <code>dealDetails</code> 的映射,其键是 Item IDs(来自于交易数据),其值是从 eBay Shopping <a title="API" href="http://www.31358.cn/api/">API</a> 获取的详细信息。 </p>
<p>您首先调用一个代理,该代理又将调用 eBay Daily Deals REST <a title="API" href="http://www.31358.cn/api/">API</a>。这将把交易列表作为一个 XML 文档提供给您。您解析用于进行 Ajax 调用的 XMLHttpRequest 对象的 <code>onreadystatechange</code> 函数中的文档。您还使用其他两个函数,<code>parseDeal</code> 和 <code>parseSection</code>,来将 XML 节点解析为更易于使用的 JavaScript 对象,但由于它们只是令人厌烦的 XML 解析函数,因此我在这里没有包括它们。最后,在解析了 XML 后,您还使用了另外两个函数,<code>createDealUi</code> 和 <code>createSectionUi</code>,来修改 DOM。此时,这个 UI 如 图 1 所示。 </p>
<p><a href="http://www.31358.cn/wp-content/uploads/2011/12/image0012.jpg"><img src="/static/imghw/default1.png" data-src="http://www.31358.cn/wp-content/uploads/2011/12/image001_thumb3.jpg" class="lazy"   style="max-width:90%" title="image001" alt="image001" border="0"  style="max-width:90%"></a> </p>
<p>如果您返回 清单 4,就会注意到在加载主交易之后,您对这些交易的每个部分都调用了 <code>loadDetails</code> 函数。在这个函数中,您通过使用 eBay Shopping API 加载每个交易的附加细节 — 但前提是浏览器支持 Web Workers。清单 5 展示了 <code>loadDetails</code> 函数。 </p>
<p><a name="l5"><b>清单 5. 预取交易细节</b></a></p>
<pre class="brush:php;toolbar:false">function loadDetails(items){
    if (!!window.Worker){
        items.forEach(function(item){
            var xmlStr = null;
            if (window.<a title="localStorage" href="http://www.31358.cn/localtorage/">localStorage</a>){
                xmlStr = <a title="localStorage" href="http://www.31358.cn/localtorage/">localStorage</a>.getItem(item.itemId);
            }
            if (xmlStr){
                var itemDetails = parseFromXml(xmlStr);
                dealDetails[itemDetails.id] = itemDetails;
            } else {
                var worker = new Worker("details.js");
                worker.onmessage = function(message){
                    var responseXmlStr =message.data.responseXml;
                    var itemDetails=parseFromXml(responseXmlStr);
                    if (window.localStorage){
                        localStorage.setItem(
                                        itemDetails.id, responseXmlStr);
                    }
                    dealDetails[itemDetails.id] = itemDetails;
                };
                    worker.postMessage(item.itemId);
            }
        });
    }
}
Copier après la connexion

loadDetails 中,您首先检查全局作用域(window 对象)中的 Worker 函数。如果该函数不在那里,那么无需做任何事。反之,您首先检查 XML 的 localStorage 以获取这个交易的细节。这是移动 Web 应用程序常用的本地缓存策略,本系列第 2 部分.详细介绍过这种策略。

如果 XML 位于本地,那么您在 parseFromXml 函数中解析它并将交易细节添加到 dealDetails 对象。反之,则衍生一个 Web Worker 并使用 postMessage 向其发送 Item ID。当这个 Worker 检索到数据并将数据发布回主线程后,您解析 XML,将结果添加到 dealDetails,然后将 XML 存储到 localStorage 中。清单 6 展示了这个 Worker 脚本:details.js。

清单 6. 交易细节 Worker 脚本

importScripts("common.js");
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);
}
Copier après la connexion

这个 Worker 脚本非常简单。您使用 Ajax 调用代理,该代理又调用 eBay Shopping API。当您收到来自代理的 XML 后,使用一个 JavaScript 对象文字(object literal)将其发送回主线程。注意,即使您能够使用来自一个 Worker 的 XMLHttpRequest,但所有信息都将返回它的 responseText 属性,而不是它的 responseXml 属性。这是因为这个 Worker 脚本范围内没有 JavaScript DOM 解析器。注意,generateUrl 函数来自 common.js 文件(见 清单 7)。您使用 importScripts 函数导入 common.js 文件。

清单 7. Worker 导入的脚本

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;
}
Copier après la connexion

现在,您已经知道如何(为支持 Web Workers 的浏览器)填充交易细节,我们返回 图 1 研究一下如何在应用程序中使用这种方法。注意,每笔交易旁边都有一个 Show Details 按钮,单击该按钮修改这个 UI,如 图 2 所示。

图 2. 显示的交易细节

 image001

这个 UI 将在您调用 showDetails 函数时显示。清单 8 展示了这个函数。

清单 8. showDetails 函数

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);
            }
        }
    }
}
Copier après la connexion

您收到了即将显示的交易的 ID 并切换是否显示它。当该函数第一次调用时,它将检查细节是否已经存储到 dealDetails 映射中。如果浏览器支持 Web Workers,那么这些细节已经存储且它的 UI 已经创建并添加到 DOM 中。如果这些细节还没有加载,或者,如果浏览器不支持 Workers,那么您需要执行一个 Ajax 调用来加载此数据。这就是这个应用程序无论在有无 Workers 时都同样能正常工作的原因。这意味着,如果 Workers 受到支持,那么数据就已被加载且 UI 将立即响应。如果没有 Workers,UI 仍将加载,只是需要花费几秒钟时间。

结束语

对于 Web 开发人员来说,Web Workers 听起来就像一种外来的新技术。但是,如本文所述,它们是非常实用的应用程序。这对于移动 Web 应用程序来说尤其正确。这些 Workers 可用于预取数据或执行其他预先操作,从而提供一个更加实时的 UI。这对于需要通过网速可能较慢的网络加载数据的移动 Web 应用程序来说尤其正确。结合使用这种技术和缓存策略,您的应用程序的快捷反应将使您的用户感到惊喜!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment exécuter le projet H5 Comment exécuter le projet H5 Apr 06, 2025 pm 12:21 PM

L'exécution du projet H5 nécessite les étapes suivantes: Installation des outils nécessaires tels que le serveur Web, Node.js, les outils de développement, etc. Créez un environnement de développement, créez des dossiers de projet, initialisez les projets et écrivez du code. Démarrez le serveur de développement et exécutez la commande à l'aide de la ligne de commande. Aperçu du projet dans votre navigateur et entrez l'URL du serveur de développement. Publier des projets, optimiser le code, déployer des projets et configurer la configuration du serveur Web.

Que signifie exactement la production de pages H5? Que signifie exactement la production de pages H5? Apr 06, 2025 am 07:18 AM

La production de pages H5 fait référence à la création de pages Web compatibles compatibles multiplateformes à l'aide de technologies telles que HTML5, CSS3 et JavaScript. Son cœur réside dans le code d'analyse du navigateur, la structure de rendu, le style et les fonctions interactives. Les technologies courantes incluent les effets d'animation, la conception réactive et l'interaction des données. Pour éviter les erreurs, les développeurs doivent être débogués; L'optimisation des performances et les meilleures pratiques incluent l'optimisation du format d'image, la réduction des demandes et les spécifications du code, etc. pour améliorer la vitesse de chargement et la qualité du code.

Comment faire l'icône H5 Click Comment faire l'icône H5 Click Apr 06, 2025 pm 12:15 PM

Les étapes pour créer une icône H5 Click comprennent: la préparation d'une image source carrée dans le logiciel d'édition d'image. Ajoutez l'interactivité dans l'éditeur H5 et définissez l'événement Click. Créez un hotspot qui couvre l'icône entière. Définissez l'action des événements de clic, tels que le saut sur la page ou le déclenchement de l'animation. Exporter H5 documents sous forme de fichiers HTML, CSS et JavaScript. Déployez les fichiers exportés vers un site Web ou une autre plate-forme.

À quoi se réfère H5? Explorer le contexte À quoi se réfère H5? Explorer le contexte Apr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

Quels scénarios d'application conviennent à la production de pages H5 Quels scénarios d'application conviennent à la production de pages H5 Apr 05, 2025 pm 11:36 PM

H5 (HTML5) convient aux applications légères, telles que les pages de campagne de marketing, les pages d'affichage des produits et les micro-Websites de promotion d'entreprise. Ses avantages résident dans la plateformité multi-plateaux et une riche interactivité, mais ses limites résident dans des interactions et des animations complexes, un accès aux ressources locales et des capacités hors ligne.

La production de pages H5 est-elle un développement frontal? La production de pages H5 est-elle un développement frontal? Apr 05, 2025 pm 11:42 PM

Oui, la production de pages H5 est une méthode de mise en œuvre importante pour le développement frontal, impliquant des technologies de base telles que HTML, CSS et JavaScript. Les développeurs construisent des pages H5 dynamiques et puissantes en combinant intelligemment ces technologies, telles que l'utilisation du & lt; Canvas & gt; Tag pour dessiner des graphiques ou utiliser JavaScript pour contrôler le comportement d'interaction.

Qu'est-ce que le langage de programmation H5? Qu'est-ce que le langage de programmation H5? Apr 03, 2025 am 12:16 AM

H5 n'est pas un langage de programmation autonome, mais une collection de HTML5, CSS3 et JavaScript pour la création d'applications Web modernes. 1. HTML5 définit la structure et le contenu de la page Web et fournit de nouvelles balises et API. 2. CSS3 contrôle le style et la mise en page, et introduit de nouvelles fonctionnalités telles que l'animation. 3. JavaScript implémente l'interaction dynamique et améliore les fonctions par les opérations DOM et les demandes asynchrones.

Comment faire des fenêtres pop-up avec H5 Comment faire des fenêtres pop-up avec H5 Apr 06, 2025 pm 12:12 PM

H5 ÉTAPES DE CRÉATION DE LA FINES POP-UP: 1. Déterminez la méthode de déclenchement (cliquez, temps, sortie, défilement); 2. Conception du contenu (titre, texte, bouton d'action); 3. Set Style (taille, couleur, police, arrière-plan); 4. Implémentation du code (HTML, CSS, JavaScript); 5. Tester et déploiement.

See all articles