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.
In this section
| Topic | Description |
|---|---|
The F12 tools is a suite of on-demand tools that is built into every installation starting with Windows Internet Explorer 9. F12 tools is available anytime, on any page, and enables website developers to quickly debug JavaScript, HTML, and Cascading Style Sheets (CSS), as well track down performance problems on a webpage or network. |
Introduction
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.
Debugging code is a regular activity for all developers. As webpages use multiple scripts and libraries and get more complex, the task of finding bugs and improving performance also gets more complex. F12 tools lets you fix bugs as you view and trace through your HTML, CSS, and JavaScript code, from within your browser.
Improve the performance of your page
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. |
Debugging with F12 tools
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 F12 Developer Tools to Debug JavaScript Errors | F12 tools provides debugging tools such as breakpoints, watch and local variable viewing, and a console for messages and immediate code 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. |
Demos and articles
Here are some additional demos and articles to help you really get going with better page performance and debugging.
| Introduction to HTML5 Web Workers: The JavaScript Multi-threading Approach | Dig into Web Workers with lots of code examples and technical discussions. |
| Web Worker Harness for test262 Demo | This demo kicks off a set of JavaScript functional tests. They are run both on the UI thread and in the background via Web Workers to showcase the relative performance of each approach. |
| 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. |
| Debugging Web Workers in IE10 | See how to use F12 tools in Internet Explorer 10 to have a complete and predictable debugging experience for JavaScript, which executes within both the webpage and in Web workers. |
| New Web Performance APIs | Make the most of the underlying hardware and use battery power more efficiently with requestAnimationFrame, Page visibility, and setImmediate. |
| Debug your site faster with ECMAScript Script Mode | Enabling ECMAScript Strict Mode can help to enforce JavaScript development best practices in your code and simplify debugging. |