Table des matières
Script 的堵塞(block)特性
1. Deferred Script (延迟脚本)
2. Dynamic Script Elements (动态脚本)
3. XMLHttpRequest Script Injection (XHR动态插入)
参考
Maison interface Web tutoriel HTML HTML中的script标签研究_html/css_WEB-ITnose

HTML中的script标签研究_html/css_WEB-ITnose

Jun 24, 2016 am 11:43 AM

Script 的堵塞(block)特性

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. - MDN

the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. - Nicholas C. Zakas「High Performance JavaScript 」

上面引用两段话的意思大致是,当浏览器解析DOM文档时,一旦遇到 script 标签(没有defer 和 async 属性)就会立即下载并执行,与此同时浏览器对文档的解析将会停止,直到 script 代码执行完成。出现这种堵塞行为一方面是因为浏览器的UI渲染,交互行为等都是单线程操作,另一方是因为 script 里面的代码可能会影响到后面文档的解析,比如下面的代码:

html<script type="text/javascript">  document.write("The date is " + (new Date()).toDateString());</script>

这个堵塞特性会严重的影响用户体验,下面是几种优化方案:

  • 尽量把脚本往文档的后面放,以减少对文档的堵塞,最好放在 前面。
  • 尽量把脚本按照它们的依赖关系放在一个文件中

不过更好的方法是下面的非堵塞加载脚本(Nonblocking Scripts)的方法:

1. Deferred Script (延迟脚本)

Script 有一个 defer 属性,拥有这个属性的script表明这个script不会修改DOM,因此这段脚本会在文档树全部解析完成后触发( to be executed after the document has been parsed). 但这个属性并不被所有的浏览器支持。

2. Dynamic Script Elements (动态脚本)

原理就是使用脚本创建 script 元素,设置 src 需为要动态添加脚本的 URL,再把这个 script 添加到DOM中。有时我们需要动态脚本加载完成后再执行某些操作,这就需要我们在脚本加载完成后添加一个回调函数,这个可以通过 script 的 onload 事件实现。下面的实现代码:

