0
208
Vistas¿Cómo verificar si stripe.js ha terminado de ejecutarse?
Intentando mejorar mi puntuación en Lighthouse y el rendimiento general de un sitio. Los documentos oficiales sobre la inclusión de la mención de stripe.js (énfasis mío):
Para aprovechar al máximo la funcionalidad antifraude avanzada de Stripe, incluya este script en todas las páginas, no solo en la página de pago . Esto le permite a Stripe detectar comportamientos sospechosos que pueden ser indicativos de fraude cuando los clientes navegan por su sitio web.
Lo cual es comprensible, pero significa que, sin async / defer , el script ralentiza ligeramente la página (en ~190 ms en mis pruebas) en la mayoría de las páginas que apenas la usan.
Y:
También puede cargar
deferusando el atributoasynco diferido en la etiqueta del script. Tenga en cuenta, sin embargo, que con la carga asíncrona, las llamadas a la API deberán realizarse solo después de que finalice la ejecución del script .
Esto me deja con las siguientes preguntas:
- ¿Cómo puedo comprobar si stripe.js ha terminado de ejecutarse?
-
asyncodefer? es decir, es stripe.js completamente independiente (asincrónico) o depende de que el DOM esté completamente construido (aplazado)? - En lugar de verificar si stripe.js terminó de ejecutarse, tal vez debería mover mi propio código de Stripe en línea (para una página de pago) a su propio archivo JS dedicado, cargado como diferido. De esta manera, las cosas se cargarían sin bloqueo y aún se ejecutarían en su orden relativo.
3 Respuestas
Responde la pregunta0
Si usar un módulo npm no es su caso para la carga asíncrona, puede verificar la función Stripe antes de inicializar Stripe.js. Algo como esto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script defer src="https://js.stripe.com/v3/"></script> </head> <body> <script type="text/javascript"> try { console.log("The first attempt to access Stripe: " + Stripe.version); } catch (e) { console.log("Stripe is not ready."); } stripeScriptElement = document.querySelector("script[src^='https://js.stripe.com/v3']"); if (stripeScriptElement) { stripeScriptElement.addEventListener("load", () => { if (Stripe) { console.log("Stripe v." + Stripe.version + " is ready. "); } else { console.error("Failed loading Stripe.js"); } }); } </script> </body> </html>0
En un entorno React, inicializo de la siguiente manera:
import { loadStripe } from "@stripe/stripe-js"; export let stripe = null; export let stripe_started = false; export let stripe_running = false; (async () => { try { stripe = await loadStripe("pk_test_****"); stripe_running = true; } catch (err) { stripe_running = false; } finally { stripe_started = true; } })();cualquier módulo que importe éste tiene acceso a las banderas; el cierre permite que la función se ejecute de forma asíncrona en el nivel superior.
0
¿Cómo puedo comprobar si stripe.js ha terminado de ejecutarse?
Comprobando loadStripe() como la otra respuesta .
asíncrono o diferido? es decir, es stripe.js completamente independiente (asincrónico) o depende de que el DOM esté completamente construido (aplazado)?
Aplazar, ya que a veces stripe.js y su propio js buscarán un elemento para su DOM para montar, y será más seguro ejecutarlo después de que se cargue el DOM completo 
En lugar de verificar si stripe.js terminó de ejecutarse, tal vez debería mover mi propio código de Stripe en línea (para una página de pago) a su propio archivo JS dedicado, cargado como diferido. De esta manera, las cosas se cargarían sin bloqueo y aún se ejecutarían en su orden relativo.
Asegúrese de marcar tanto stripe.js como su propio JS dedicado como "diferido", y coloque stripe.js antes que su JS. Cuando hay varios scripts diferidos, su orden de ejecución se decidirá por el orden de inclusión
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer