20.1 Atomics 与 SharedArrayBuffer
Mensajería entre documentos
La mensajería entre documentos, a veces abreviada como XDM (mensajería entre documentos), es
la capacidad de transferir información entre diferentes contextos de ejecución (como diferentes subprocesos de trabajo o páginas de diferentes fuentes). Por ejemplo, una página en www.wrox.com quiere comunicarse con una página
en p2p.wrox.com contenida en un panel en línea . Antes de XDM, requería mucho trabajo implementar esta comunicación de manera segura. XDM
estandariza esta función de una manera segura y fácil de usar.
Tenga en cuenta que los mensajes de contexto cruzado se utilizan para la comunicación entre ventanas o entre subprocesos de trabajo. Esta sección presenta principalmente el uso de
postMessage () para comunicarse con otras ventanas. Para la comunicación entre subprocesos de trabajo, MessageChannel y
BroadcastChannel, consulte el Capítulo 27.
El núcleo de XDM es el método postMessage (). Además de XDM, este nombre de método se ha utilizado en muchos lugares en HTML5,
pero el propósito es el mismo, todos los cuales son transferir datos a otra ubicación.
El método postMessage () recibe 3 parámetros: un mensaje, una cadena que representa la fuente receptora de destino y una matriz opcional de objetos transferibles (solo
relacionados con subprocesos de trabajo). El segundo parámetro es muy importante para la seguridad y puede limitar el objetivo del navegador de entregar datos. Veamos un
ejemplo:
let iframeWindow = document.getElementById ("myframe"). ContentWindow;
iframeWindow.postMessage ("A secret", "http://www.wrox.com"); La
última línea de código intenta insertar la ventana Enviar un mensaje en la cuadrícula, y la fuente debe ser "http://www.wrox.com".
Si la fuente coincide, el mensaje se enviará al panel en línea; de lo contrario, postMessage () no hace nada. Esta restricción puede evitar que la
información se filtre debido a un cambio de dirección. Si no desea limitar el destino de recepción, puede pasar "*" al segundo parámetro de postMessage (),
pero esto no se recomienda.
Después de recibir el mensaje XDM, el evento de mensaje se activará en el objeto de ventana. Este evento se activa de forma asincrónica, por lo
que puede haber un retraso desde que se envía el mensaje hasta que se recibe el mensaje (la ventana de recepción activa el evento del mensaje). El
objeto de evento pasado al controlador de eventos onmessage contiene la siguiente información importante.
datos: los datos de cadena pasados a postMessage () como primer parámetro.
origen: la fuente del documento que envía el mensaje, por ejemplo, "http://www.wrox.com". fuente: el proxy del objeto de ventana en el documento que envía el mensaje. Este objeto proxy se utiliza principalmente
para ejecutar el método postMessage () en la ventana que envió el mensaje anterior . Si la ventana de envío tiene la misma fuente, entonces este objeto debería ser el
objeto de la ventana .
Es muy importante verificar el origen de la ventana de envío después de recibir el mensaje.
Así como el segundo parámetro de postMessage () puede garantizar que los datos no se transmitan accidentalmente a la página desconocida, verificar la fuente de la ventana de envío en el controlador de eventos onmessage puede garantizar que los datos provengan del
lugar correcto . El uso básico es el siguiente:
window.addEventListener ("message", (event) => { // Asegúrese del remitente deseado
if (event.origin == “http://www.wrox.com”) { // Realice algún procesamiento en los datos processMessage (event.data); // Opcional: envíe un mensaje a la ventana de origen event.source. postMessage ("Received!", "http://p2p.wrox.com"); } }); En la mayoría de los casos, event.source es un proxy para un objeto de ventana, no un objeto de ventana real. Por lo tanto , no se puede acceder a la información de todas las ventanas a través de él. Es mejor usar solo postMessage (), este método siempre existe y se puede llamar. XDM tiene algo de rareza. En primer lugar, la implementación inicial del primer parámetro de postMessage () es siempre una cadena. Posteriormente, se cambió el primer parámetro para permitir que se pasen datos de cualquier estructura, pero no todos los navegadores han implementado este cambio. Para esto, es mejor enviar la cadena a través de postMessage (). Si necesita pasar datos estructurados, es mejor llamar a JSON.stringify () en los datos primero , y luego llamar a JSON.parse () en el controlador de eventos onmessage después de pasarlo a través de postMessage (). Es muy conveniente utilizar XDM al cargar diferentes dominios a través del panel integrado. Este método es muy común en mashups y aplicaciones sociales . Al usar XDM para comunicarse con la página web en el panel integrado, se puede garantizar la seguridad de la página que la contiene. XDM también se puede utilizar para comunicarse entre páginas del mismo origen.
20.3 API de codificación
La API de codificación se utiliza principalmente para implementar la conversión entre cadenas y matrices estereotipadas. La especificación agrega 4 nuevas clases globales para realizar conversiones:
TextEncoder, TextEncoderStream, TextDecoder y TextDecoderStream.
Tenga en cuenta que, en comparación con la codificación y decodificación masiva, la compatibilidad con la codificación y decodificación de secuencias es muy limitada.
20.3.1
Codificación de texto La API de codificación proporciona dos métodos para convertir una cadena en un formato binario de matriz regular: codificación por lotes y codificación de flujo. Al convertir una
cadena de caracteres en una matriz fija, el codificador siempre usa UTF-8.
20.4 API de archivo 与 API de blob
Uno de los principales puntos débiles de las aplicaciones web es la incapacidad de manipular archivos en la computadora del usuario. Antes de 2000, la única forma de procesar archivos
era ponerlos en un formulario, nada más. La API de archivos y la API de Blob están diseñadas para permitir que los desarrolladores web
accedan a los archivos en la máquina cliente de forma segura, para interactuar mejor con estos archivos.
20.4.1 Tipo de archivo
La API de archivos todavía se basa en el campo de entrada del archivo en el formulario, pero agrega la capacidad de acceder directamente a la información del archivo. HTML5
agrega la colección de archivos al elemento de entrada del archivo en el DOM. Cuando el usuario selecciona uno o más archivos en el campo de archivo, la
colección de archivos contendrá un grupo de objetos Archivo, que representan los archivos seleccionados. Cada objeto de archivo tiene algunas propiedades de solo lectura.
nombre: el nombre del archivo en el sistema local.
tamaño: tamaño del archivo en bytes.
tipo: una cadena que contiene el tipo MIME del archivo.
lastModifiedDate: una cadena que representa la última hora de modificación del archivo. Este atributo solo lo implementa Chome.
Por ejemplo, al monitorear el evento de cambio y luego recorrer la colección de archivos, puede obtener la información de cada archivo seleccionado:
let filesList = document.getElementById ("files-list");
filesList.addEventListener ("change", (event) => { let files = event.target.files, i = 0, len = files.length; while (i <len) { const f = files [i]; console.log ( ); i ++; } });
${f.name} (${f.type}, ${f.size} bytes)
Arrastrar y soltar nativo
Evento de arrastrar y soltar
Elemento de medios
Atributos
| Atributos | tipo de datos | Descripción |
|---|---|---|
| auto-reproducción | B | Obtener o establecer reproducción automática |
| control S | B | Obtener o establecer la propiedad de los controles, que se utiliza para mostrar u ocultar los controles integrados en el navegador. |
| bucle actual | En t | El número de veces que se ha realizado un bucle en el archivo multimedia. |
| currentSrc | S | La URL del archivo multimedia que se está reproduciendo actualmente |
| tiempo actual | F | Segundos transcurridos |
| defaultPlaybackRate | F | Obtener o establecer la velocidad de reproducción predeterminada |
| duración | F | Tiempo total de reproducción de medios |
| terminó | B | Si la reproducción está completa |
| lazo | B | Obtenga o establezca si desea comenzar a reproducir desde el principio después de que se reproduzca el archivo multimedia |
| apagado | B | Obtener o establecer si desea silenciar |
20.7 API de notificaciones
Utilice la notificación HTML5 para implementar notificaciones de escritorio. La
API de notificaciones se utiliza para mostrar notificaciones a los usuarios. No importa desde qué punto de vista, la notificación aquí es muy similar al cuadro de diálogo alert ():
ambos usan la API de JavaScript para activar el comportamiento del navegador fuera de la página y permiten que la página maneje la interacción del usuario con el cuadro de diálogo o la ventana emergente de notificación
. Sin embargo, las notificaciones brindan capacidades de personalización más flexibles.
La API de notificaciones es muy útil en Service Workers. La aplicación web progresiva (PWA, aplicación web progresiva)
puede mostrar un mensaje al usuario cuando la página está inactiva activando una notificación, que parece una aplicación nativa.
20.7.1 Permisos de
notificación Se puede abusar de la API de notificaciones, por lo que dos medidas de seguridad están habilitadas de forma predeterminada:
Las notificaciones solo se pueden activar en el código que se ejecuta en un contexto de seguridad;
Las notificaciones deben ser claramente aprobadas por los usuarios de acuerdo con los principios de cada fuente.
La autorización del usuario para mostrar la notificación se realiza a través de un cuadro de diálogo dentro del navegador. A menos que el usuario no dé una respuesta clara para permitir o denegar
, esta solicitud de permiso solo aparecerá una vez para cada dominio. El navegador recordará la elección del usuario y, si se rechaza, no podrá repetirse.
La página puede utilizar la Notificación de objeto global para solicitar permisos de notificación al usuario. Este objeto tiene un
método requestPemission () , que devuelve una cita, que se resolverá después de que el usuario realice una operación en el cuadro de diálogo de autorización.
Notification.requestPermission ().
Then ((permiso) => {
console.log ('El usuario respondió a la solicitud de permiso:', permiso);
}); El
valor "concedido" significa que el usuario ha autorizado explícitamente el permiso para mostrar notificaciones. Los valores distintos a este significan que la notificación de visualización fallará silenciosamente
. Si el usuario rechaza la autorización, este valor se "niega". Una vez rechazada, no se puede restaurar mediante programación porque es imposible
activar la solicitud de autorización.
20.7.2 Mostrar y ocultar notificaciones El
constructor de notificaciones se utiliza para crear y mostrar notificaciones. La forma más sencilla de notificación es mostrar solo un título. El
contenido de este título se puede pasar al constructor de notificaciones como primer parámetro. Llamar a Notificación de la siguiente manera debería
mostrar la notificación inmediatamente:
nueva Notificación ('¡Texto del título!');
Puede personalizar la notificación a través del parámetro de opciones, incluida la configuración del cuerpo de la notificación, la imagen y la vibración, etc .:
nueva Notificación ('Título text! ', { body:' Body text! ', image:' path / to / image.png ', vibrate : true });
20.8 API de visibilidad de página
Un problema común en el desarrollo web es que los desarrolladores no saben cuándo los usuarios realmente usan la página. Si la página está minimizada u oculta
detrás de otras pestañas, es posible que no sean necesarias funciones como sondear el servidor o actualizar animaciones. La API de visibilidad de la página está diseñada para proporcionar a los
desarrolladores información sobre si una página es visible para los usuarios.
La API en sí es muy simple y consta de 3 partes.
document.visibilityState valor, que significa uno de los siguientes 4 estados.
La página se minimiza en la pestaña de fondo o en el navegador.
La página está en la pestaña de primer plano.
La página real está oculta, pero la vista previa de la página está visible (por ejemplo, en Windows 7, cuando el usuario mueve el mouse sobre el icono de la barra de tareas
, se mostrará la vista previa de la página).
La página se renderiza previamente fuera de la pantalla.
evento de cambio de visibilidad, que se activa cuando el documento cambia de oculto a visible (o viceversa).
document.hidden Valor booleano, que indica si la página está oculta. Esto puede significar que la página está minimizada en la pestaña de fondo o en el navegador
. Los navegadores seguirán admitiendo este valor para la compatibilidad con versiones anteriores, y document.visibilityState debe usarse primero para
verificar la visibilidad de la página.
Para recibir una notificación cuando la página cambie de visible a oculta o de oculta a visible, debe escuchar el evento de cambio de visibilidad.
El valor de document.visibilityState es una de las siguientes tres cadenas:
“hidden”
“visible”
“prerender”
20.9 API de Streams
La API Streams nació para resolver un problema simple pero básico: ¿cómo consumen las aplicaciones web
bloques pequeños y ordenados de información en lugar de grandes bloques de información? Hay dos escenarios de aplicación principales para esta capacidad.
Es posible que los grandes bloques de datos no estén disponibles todos a la vez. La respuesta a una solicitud de red es un ejemplo típico. La carga de la red se
entrega en forma de paquetes de información continua , y el procesamiento de transmisión permite que las aplicaciones utilicen los datos tan pronto como llegan sin tener que esperar a que se carguen todos
.
Es posible que sea necesario procesar grandes bloques de datos en pequeñas partes. El procesamiento de video, la compresión de datos, la codificación de imágenes y el análisis JSON son
ejemplos que se pueden procesar en partes pequeñas sin tener que esperar hasta que todos los datos estén en la memoria.
El Capítulo 24 presentará la aplicación de la API de Streams en fetch () cuando se analicen las solicitudes de red y los recursos remotos, pero la API de Streams en
sí es universal. La biblioteca de JavaScript que implementa la interfaz Observable comparte muchos conceptos básicos de flujos.
Tenga en cuenta que aunque la API de Fetch ha sido compatible con todos los navegadores principales, la API de Streams no ha sido compatible con tanta rapidez.
20.9.1 Comprensión del flujo Cuando se habla
de flujo, puede pensar en los datos como una especie de líquido transportado a través de una tubería. La transmisión en JavaScript toma prestado el concepto de canalizaciones
porque los principios son los mismos. Según la especificación, "estas API están diseñadas para mapear primitivas de E / S de bajo nivel, incluida
la normalización de flujos de bytes cuando sea apropiado ". El problema que la API Stream resuelve directamente es procesar solicitudes de red y leer y escribir discos.
Stream API define tres flujos.
Flujo legible: un flujo de bloques de datos que se puede leer a través de una interfaz pública. Los datos ingresan al flujo internamente desde la fuente subyacente y luego son
procesados por el consumidor .
Secuencia de escritura: una secuencia que puede escribir bloques de datos a través de una interfaz pública. El productor (productor) escribe datos en el flujo y los datos se transfieren internamente a la
ranura de datos subyacente (receptor).
Flujo de conversión: se compone de dos flujos, el flujo de escritura se usa para recibir datos (el lado de escritura) y el flujo de lectura se usa para generar datos (el lado de lectura).
Entre estos dos flujos hay un transformador, que puede verificar y modificar el contenido del flujo según sea necesario. La unidad básica de
fragmentos, colas internas y
flujo de contrapresión son los fragmentos. Los bloques pueden ser de cualquier tipo de datos, pero normalmente son matrices estereotipadas. Cada bloque es un segmento de flujo discreto y
se puede procesar como un todo. Más importante aún, los bloques no son de un tamaño fijo y no necesariamente llegan a un intervalo fijo. En una corriente ideal
, el tamaño del bloque suele ser aproximadamente el mismo y el intervalo de llegada también es aproximadamente el mismo. Sin embargo, una buena implementación de flujo requiere considerar las condiciones de contorno.
Los distintos tipos de caudales mencionados anteriormente tienen el concepto de entrada y salida. A veces, debido a las diferentes tasas de entrada y salida de datos, puede haber una
discrepancia. Por esta razón, el balance de flujo puede aparecer en las siguientes tres situaciones.
La velocidad de procesamiento de datos en la salida es más rápida que los datos proporcionados por la entrada. La salida de flujo suele estar inactiva (lo que puede significar que la entrada de flujo es menos eficiente
), pero solo se desperdiciará un poco de memoria o recursos informáticos, por lo que este tipo de desequilibrio de flujo es aceptable.
La entrada y la salida están equilibradas. Este es el estado ideal.
La velocidad de proporcionar datos en la entrada es más rápida que la velocidad a la que la salida procesa los datos. Este desequilibrio de flujo es un problema inherente. Debe haber
una acumulación de datos en algún lugar y la transmisión debe tratarse en consecuencia.
El desequilibrio de flujo es un problema común, pero el flujo también proporciona herramientas para resolver este problema. Todas las transmisiones
proporcionan una cola interna para los bloques que ingresaron a la transmisión pero que aún no la abandonaron . Para un flujo equilibrado, habrá cero o una pequeña cantidad de bloques en cola en esta cola interna, porque el bloque de salida de flujo se quita rápidamente
20.10 API de sincronización
El rendimiento de la página siempre es un tema de interés para los desarrolladores web. La interfaz de rendimiento expone las
métricas dentro del navegador a través de la API de JavaScript , lo que permite a los desarrolladores acceder directamente a esta información e implementar las funciones que desean en función de esta información. Esta interfaz se expone en el
objeto window.performance. Todos los indicadores relacionados con la página, incluidos los que se han definido y los que se definirán en el futuro, existirán en
este objeto.
La interfaz de rendimiento consta de varias API:
API de tiempo de alta resolución
API de línea de tiempo de rendimiento API de tiempo de
navegación
API de tiempo de usuario API de tiempo de
recursos
API de tiempo de pintura
20.12 API de criptografía web
La API de criptografía web describe un conjunto de herramientas criptográficas y regula cómo JavaScript implementa el
cifrado de manera segura y convencional . Estas herramientas incluyen generar, usar y aplicar pares de claves de cifrado, cifrar y descifrar mensajes y generar números aleatorios de manera confiable.
Tenga en cuenta que la organización de la interfaz de cifrado es un poco extraña, el exterior es un objeto Crypto y el interior es un
objeto SubtleCrypto . Antes de la estandarización de la API de criptografía web, la implementación de la propiedad window.crypto en diferentes navegadores era
muy diferente. Para lograr la compatibilidad entre navegadores, las API estándar se exponen en el objeto SubtleCrypto.
Gestión estatal histórica
El evento haschange
sabe cuándo cambia el parámetro de la URL.
history.pushState ()
API de administración de estado, cambia la URL del navegador sin cargar la página,
parámetros: objeto de estado, el título del nuevo estado, relativo a la URL, el
segundo parámetro se puede pasar en una cadena vacía
creará un nuevo historial El estado, que puede ser "al revés", activará el evento popstate.
El evento popstate
tiene un atributo de estado, que contiene el objeto de estado cuyo primer parámetro se pasó a pushState ().
Después de obtener el objeto de estado, debe restablecer la página al estado representado por los datos en el objeto de estado.
replaceState ()
con el nuevo estado actual no crea un nuevo estado en la pila de estado del historial, solo sobrescribe el estado actual.
history.replaceState({
name:"cc"},"")