![]() As a result, browsers will generally not attempt to cache pages in the middle of an IndexedDB transaction or using APIs that might affect other pages.įor more details on how various API usage affects a page's bfcache eligibility, see Optimize your pages for bfcache below. For example, if the browser pauses a task that's required as part of an IndexedDB transaction, it can affect other open tabs in the same origin (since the same IndexedDB databases can be accessed by multiple tabs simultaneously). In some cases this is fairly low-risk (for example, timeouts or promises), but in other cases it might lead to very confusing or unexpected behavior. The answer is that browsers pause running any pending timers or unresolved promises-essentially all pending tasks in the JavaScript task queues-and resume processing tasks when (or if) the page is restored from the bfcache. For example, how do you handle setTimeout() calls where the timeout is reached while the page is in the bfcache? Since it's quite rare that all requests required to load a page can be fulfilled from the HTTP cache, repeat visits using bfcache restores are always faster than even the most well-optimized non-bfcache navigations.Ĭreating a snapshot of a page in memory, however, involves some complexity in terms of how best to preserve in-progress code. ![]() The bfcache is a snapshot of the entire page in memory (including the JavaScript heap), whereas the HTTP cache contains only the responses for previously made requests. The "cache" used by bfcache is different from the HTTP cache (which is also useful in speeding up repeat navigations). With bfcache enabled, browsers could eliminate the data transfer and time spent loading for billions of web pages every single day! How the "cache" works # In the video above, the example with bfcache is quite a bit faster than the example without it.īfcache not only speeds up navigation, it also reduces data usage, since resources do not have to be downloaded again.Ĭhrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward. How many times have you visited a website and clicked a link to go to another page, only to realize it's not what you wanted and click the back button? In that moment, bfcache can make a big difference in how fast the previous page loads: With the entire page in memory, the browser can quickly and easily restore it if the user decides to return. bfcache basics #īfcache is an in-memory cache that stores a complete snapshot of a page (including the JavaScript heap) as the user is navigating away. Since version 96, bfcache is enabled for all Chrome users across desktop and mobile. In subsequent releases, additional support slowly rolled out. Starting in version 86, Chrome enabled bfcache for cross-site navigations on Android for a small percentage of users. Browser compatibility #īfcache has been supported in both Firefox and Safari for many years, across desktop and mobile. It significantly improves the browsing experience for users-especially those with slower networks or devices.Īs web developers, it's critical to understand how to optimize your pages for bfcache across all browsers, so your users can reap the benefits. How bfcache affects analytics and performance measurementīack/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation.Test to ensure your pages are cacheable.Always close open connections before the user navigates away. ![]() Update stale or sensitive data after bfcache restore.Minimize use of Cache-Control: no-store. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |