Table des matières
什么是脚本阻塞
XHR
Iframe
DOM Element
Defer/Async
正常执行
defer执行
async执行
Maison interface Web tutoriel HTML 最佳实践:非阻塞脚本载入_html/css_WEB-ITnose

最佳实践:非阻塞脚本载入_html/css_WEB-ITnose

Jun 24, 2016 am 11:24 AM

当今Web页面和脚本已经越来越复杂,页面性能有时会变得很差。 这常常被误解为网络或浏览器的问题,其实前端技术对页面性能有着非常显著的影响。 前端对页面性能的影响也是多方面的:

  • 脚本/样式文件的划分会影响浏览器缓存效率。
  • 频繁的DOM操作会占用大量CPU资源。
  • 资源链接的先后顺序也会影响页面渲染速度。
  • 同步的网络请求会使页面停止响应。

本文将探讨不同的脚本载入方式对页面性能的影响, 包括『浏览器忙提示』、『页面停止渲染』、『光标停止响应』等。 最终给出无阻塞脚本载入的最佳实践。

什么是脚本阻塞

本文的主题是无阻塞脚本载入技术,那么什么是脚本阻塞呢?

在 Web性能优化:prefetch, prerender 一文中提到, 浏览器在获取资源时会经过DNS解析、建立连接、下载文件、渲染页面等过程。 浏览器只会同时下载3-5个脚本,然后顺序执行它们。 并且在下载和执行过程中,页面会停止渲染和响应(也就是我们说的页面卡死)。

性能最差的情形是某个脚本下载超时,后面的脚本和样式都会被阻塞很长时间, 浏览器的图标会一直处于忙的状态。 如果这个脚本出现在HTML HEAD标签中,阻塞过程中整个页面都将是空白,用户体验极差。

为了防止脚本阻塞,我们来探讨非阻塞的脚本载入方式。 采用这种脚本在如方式时,浏览器(以Chrome为例)不会显示忙指示器图标, 页面也不会停止响应。

XHR

缺点:不能跨域,容易被劫持

我们知道 XHR 可以用来执行异步的网络请求,XHR Eval方法的原理便是通过XHR下载整个脚本,通过 eval() 函数来执行这个脚本。

$.get('/path/to/sth.js')    .done(function(src){        eval(src);    });
Copier après la connexion

因为 XHR 的下载过程是异步的,所以这个过程中浏览器图标不会显示『忙提示』。 JS的执行时间很短暂,可以认为页面始终不会停止响应。 XHR 有跨域问题,因此该方法只适用于资源位于同一域名的情况(或者开启CORS响应头字段)。

我们知道 eval() 方法是不安全的,除了使用 eval() 方法,我们还可以创建一个

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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

See all articles