jsfunction loadJS(url, callback){  var script = document.createElement('script');  script.type = 'text/javascript';  if(script.readyState){  // 兼容IE的旧版本    script.onreadystatechange = function(){      if(script.readyState == 'loaded' || script.readyState == 'complete'){        script.onreadystatechange = null;        callback();      }    }  }  else{     script.onload = function(){      callback();    }      }  script.src = url;  document.getElementsByTagName('head')[0].appendChild(script);}

有时我们需要我们动态加载的脚本按照我们加载的顺序执行,但上面的实现并不能保证这一点,加载的脚本在下载完成后就会立即执行,而不会按照我们定义的顺序。要解决这个问题也不难,可以参照下面的代码:

jsloadJS('a.js', function(){  loadJS('b.js', function(){    loadJS('c.js', function(){      app.init();    })  })})

当有大量的脚本需要动态添加时,这样写也会遇到问题;另外的解决方案是利用一些现成的库,比如 LABjs

3. XMLHttpRequest Script Injection (XHR动态插入)

原理是利用XMLHttpReques(XHR)对象,动态获取一段JS代码,然后插入文档。
相对其他方法来说的一个优点是可以“懒执行”,也就是JS代码已经先下载好了并没有执行,可以在需要的来执行(?)(之前的动态脚本在下载后会立即执行)。实现代码:

jsfunction xhrLoadJS (url, callback){  var xhr = new XMLHttpRequest();  xhr.open('get', url, true);  xhr.onreadystatechange = function(){    if(xhr.readyState == 4){      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){        var script = document.createElement('script');        script.type = 'text/script';        script.text = xhr.responseText;        eval(xhr.responseText);  // 执行代码        document.body.appendChild(script);        callback();      }    }  }  xhr.send(null);}

缺点是不能跨域请求

参考

  • Javascript 装载和执行
  • MDN Script元素
  • Nicholas C. Zakas 所著的「High Performance JavaScript 」的第一章 "Loading and Execution"
  • 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

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    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.

    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 !

    Article chaud

    Porce de variable PHP expliquée
    1 Il y a quelques mois By 百草
    Conseils pour écrire des commentaires PHP
    4 Il y a quelques semaines By 百草
    Commentant le code en php
    4 Il y a quelques semaines By 百草
    <🎜>: Grow A Garden - Guide complet des marchands itinérants
    3 Il y a quelques semaines By Jack chen

    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)

    Sujets chauds

    Tutoriel PHP
    1510
    276
    Le `` vs `` en html Le `` vs `` en html Jul 19, 2025 am 12:41 AM

    Il s'agit d'un élément au niveau du bloc, utilisé pour diviser de grandes zones de contenu de bloc; Il s'agit d'un élément en ligne, adapté à l'emballage de petits segments de fragments de texte ou de contenu. Les différences spécifiques sont les suivantes: 1. Occuper exclusivement une ligne, une largeur et une hauteur, des marges intérieures et extérieures peuvent être définies, qui sont souvent utilisées dans des structures de mise en page telles que les en-têtes, les barres latérales, etc.; 2. N'enveloppez pas les lignes, n'occupez que la largeur du contenu et sont utilisés pour le contrôle du style local tel que la décoloration, le gras, etc.; 3. En termes de scénarios d'utilisation, il convient à l'organisation de mise en page et de structure de la zone globale, et est utilisé pour les ajustements de style à petite échelle qui n'affectent pas la disposition globale; 4. Lors de la nidification, il peut contenir des éléments et les éléments au niveau du bloc ne doivent pas être imbriqués à l'intérieur.

    Ressources de précharge avec html `lien rel =' preload '` Ressources de précharge avec html `lien rel =' preload '` Jul 19, 2025 am 12:54 AM

    LinkRel = "Preload" est une technologie qui optimise les performances de chargement de page et est utilisée pour charger les ressources critiques à l'avance. Son objectif principal est de hiérarchiser le chargement des ressources essentielles au rendu de l'écran d'accueil, telles que les polices, les clés CSS / JS et les images d'écran d'accueil. Faites attention à l'utilisation: 1. Définissez correctement l'attribut AS pour spécifier le type de ressource; 2. Évitez les abus et empêchez une utilisation excessive de la bande passante; 3. Assurez-vous que les ressources seront réellement utilisées, sinon elle entraînera un gaspillage de demandes; 4. Ajouter un attribut de crossorigin aux ressources inter-domaines. Une méthode d'écriture incorrecte telle que l'absence d'attribut AS entraînera une précharge invalide. L'utilisation rationnelle peut améliorer l'efficacité du chargement des pages, sinon elle peut être contre-productive.

    Tags HTML essentiels pour les débutants Tags HTML essentiels pour les débutants Jul 27, 2025 am 03:45 AM

    Pour commencer rapidement avec HTML, il vous suffit de maîtriser quelques balises de base pour créer un squelette Web. 1. La structure de la page est essentielle et, qui est l'élément racine, contient des méta-informations et est la zone d'affichage du contenu. 2. Utilisez le titre. Plus le niveau est élevé, plus le nombre est petit. Utilisez des balises pour segmenter le texte pour éviter de sauter le niveau. 3. Le lien utilise des balises et correspond aux attributs HREF, et l'image utilise des balises et contient des attributs SRC et Alt. 4. La liste est divisée en listes non ordonnées et listes commandées. Chaque entrée est représentée et doit être imbriquée dans la liste. 5. Les débutants n'ont pas à forcer la mémorisation de toutes les balises. Il est plus efficace de les écrire et de les vérifier pendant que vous écrivez. Maître la structure, le texte, les liens, les images et les listes pour créer des pages Web de base.

    Concepts Shadow Dom et intégration HTML Concepts Shadow Dom et intégration HTML Jul 24, 2025 am 01:39 AM

    Shadowdom est une technologie utilisée dans la technologie des composants Web pour créer des sous-arbres DOM isolés. 1. Il permet la monture d'une structure DOM indépendante sur les éléments HTML ordinaires, avec ses propres styles et comportements, et n'affecte pas le document principal; 2. Créé via JavaScript, comme l'utilisation de la méthode attachshadow et la définition du mode à ouvrir; 3. Lorsqu'il est utilisé en combinaison avec HTML, il a trois caractéristiques principales: la structure claire, l'isolement de style et la projection de contenu (fente); 4. Les notes incluent le débogage complexe, le contrôle de la portée du style, les frais généraux de performances et les problèmes de compatibilité du cadre. En bref, Shadowdom fournit des capacités d'encapsulation natives pour construire des composants d'interface utilisateur réutilisables et non polluants.

    Pouvez-vous mettre une balise  dans une autre balise ? Pouvez-vous mettre une balise dans une autre balise ? Jul 27, 2025 am 04:15 AM

    ❌oucannotnesttagssisideanothertagbecauseit’sinvalidhtml; browsersautomatiquematethethefirstbeforeOpiningtheenxt, résultant de laparateParagraphs.

    Utilisation de l'attribut HTML `Télécharger 'pour les liens Utilisation de l'attribut HTML `Télécharger 'pour les liens Jul 17, 2025 am 03:57 AM

    TheHTMLdownloadattributeallowsuserstodownloadfilesdirectlyfromalinkbyusingthetag.Toimplementit,adddownloadtotheanchortag,suchasDownloadPDF,orspecifyacustomfilenamelikeDownloadasmy-document.pdf.1.Itworksbestwithsame-originURLsandcommonfiletypeslikePDF

    Tag de style HTML: en ligne vs CSS interne Tag de style HTML: en ligne vs CSS interne Jul 26, 2025 am 07:23 AM

    La méthode de placement de style doit être sélectionnée selon la scène. 1. En ligne convient à la modification temporaire des éléments uniques ou du contrôle JS dynamique, tels que la couleur du bouton change avec le fonctionnement; 2. CSS interne convient aux projets avec quelques pages et une structure simple, ce qui est pratique pour la gestion centralisée des styles, tels que les paramètres de style de base des pages de connexion; 3. La priorité est donnée à la réutilisation, à la maintenance et aux performances, et il est préférable de diviser les fichiers CSS de liaison externe pour les grands projets.

    Comment intégrer une vidéo YouTube en HTML Comment intégrer une vidéo YouTube en HTML Jul 16, 2025 am 04:43 AM

    Pour intégrer des vidéos YouTube dans une page Web, vous pouvez copier directement le code intégré fourni par YouTube et le coller dans la page HTML; 1. Ouvrez la page vidéo cible et confirmez le lien vidéo correct; 2. Cliquez sur "Partager" → "Embed" pour copier le code IFRAME généré; 3. ou créez manuellement la balise iframe et définissez le SRC sur https://www.youtube.com/embed/video id; 4. Il est recommandé d'utiliser une largeur réactive et d'ajouter des attributs AllailLullScreen; 5. Les suggestions avancées incluent l'utilisation de conteneurs pour atteindre des ratios 16: 9, retarder la charge pour améliorer les performances et faire attention aux conseils de politique de confidentialité.

    See all articles