Skip to main content

Performance Optimization

OpenKeyNav discovers targets when a mode begins. Measure mode-entry latency on representative pages and application states, especially when the visible document contains many candidate elements.

Initialize once​

Keep one OpenKeyNav instance at the persistent document or application root:

import OpenKeyNav from 'openkeynav';

const openKeyNav = new OpenKeyNav();
openKeyNav.init();

One persistent instance handles client-side route changes and dynamic rendering. On the next mode entry, it discovers newly rendered elements that match that mode's detection rules.

Choose a loading strategy​

Bundle OpenKeyNav with the application or load the browser build near the end of the document. If the library is loaded asynchronously, initialize it from the script's load handler:

<script
  src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"
  async
  onload="new OpenKeyNav().init()">
</script>

Communicate when the command layer is ready if users can interact with the page before initialization finishes.

Profile mode entry​

Use browser performance tools to measure:

  • Click Mode target discovery;
  • label creation and positioning;
  • pages with many visible controls;
  • dynamic states with large DOM updates;
  • scrollable and overflow-clipped layouts; and
  • repeated mode entry and cleanup.

Measure supported production browsers and representative devices. Include the host application's event handlers, rendering work, and animations in the same profile.

Verify after optimization​

Repeat target-discovery, activation-outcome, focus, shortcut, and complete-workflow tests after each optimization because performance changes can alter target visibility, timing, or application state.