Escreva e depure seu código para melhorar o desempenho

O Internet Explorer 10 oferece um amplo conjunto de APIs para melhorar o desempenho da sua página da Web, e as ferramentas de desenvolvedor F12 proporcionam um poderoso ambiente interno de depuração.

Nesta seção

TópicoDescrição

Use as Ferramentas de Desenvolvedor F12 para depurar suas páginas da Web

As Ferramentas F12 formam um pacote de ferramentas sob demanda montado em todas as instalações a partir do Windows Internet Explorer 9. Elas estão disponíveis a qualquer momento, em qualquer página, e habilitam os desenvolvedores de sites a depurar rapidamente JavaScript, HTML e CSS (folhas de estilos em cascata), bem como a rastrear problemas de desempenho em páginas da Web ou na rede.

 

Introdução

Muitas vezes, a qualidade de uma página da Web é ditada por sua capacidade de funcionar conforme foi projetada.  O HTML5 e o Windows Internet Explorer oferecem recursos que você pode usar para deixar suas páginas tinindo. Para um usuário, o desempenho é avaliado pela interface. Novos recursos como Web Workers, requestAnimationFrame, Visibilidade de página e setImmediate podem ajudar a melhorar o desempenho na tela munindo o desenvolvedor de maior controle sobre onde e quando o código é executado.

A depuração de código é uma atividade regular para todos os desenvolvedores. À medida que as páginas da Web passam a usar vários scripts e bibliotecas e se tornam mais complexas, a tarefa de encontrar bugs e melhorar o desempenho também fica mais complexa. Com as Ferramentas F12, você pode consertar bugs enquanto visualiza e traça seu código HTML, CSS e JavaScript, dentro do navegador.

Melhore o desempenho da sua página

Os artigos a seguir podem ajudá-lo a começar a usar os novos recursos e APIs de desempenho. Eles mostram como usar Web Workers para executar tarefas demoradas em segundo plano, executar scripts assincronamente para desbloquear uma interface de usuário congelada e armazenar recursos em um cache local.

APIs de tempo e desempenho O Internet Explorer 10 e os aplicativos da Windows Store dão suporte para várias APIs que permitem um uso mais eficiente do hardware do computador, melhorando o desempenho e o gerenciamento de energia dos sites. Elas incluem Tempo de Navegação, Tempo de Recurso, Visibilidade da Página, Tempo de Animação e Produção de Script Eficiente.
Web Workers A API de Web Worker proporciona uma forma de os autores de aplicativos Web gerarem scripts de segundo plano que são executados em paralelo com a página principal.
Execução de script assíncrona O atributo async do elemento Script permite que o script associado seja carregado e executado de forma assíncrona em relação ao restante da página.
API do Cache do Aplicativo ("AppCache") O AppCache salva recursos localmente. Isso pode melhorar o desempenho de uma página da Web reduzindo o número de solicitações feitas ao servidor host e também habilitando o acesso offline aos recursos em cache.

 

Depuração com as Ferramentas F12

Após montar suas páginas da Web, use as Ferramentas F12 para localizar e consertar bugs e afunilamentos e para finalizar a limpeza da interface do usuário. As ferramentas oferecem os pontos de interrupção, as variáveis de inspeção e o passo a passo de código a que você está acostumado em um IDE moderno. As ferramentas de régua e seletor de cores podem ajudá-lo a criar uma interface mais interessante. Utilizando os recursos de captura Profiler e Rede, você pode encontrar afunilamentos no código e na rede e corrigi-los para conseguir o melhor desempenho para os usuários.

Navegando na interface das Ferramentas de Desenvolvedor F12 Temos aqui uma referência rápida das ferramentas, dos comandos e menus disponíveis nas Ferramentas F12 internas do Internet Explorer 10.
Introdução às Ferramentas de Desenvolvedor F12 Este artigo apresenta os recursos mais comuns das Ferramentas F12.
Usando o Console de Ferramentas F12 para exibir erros e status Através dos comandos do Console das Ferramentas F12, você pode receber mensagens de erro do Internet Explorer 9, além de enviar suas próprias mensagens de volta do seu código sem precisar interromper o fluxo da execução.
Usando as Ferramentas de Desenvolvedor F12 para depurar erros de JavaScript As Ferramentas F12 incluem ferramentas de depuração como pontos de interrupção, inspeção e exibição de variáveis locais, além de um console para mensagens e execução imediata do código.
Usando a ferramenta Profiler para analisar o desempenho do seu código Este tópico explica os recursos da ferramenta Profiler e mostra como usá-la para conferir o desempenho dos scripts.
Usando a captura de rede das Ferramentas de Desenvolvedor do Internet Explorer A guia Rede nas Ferramentas de Desenvolvedor do Internet Explorer 9 podem ajudar no diagnóstico de problemas da rede, mostrando todo o tráfego relacionado a uma página e expondo detalhes das conexões individuais.

 

Demonstrações e artigos

Veja aqui alguns artigos e demonstrações adicionais sobre depuração e melhoria do desempenho das páginas.

Introdução ao HTML5 Web Workers: a abordagem de multithreading do JavaScriptUm exame dos Web Workers com muitos exemplos de código e discussões técnicas.
Agente de Web Worker para demonstração test262Esta demonstração dá início a uma série de testes funcionais de JavaScript. Eles são executados tanto no thread da interface do usuário como em segundo plano via Web Workers para demonstrar o desempenho relativo de cada abordagem.
Criando experiências offline com HTML5 AppCache e IndexedDBSaiba como criar aplicativos e sites offline com comportamento apropriado usando o AppCache para armazenar recursos de arquivos localmente, o IndexedDB para armazenar dados estruturados localmente, o Armazenamento DOM (Document Object Model) para armazenar pequenas quantidades de informações de texto localmente e os Eventos offline para detectar se você está conectado à rede.
Depurando Web Workers in IE10Veja como usar as Ferramentas F12 no Internet Explorer 10 para ter uma experiência de depuração completa e previsível para JavaScript, que é executado na página da Web e nos Web Workers.
Novas APIs de desempenho na WebAproveite ao máximo o hardware subjacente e use a energia da bateria de forma mais eficiente com requestAnimationFrame, Visibilidade de página e setImmediate.
Depure seu site mais rapidamente com o modo de script ECMAScriptÉ possível ajudar a aplicar práticas recomendadas de desenvolvimento em JavaScript em seu código e a simplificar a depuração ativando o Modo Estrito de ECMAScript.

 

 

 

Mostrar:
© 2014 Microsoft