Write and debug your code for performance
Internet Explorer 10 provides a rich set of APIs for increasing the performance of your webpage, and F12 developer tools gives you a powerful built-in debugging environment.
Oftentimes, the quality of a webpage is dictated by its ability to perform in the way it was designed to. HTML5 and Windows Internet Explorer offer features that can get your pages running at their best. For a user, performance is judged by the UI . New features such as Web Workers, requestAnimationFrame, Page visibility, and setImmediate can help improve onscreen performance by offering the developer greater control over where and when code executes.
The following articles can help you get started using the new performance APIs and features. These articles help you learn to use Web workers to execute lengthy tasks in the background, execute scripts asynchronously to unblock frozen UI, and cache resources locally.
|Timing and Performance APIs||Internet Explorer 10 and Windows Store apps support multiple APIs that enable more efficient use of computer hardware , improving both performance and power management of websites. These include Navigation Timing, Resource Timing, Page Visibility, Animation Timing, and Efficient Script Yielding.|
|Web Workers||The Web Worker API provides a way for web application authors to spawn background scripts that run in parallel with the main page.|
|Asynchronous script execution||The async attribute for the script element enables the associated script to load and execute asynchronously with respect to the rest of the page.|
|Application Cache API ("AppCache")||AppCache saves resources locally. This can improve the performance of a webpage by reducing the number of requests made to the hosting server, as well as enabling offline access to cached resources.|
After you've built your webpages, use F12 tools to find and fix bugs, bottlenecks, and clean up your UI. The tools offer the breakpoints, watch variables, and code stepping that you're used to in a modern IDE. The ruler and color picker tools can help you design more interesting UI. By using the Profiler and Network capture features, you can find bottlenecks in your code and network and get the best performance for your users.
|Navigating the F12 Developer Tools Interface||This is a quick reference to the tools, commands, and menus available in F12 tools, built into Internet Explorer 10.|
|Introduction to F12 Developer Tools||This article gets you started by introducing you to the most common features of F12 tools.|
|Using the F12 Tools Console to View Errors and Status||The F12 tools console commands let you receive error messages from Internet Explorer 9, as well as send your own messages back from your code without having to break the flow of your execution.|
|Using the Profiler Tool to Analyze the Performance of your Code||This topic explains the features of the Profiler Tool and shows you how to use it to check the performance of your scripts.|
|Using Internet Explorer Developer Tools Network Capture||The Network tab in the Internet Explorer 9 Developer Tools can help you diagnose network-related issues by showing all the traffic that is related to a page and exposing details about individual connections.|
Here are some additional demos and articles to help you really get going with better page performance and debugging.
|Building Offline Experiences with HTML5 AppCache and IndexedDB||Learn how to create well-behaved offline sites and apps using AppCache to store file resources locally, IndexedDB to store structured data locally, Document Object Model (DOM) Storage to store small amounts of text information locally, and Offline events to detect if you’re connected to the network.|
|New Web Performance APIs||Make the most of the underlying hardware and use battery power more efficiently with requestAnimationFrame, Page visibility, and setImmediate.|