<div class="box">

<h3 class="box-title" id="/navigation-total-blocking-time/">

</h3>

<p>

This metric measures the amount of time the application may be blocked from processing code during the 2s window after a user navigates from page A to page B. The NTBT metric is the summation of the blocking time of all long tasks in the 2s window after this method is invoked.

<td class="code">

<pre>

<span class="gray">// Marking the start of the step</span>

<span class="red">const</span> <span class="blue">handleNavigation</span> <span class="red">= () =></span> {{'{'}}

<span class="gray">// Navigation logic</span>

<span class="gray">// Mark when navigating to screen B</span>

})

<span class="gray">// Marking the end of the step</span>

<span class="red">const</span> <span class="blue">{{'{'}} data }</span> <span class="red">=</span> <span class="violet">fetch</span><span>("http://example.com/data")</span>

<span class="violet">markStep</span><span>('loaded_screen_B')</span>

}

},[<span class="blue">data</span>])