<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
<link type="image/ico" rel="icon" href="http://www.google.com/images/icons/product/chrome-32.png">
<link href="../../../../static/css/out/site.css" rel="stylesheet" type="text/css">
<link href="../../../../static/css/print.css" rel="stylesheet" type="text/css" media="print">
<link href="../../../../static/css/prettify.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41980257-1');
ga('send', 'pageview');
</script>
<title>Example 5 - Google Chrome</title>
</head>
<body>
<div id="gc-container">
<a href="example5.html#gc-pagecontent" class="element-invisible element-focusable">Skip to main content</a>
<header id="topnav" role="banner">
<div id="logo">
<a href="../../../../index.html">
<img alt="Chrome: developer" src="../../../../static/images/chrome-logo_2x.png">
</a>
<span class="collase-icon"><!-- <img src="/static/images/burger-icon.png" class="collase-icon">--></span>
</div>
<nav id="fatnav" role="navigation">
<ul>
<li class="pillar">
<span class="toplevel">Devtools</span>
<ul class="expandee">
<li class="submenu">Learn Basics
<ul>
<li class="category">
<a href="../../../index.html">
Overview
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../authoring-development-workflow.html">
Authoring & Development Workflow
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../console.md">
Using the Console
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../tips-and-tricks.html">
Tips & Tricks
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../videos.html">
Additional Resources
</a>
<ul>
<li><a href="../../videos.html">Videos</a>
</li>
<li><a href="../../blog-posts">Blog Posts</a>
</li>
<li><a href="https://groups.google.com/forum/?fromgroups#!forum/google-chrome-developer-tools">Mailing List</a>
</li>
<li><a href="../../contributing.html">Contributing to DevTools</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">Use Tools
<ul>
<li class="category">
<a href="../../dom-and-styles.html">
Inspecting & Tweaking
</a>
<ul>
<li><a href="../../elements">Editing Styles & DOM</a>
</li>
<li><a href="../../css-preprocessors.html">Working with CSS Preprocessors</a>
</li>
<li><a href="../../resource-panel.md">Managing Application Storage</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../javascript-debugging.html">
Debugging JavaScript
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../mobile-emulation.html">
Mobile Emulation
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../protocol/tot/remote-debugging.html">
Remote Debugging on Android
</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="submenu">Performance & Profiling
<ul>
<li class="category">
<a href="../../network.md">
Evaluating Network Performance
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../timeline.html">
Using the Timeline
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../too-much-layout/index">
Timeline Demo: Finding Forced Synchronous Layouts
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../cpu-profiling.html">
Profiling JavaScript Performance
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../javascript-memory-profiling.md">
JavaScript Memory Profiling
</a>
<ul>
<li><a href="../../javascript-memory-profiling.md">JavaScript Memory Profiling</a>
</li>
<li><a href="../../heap-profiling-summary.html">Demos</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../clean-testing-environment.html">
Setting Up a Clean Testing Environment
</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="submenu">Reference
<ul>
<li class="category">
<a href="../../console-api.md">
Console API Reference
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../commandline-api.md">
Command Line API Reference
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../integrating.md">
DevTools Extensions API
</a>
<ul>
<li><a href="../../integrating.md">Integrating with DevTools</a>
</li>
<li><a href="../../sample-extensions.md">Sample DevTools Extensions</a>
</li>
<li><a href="../../debugging-clients.md">Sample DevTools Protocol Clients</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../shortcuts.html">
Keyboard Shortcuts
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../settings.html">
Settings
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../debugger-protocol.html">
Remote Debugging Protocol
</a>
<ul>
<li><a href="../../debugger-protocol.html">Remote Debugging Protocol</a>
</li>
<li><a href="../../protocol/1.1/index.html">Version 1.1</a>
</li>
<li><a href="../../protocol/1.0/index.html">Version 1.0</a>
</li>
<li><a href="../../protocol/0.1/index.html">Version .1</a>
</li>
<li><a href="../../protocol/tot/index.html">Tip-of-tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pillar">
<span class="toplevel">Multi-device</span>
<ul class="expandee">
<li class="submenu">Getting Started
<ul>
<li class="category">
<a href="../../../../multidevice/index.html">
Chrome for a Multi-Device World
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/data-compression">
Data Compression Proxy
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/user-agent.html">
User Agents
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../mobile-emulation.html">
Mobile Emulation
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../protocol/tot/remote-debugging.html">
Remote Debugging
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/faq.html">
FAQ
</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="submenu">Chrome for Android
<ul>
<li class="category">
<a href="../../../../multidevice/android/overview.html">
Overview
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/android/intents.html">
Android Intents with Chrome
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/android/installtohomescreen.html">
Add to Homescreen
</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="submenu">Chrome WebView
<ul>
<li class="category">
<a href="../../../../multidevice/webview/overview.html">
WebView for Android
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/webview/gettingstarted.html">
Getting Started
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/webview/pixelperfect">
Pixel-Perfect UI
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/webview/workflow.html">
WebView Workflow
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/webview/tipsandtricks">
Tips & Tricks
</a>
<ul>
</ul>
</li>
</ul>
</li>
<li class="submenu">Chrome for iOS
<ul>
<li class="category">
<a href="../../../../multidevice/ios/overview.html">
Overview
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/ios/links.html">
Opening Links in Chrome
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../multidevice/ios/case-studies">
Case Studies
</a>
<ul>
<li><a href="../../../../multidevice/ios/case-studies">Case Studies</a>
</li>
<li><a href="../../../../multidevice/ios/pocket.html">Pocket</a>
</li>
<li><a href="../../../../multidevice/ios/feedly.html">Feedly</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pillar">
<span class="toplevel">Platform</span>
<ul class="expandee">
<li class="submenu">Apps
<ul>
<li class="category">
<a href="../../../../apps/index.html">
Learn Basics
</a>
<ul>
<li><a href="../../../../apps/index.html">What Are Chrome Apps?</a>
</li>
<li><a href="../../../../apps/first_app.html">Create Your First App</a>
</li>
<li><a href="../../../../apps/app_architecture.html">App Architecture</a>
</li>
<li><a href="../../../../extensions/app_lifecycle.html">App Lifecycle</a>
</li>
<li><a href="../../../../apps/contentSecurityPolicy.html">Content Security Policy</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/app_codelab1_setup.html">
Learn with Codelab
</a>
<ul>
<li><a href="../../../../apps/app_codelab1_setup.html">1 - Set Up Development Environment</a>
</li>
<li><a href="../../../../apps/app_codelab2_basic.html">2 - Create Basic App</a>
</li>
<li><a href="../../../../apps/app_codelab3_mvc.html">3 - Create MVC</a>
</li>
<li><a href="../../../../apps/app_codelab5_data.html">4 - Save & Fetch Data</a>
</li>
<li><a href="../../../../apps/app_codelab6_lifecycle.html">5 - Manage App Lifecycle</a>
</li>
<li><a href="../../../../apps/app_codelab7_useridentification.html">6 - Access User's Data</a>
</li>
<li><a href="../../../../apps/app_codelab8_webresources.html">7 - Access Web Resources</a>
</li>
<li><a href="../../../../apps/app_codelab_10_publishing.html">8 - Publish App</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/samples.html">
Samples
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../apps/offline_apps.html">
Develop in the Cloud
</a>
<ul>
<li><a href="../../../../apps/offline_apps.html">Offline First</a>
</li>
<li><a href="../../../../extensions/app_external.html">Handling External Content</a>
</li>
<li><a href="../../../../apps/app_storage.html">Storing Data</a>
</li>
<li><a href="../../../../apps/cloudMessaging.html">Cloud Messaging</a>
</li>
<li><a href="../../../../apps/app_identity.html">User Authentication</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/app_usb.html">
User Low-Level System Services
</a>
<ul>
<li><a href="../../../../apps/app_usb.html">USB</a>
</li>
<li><a href="../../../../apps/app_serial">Serial</a>
</li>
<li><a href="../../../../apps/app_network.html">Network Communications</a>
</li>
<li><a href="../../../../apps/app_bluetooth.html">Bluetooth</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/app_frameworks.html">
MVC Architecture & Frameworks
</a>
<ul>
<li><a href="../../../../apps/app_frameworks.html">About MVC Architecture</a>
</li>
<li><a href="../../../../apps/angular_framework.html">Build Apps with AngularJS</a>
</li>
<li><a href="../../../../apps/sencha_framework.html">Build Apps with SenchaJS</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../extensions/publish_app.html">
Distribute Apps
</a>
<ul>
<li><a href="../../../../extensions/publish_app.html">Publish Your App</a>
</li>
<li><a href="../../../../apps/google_wallet.html">Monetize Your App</a>
</li>
<li><a href="../../../../webstore/one_time_payments">One-Time Payments</a>
</li>
<li><a href="../../../../apps/analytics.html">Analytics</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/api_index.html">
Chrome Platform APIs
</a>
<ul>
<li><a href="../../../../apps/api_index.html">JavaScript APIs</a>
</li>
<li><a href="../../../../apps/manifest.html">Manifest File Format</a>
</li>
<li><a href="../../../../apps/webview.html">Webview Tag</a>
</li>
<li><a href="../../../../apps/api_other.html">Web APIs</a>
</li>
<li><a href="../../../../apps/app_deprecated.html">Disabled Web Features</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/faq">
Help
</a>
<ul>
<li><a href="../../../../apps/faq">FAQ</a>
</li>
<li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-apps">Google Groups</a>
</li>
<li><a href="http://stackoverflow.com/questions/tagged/google-chrome-app">Stack Overflow</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">Extensions
<ul>
<li class="category">
<a href="../../../../apps/overview.html">
Learn Basics
</a>
<ul>
<li><a href="../../../../apps/overview.html">Overview</a>
</li>
<li><a href="../../../../extensions/hosting_changes">Hosting Changes</a>
</li>
<li><a href="../../../../extensions/event_pages.html">Event Pages</a>
</li>
<li><a href="../../../../extensions/content_scripts.html">Content Scripts</a>
</li>
<li><a href="../../../../apps/activeTab.html">activeTab Permission</a>
</li>
<li><a href="../../../../extensions/whats_new.html">What's New?</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../apps/getstarted.html">
Getting Started Tutorial
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../extensions/samples.html">
Samples
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../extensions/tut_migration_to_manifest_v2">
Develop Extensions
</a>
<ul>
<li><a href="../../../../extensions/a11y.html">Accessibility</a>
</li>
<li><a href="../../../../extensions/contentSecurityPolicy.html">Content Security Policy</a>
</li>
<li><a href="../../../../extensions/xhr.html">Cross-Origin XHR</a>
</li>
<li><a href="../../../../extensions/tut_debugging">Debugging</a>
</li>
<li><a href="../../../../extensions/i18n.html">Internationalization</a>
</li>
<li><a href="../../../../extensions/messaging">Message Passing</a>
</li>
<li><a href="../../../../extensions/tut_migration_to_manifest_v2">Migrate to Manifest 2</a>
</li>
<li><a href="../../../../extensions/tut_oauth">OAuth</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../extensions/hosting.html">
Distribute Extensions
</a>
<ul>
<li><a href="../../../../extensions/hosting.html">Hosting</a>
</li>
<li><a href="../../../../extensions/packaging.html">Packaging</a>
</li>
<li><a href="../../../../webstore/one_time_payments">One-Time Payments</a>
</li>
<li><a href="../../../../extensions/autoupdate.html">Autoupdating</a>
</li>
<li><a href="../../../../extensions/external_extensions.html">Other Deployment Options</a>
</li>
<li><a href="../../../../extensions/tut_analytics.html">Google Analytics</a>
</li>
<li><a href="../../../../extensions/themes.html">Publishing Themes</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../extensions/api_index.html">
Chrome Platform APIs
</a>
<ul>
<li><a href="../../../../extensions/api_index.html">JavaScript APIs</a>
</li>
<li><a href="../../../../extensions/manifest.html">Manifest File Format</a>
</li>
<li><a href="../../../../extensions/api_other.html">Web APIs</a>
</li>
<li><a href="../../../../extensions/permission_warnings.html">Permission Warnings</a>
</li>
<li><a href="../../../../extensions/permissions.html">Optional Permissions</a>
</li>
<li><a href="../../../../extensions/match_patterns.html">Match Patterns</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../extensions/faq">
Help
</a>
<ul>
<li><a href="../../../../extensions/faq">FAQ</a>
</li>
<li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions">Google Groups</a>
</li>
<li><a href="http://stackoverflow.com/tags/google-chrome-extension/info">Stack Overflow</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">Native Client
<ul>
<li class="category">
<a href="../../../../native-client/overview.html">
Learn Basics
</a>
<ul>
<li><a href="../../../../native-client/overview.html">What Is Native Client?</a>
</li>
<li><a href="../../../../native-client/nacl-and-pnacl.html">NaCl and PNaCl</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/sdk/download.html">
SDK
</a>
<ul>
<li><a href="../../../../native-client/sdk/download.html">Download SDK</a>
</li>
<li><a href="../../../../native-client/sdk/examples.html">Examples</a>
</li>
<li><a href="../../../../native-client/sdk/release-notes.html">SDK Release Notes</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/devguide/tutorial/tutorial-part1.html">
Tutorial
</a>
<ul>
<li><a href="../../../../native-client/devguide/tutorial/tutorial-part1.html">Part 1: Simple PNaCl Web App</a>
</li>
<li><a href="../../../../native-client/devguide/tutorial/tutorial-part2">Part 2: SDK Build System and Chrome Apps</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/devguide/devcycle/building.html">
Development Cycle
</a>
<ul>
<li><a href="../../../../native-client/devguide/devcycle/building.html">Building</a>
</li>
<li><a href="../../../../native-client/devguide/devcycle/running.html">Running</a>
</li>
<li><a href="../../../../native-client/devguide/devcycle/debugging.html">Debugging</a>
</li>
<li><a href="../../../../native-client/devguide/devcycle/vs-addin.html">Debugging with Visual Studio</a>
</li>
<li><a href="../../../../native-client/devguide/devcycle/dynamic-loading.html">Dynamic Linking and Loading with GlibC</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/devguide/coding/application-structure.html">
Coding Your Application
</a>
<ul>
<li><a href="../../../../native-client/devguide/coding/application-structure.html">Application Structure</a>
</li>
<li><a href="../../../../native-client/devguide/coding/native-client-modules.html">Native Client Modules</a>
</li>
<li><a href="../../../../native-client/devguide/coding/3D-graphics.html">3D Graphics</a>
</li>
<li><a href="../../../../native-client/devguide/coding/audio.html">Audio</a>
</li>
<li><a href="../../../../native-client/devguide/coding/file-io.html">File I/O</a>
</li>
<li><a href="../../../../native-client/devguide/devcycle/nacl_io">The nacl_io Library</a>
</li>
<li><a href="../../../../native-client/devguide/coding/message-system.html">Messaging System</a>
</li>
<li><a href="../../../../native-client/devguide/coding/progress-events.html">Progress Events</a>
</li>
<li><a href="../../../../native-client/devguide/coding/url-loading">URL Loading</a>
</li>
<li><a href="../../../../native-client/devguide/coding/view-focus-input-events">View Change, Focus, & Input Events</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/devguide/distributing.html">
Distribute Your Apps
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/pepper_stable/index.html">
Pepper API Reference
</a>
<ul>
<li><a href="../../../../native-client/pepper_stable/c/group___interfaces.html">Pepper C Interfaces</a>
</li>
<li><a href="../../../../native-client/pepper_stable/c/group___structs.html">Pepper C Structures</a>
</li>
<li><a href="../../../../native-client/pepper_stable/c/group___functions.html">Pepper C Functions</a>
</li>
<li><a href="../../../../native-client/pepper_stable/c/group___enums.html">Pepper C Enums</a>
</li>
<li><a href="../../../../native-client/pepper_stable/c/group___typedefs.html">Pepper C Typedefs</a>
</li>
<li><a href="http://developer.chrome.com/native-client/pepper_stable/c/global_defs">Pepper C Macros</a>
</li>
<li><a href="../../../../native-client/pepper_stable/cpp/inherits.html">Pepper C++ Classes</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/glossary.html">
Additional Reference & Versions
</a>
<ul>
<li><a href="../../../../native-client/glossary.html">Glossary</a>
</li>
<li><a href="../../../../native-client/reference/nacl-manifest-format.html">Native Client Manifest (nmf) Format</a>
</li>
<li><a href="../../../../native-client/reference/pnacl-bitcode-abi.html">PNaCl Bitcode Reference Manual</a>
</li>
<li><a href="../../../../native-client/reference/pnacl-c-cpp-language-support.html">PNaCl C/C++ Language Support</a>
</li>
<li><a href="../../../../native-client/reference/sandbox_internals/index">Sandbox Internals</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../native-client/faq.html">
Help
</a>
<ul>
<li><a href="../../../../native-client/faq.html">FAQ</a>
</li>
<li><a href="../../../../native-client/help.html">Forums & Issues Tracker</a>
</li>
<li><a href="../../../../native-client/publications-and-presentations">Publications & Presentations</a>
</li>
<li><a href="../../../../native-client/community/security-contest/index.html">Security Contest Archive</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">Store
<ul>
<li class="category">
<a href="../../../../webstore/index.html">
What Is the Chrome Web Store?
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/overview.html">
What Can You Publish?
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/get_started_simple.html">
Tutorial: Getting Started
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/samples.html">
Samples
</a>
<ul>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/branding.html">
Branding
</a>
<ul>
<li><a href="../../../../webstore/branding.html">Branding Guidelines</a>
</li>
<li><a href="../../../../webstore/images.html">Supplying Images</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/money.html">
Monetizing
</a>
<ul>
<li><a href="../../../../webstore/money.html">Monetizing Your App</a>
</li>
<li><a href="../../../../webstore/identify_user.html">Using Google Accounts</a>
</li>
<li><a href="../../../../webstore/check_for_payment.html">Checking for Payment</a>
</li>
<li><a href="../../../../webstore/one_time_payments">One-Time Payments</a>
</li>
<li><a href="../../../../webstore/pricing.html">Pricing</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/publish.html">
Publishing
</a>
<ul>
<li><a href="../../../../webstore/publish.html">Publishing Tutorial</a>
</li>
<li><a href="../../../../webstore/i18n.html">Internationalizing Your App</a>
</li>
<li><a href="../../../../webstore/inline_installation.html">Using Inline Installation</a>
</li>
<li><a href="../../../../webstore/rating.html">Rating Guidelines</a>
</li>
<li><a href="../../../../webstore/program_policies.html">Program Policies</a>
</li>
<li><a href="../../../../webstore/terms.html">Terms of Service</a>
</li>
</ul>
</li>
<li class="category">
<a href="../../../../webstore/best_practices.html">
Help
</a>
<ul>
<li><a href="../../../../webstore/best_practices.html">Best Practices</a>
</li>
<li><a href="../../../../webstore/faq.html">FAQ</a>
</li>
<li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-apps">Google Groups</a>
</li>
<li><a href="../../../../webstore/articles">Articles</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="search">
<img src="../../../../static/images/search.png">
<div class="expandee">
<!-- override search styles set globally by site.css -->
<style>
.gsc-above-wrapper-area, .gsc-result-info {
font-size: 11px;
}
.gs-webResult div, .gs-result div {
line-height: initial;
}
.gs-webResult a, .gs-result a {
text-decoration: none;
}
td.gcsc-branding-img-noclear, .gcsc-branding-img-noclear a {
width: 51px;
height: 15px;
vertical-align: top;
}
.gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top {
padding: 0;
}
.gsc-control-cse tr, .gsc-control-cse td, .gsc-control-cse th {
padding: inherit;
border: none;
}
.gsc-control-cse {
white-space: normal;
border: none;
padding: 0 1em;
}
#search .gsc-control-cse img {
height: inherit;
width: inherit;
}
.gsc-control-cse table {
margin: initial;
}
.gsc-control-cse * {
box-sizing: initial;
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
}
#fatnav .expandee .gsc-control-cse a {
padding: 0;
color: inherit;
}
</style>
<form id="chrome-docs-cse-search-form" action="http://google.com/cse">
<input type="search" id="chrome-docs-cse-input" name="q" placeholder="What are you looking for?">
<input type="hidden" name="cx" value="010997258251033819707:7owyldxmpkc" />
<input type="hidden" name="ie" value="UTF-8" />
</form>
<gcse:searchresults-only gname="results"></gcse:searchresults-only>
</div>
</li>
</ul>
</nav>
</header>
<main id="gc-pagecontent" role="main">
<article class="article-content">
<div itemprop="articleBody">
<!DOCTYPE html>
<h1>Example 5</h1>
<h1>Example 5: Memory and V8 hidden classes</h1>
<p>If the compiler can use hidden classes (<a href=
"https://developers.google.com/v8/design">https://developers.google.com/v8/design</a>),
your code will execute MUCH faster and will use MUCH LESS memory.</p>
<ol>
<li>Create some objects</li>
<li>Take heap snapshot</li>
<li>Compare memory usage</li>
</ol>
<p><button onclick="createObjects()">Create objects</button></p>
<p><button onclick="calculate()">Do some calculus</button></p>
<table>
<tr>
<th>With inner classes</th>
<th>With slow objects</th>
</tr>
<tr>
<td id="innerTime"></td>
<td id="slowTime"></td>
</tr>
</table>
<script>
'use strict';
var fastObjects = [],
slowObjects = [];
function calculateTotalFast(purchase) {
purchase.total = purchase.units * purchase.price;
}
function calculateTotalSlow(purchase) {
purchase.total = purchase.units * purchase.price;
}
function slowPurchase(units, price) {
var slowObject = new SlowPurchase(units, price);
delete slowObject.x;
return slowObject;
}
function SlowPurchase(units, price) {
this.units = units;
this.price = price;
this.total = 0;
this.x = 1;
}
function FastPurchase(units, price) {
this.units = units;
this.price = price;
this.total = 0;
this.x = 1;
}
function createObjects() {
var i;
for (i = 0; i < 300000; i++) {
fastObjects.push(new FastPurchase(i, 10));
slowObjects.push(slowPurchase(i, 10));
}
}
function calculate() {
var fastStart, slowStart, fastEnd, slowEnd;
fastStart = new Date();
fastObjects.forEach(calculateTotalFast);
fastEnd = new Date();
slowStart = new Date();
slowObjects.forEach(calculateTotalSlow);
slowEnd = new Date();
document.getElementById('innerTime').innerHTML = fastEnd - fastStart;
document.getElementById('slowTime').innerHTML = slowEnd - slowStart;
}
</script>
</script>
<hr>
<pre>
'use strict';
var fastObjects = [],
slowObjects = [];
function calculateTotalFast(purchase) {
purchase.total = purchase.units * purchase.price;
}
function calculateTotalSlow(purchase) {
purchase.total = purchase.units * purchase.price;
}
function slowPurchase(units, price) {
var slowObject = new SlowPurchase(units, price);
delete slowObject.x;
return slowObject;
}
function SlowPurchase(units, price) {
this.units = units;
this.price = price;
this.total = 0;
this.x = 1;
}
function FastPurchase(units, price) {
this.units = units;
this.price = price;
this.total = 0;
this.x = 1;
}
function createObjects() {
var i;
for (i = 0; i < 300000; i++) {
fastObjects.push(new FastPurchase(i, 10));
slowObjects.push(slowPurchase(i, 10));
}
}
function calculate() {
var fastStart, slowStart, fastEnd, slowEnd;
fastStart = new Date();
fastObjects.forEach(calculateTotalFast);
fastEnd = new Date();
slowStart = new Date();
slowObjects.forEach(calculateTotalSlow);
slowEnd = new Date();
document.getElementById("innerTime").innerHTML = fastEnd - fastStart;
document.getElementById("slowTime").innerHTML = slowEnd - slowStart;
}
</pre>
<footer id="cc-info">
<button id="send-feedback" class="google-button" data-feedback>Send Feedback</button>
<!--p class="last-updated">Last updated August 2, 2013.</p-->
<p class="cc-logo"><a href="http://creativecommons.org/licenses/by/3.0/"><img src="../../../../static/images/cc_by.png" alt="Licensed Creative Commons by Attribution"></a></p>
</footer>
<nav class="inline-toc no-permalink">
<section class="related">
<ol class="toc">
</ol>
</section>
<section id="toc">
<h3>Contents</h3>
<ol class="toc">
<li class="toplevel"><a data-list-item href="example5.html#"
>Example 5: Memory and V8 hidden classes</a>
</li>
</ol>
</section>
</nav>
</div>
</article>
</main>
<footer id="gc-footer" role="contentinfo" class="span-full">
<div class="g-section g-tpl-50-50">
<div class="g-unit g-first">
<nav class="links">
<a href="https://www.google.com/">Google</a><a href="https://developers.google.com/site-terms">Terms of Service</a><a href="http://www.google.com/intl/en/privacy/">Privacy Policy</a><a href="example5.html" data-feedback>Report a bug</a>
</nav>
</div>
<div class="g-unit g-last">
<div id="social-buttons">
<div data-size="small" data-href="http://www.google.com/chrome" data-annotation="bubble" class="g-plusone"></div>
<a rel="publisher" target="_blank" href="https://plus.google.com/+GoogleChromeDevelopers?prsrc=3" data-g-label="plus" data-g-event="nav-subfooter">Add us on <span class="element-invisible">Google+</span><img src="http://ssl.gstatic.com/images/icons/gplus-16.png" data-g-label="plus" data-g-event="nav-subfooter" alt=""></a>
</div>
</div>
</div>
</footer>
</div>
<script src="../../../../static/js/fatnav.js"></script>
<script src="../../../../static/js/article.js"></script>
<script src="../../../../static/js/prettify.js"></script>
<script src="../../../../static/js/search.js"></script>
<script src="http://www.gstatic.com/feedback/api.js"></script>
<script src="../../../../static/js/site.js"></script>
</body>
</html>