Escribir y depurar tu código para rendimiento

Internet Explorer 10 incluye una amplia variedad de API para aumentar el rendimiento de tu página web, además de herramientas de desarrollo F12 que te proporcionan un poderoso entorno de depuración integrado.

En esta sección

TemaDescripción

Usar las herramientas de desarrollo F12 para depurar las páginas web

Las herramientas F12 son un conjunto de herramientas a petición que están integradas en cada instalación que comienza con Windows Internet Explorer 9. Las herramientas F12 están disponibles en cualquier momento y en cualquier página, y permiten a los desarrolladores de sitios web depurar rápidamente JavaScript, HTML y hojas de estilo en cascada (CSS), así como realizar el seguimiento de problemas de rendimiento en una página web o una red.

 

Introducción

En ocasiones, la calidad de una página web está determinada por su capacidad para actuar de la manera para la que fue diseñada.  HTML5 y Windows Internet Explorer ofrecen características que pueden hacer que tus páginas funcionen de la mejor manera. Para un usuario, la interfaz de usuario es la que juzga el rendimiento. Las nuevas características, como Web Workers, requestAnimationFrame, visibilidad de página y setImmediate, pueden ayudar a mejorar el rendimiento en pantalla ofreciendo al desarrollador mejor control sobre el lugar y el momento en que se ejecuta el código.

La depuración de código es una actividad regular para todos los desarrolladores. A medida que las páginas web usan múltiples scripts y bibliotecas, y van poniéndose más complejas, la tarea de encontrar errores y mejorar el rendimiento también se torna más complicada. Las herramientas F12 te permiten solucionar errores a medida que los ves y realizas un seguimiento a través de tu código HTML, CSS y JavaScript, desde dentro de tu explorador.

Mejorar el rendimiento de tu página

Los siguientes artículos pueden ayudarte a comenzar a usar las nuevas características y API de rendimiento. Estos artículos te ayudan a aprender a usar Web Workers para ejecutar tareas largas en segundo plano, ejecutar scripts de manera asincrónica para desbloquear localmente recursos de caché e interfaz de usuario inmovilizados.

API de tiempo y rendimiento Internet Explorer 10 y las aplicaciones de la Tienda Windows admiten varias API que posibilitan un uso más eficiente del hardware del equipo, lo que optimiza tanto el rendimiento como la administración de energía de los sitios web. Entre ellas se incluyen Tiempo de navegación, Tiempo de recursos, Visibilidad de la página, Tiempo de animación y Rendimiento eficiente de scripts.
Web Workers La API para Web Workers ofrece a los creadores de aplicaciones web una manera de generar scripts en segundo plano que se ejecuten en paralelo con la página principal.
Ejecución de script asincrónico El atributo async del elemento script activa el script asociado para que se cargue y se ejecute de manera asincrónica con respecto al resto de la página.
API de la caché de la aplicación ("AppCache") AppCache ahorra recursos localmente. Esto puede mejorar el rendimiento de una página web, ya que reduce el número de solicitudes realizadas al servidor host; además, se permite el acceso sin conexión a recursos copiados en caché.

 

Depurar con herramientas F12

Después de que hayas compilado tus páginas web, usa las herramientas F12 para encontrar y solucionar errores, cuellos de botella y ordenar tu interfaz de usuario. Las herramientas ofrecen los puntos de interrupción, las variables de inspección y la ejecución paso a paso de código a los que estás acostumbrado en una IDE moderna. Las herramientas de selector de colores y regla te ayudan a diseñar una interfaz de usuario más interesante. Mediante el uso de las características de captura  Generador de perfiles y Red, puedes encontrar cuellos de botella en tu código y red, y obtener el mejor rendimiento para tus usuarios.

Navegación por la interfaz de las herramientas de desarrollo F12 Esta es una referencia rápida a las herramientas, comandos y menús disponibles en las herramientas F12, integradas en Internet Explorer 10.
Introducción a las herramientas de desarrollo F12 En este artículo se proporciona introducción a las características más comunes de las herramientas F12.
Uso de la consola de herramientas F12 para ver errores y estado Los comandos de la consola de herramientas F12 permiten recibir mensajes de error de Internet Explorer 9 y devolver tus propios mensajes de tu código sin tener que interrumpir el flujo de la ejecución.
Uso de las herramientas de desarrollo F12 para depurar errores de JavaScript Las herramientas F12 proporcionan herramientas de depuración como puntos de interrupción, vista de variables locales e inspección, y una consola para ejecución de código inmediata y de mensajes.
Uso de la herramienta de generador de perfiles para analizar el rendimiento del código Este tema explica las características de la herramienta de generador de perfiles y cómo puedes usarla para comprobar el rendimiento de los scripts.
Uso de la captura de red de las Herramientas del desarrollador de Internet Explorer La pestaña Red en las Herramientas del desarrollador de Internet Explorer 9 puede ayudarte a diagnosticar problemas relacionados con la red mostrando todo el tráfico que se relaciona con una página y exponiendo detalles acerca de conexiones individuales.

 

Demos y artículos

A continuación encontrarás algunos artículos y demos adicionales que te ayudarán a progresar con la depuración y un mejor rendimiento de las páginas.

Introducción a Web Workers de HTML5: el enfoque de multithreading de JavaScriptConoce en profundidad Web Workers con muchas muestras de código y análisis técnicos.
Demostración de agente de Web Workers para test262En esta demostración se inicia un conjunto de pruebas funcionales de JavaScript. Se ejecutan en el subproceso de la interfaz de usuario y en segundo plano a través de Web Workers para presentar el rendimiento relativo de cada enfoque.
Generar experiencias sin conexión con AppCache e IndexedDB de HTML5Aprende cómo crear aplicaciones y sitios sin conexión con comportamiento correcto usando AppCache para almacenar recursos de archivo localmente, IndexedDB para almacenar datos estructurados localmente, almacenamiento de Document Object Model (DOM) para almacenar pequeñas cantidades de información de texto localmente y eventos sin conexión para detectar si estás conectado a la red.
Depuración de Web Workers en IE10Aprende a usar las herramientas F12 en Internet Explorer 10 para obtener una experiencia de depuración completa y predecible para JavaScript, que se ejecuta dentro de la página web y en Web Workers.
Nuevas API de rendimiento webSaca el mayor provecho del hardware subyacente y usa energía de batería de manera más eficiente con requestAnimationFrame, visibilidad de página y setImmediate.
Tarda menos en depurar tu sitio con el modo strict ECMAScriptSi habilitas el modo strict ECMAScript, podrás aplicar los procedimientos recomendados para el desarrollo de JavaScript en tu código y simplificar la depuración.

 

 

 

Mostrar:
© 2015 Microsoft