Building Polyfills

Chapter 5. Building Your First Polyfill, Part 3: Performance and Edge-Case Testing

Over the last two chapters, we’ve built a pretty nice cross-browser polyfill from the ground up, and we’ve even added a complete testing setup to ensure that your library always works as expected. So while Chapters 3 and 4 were about making sure that your polyfill works, this chapter is about making sure that it works well. In particular, we’re going to discuss optimizing your polyfill for performance, as well as how to handle quirky, browser-specific edge cases that can reveal themselves from time to time.

Building for Performance

In Chapter 2, I introduced several principles of responsible polyfill development. One of these was “Build with performance in mind.” The spirit of this principle is to encourage polyfill developers to go beyond only delivering a functional equivalent to a native browser feature via their library, but to ensure that this equivalent is also as fast as it can possibly be.

This is a high bar, for sure. Your polyfill’s performance baseline is the native rendering capabilities of the browser. Chances are, your library won’t be able to match the speed of a native feature, and attempting to do so should not be your focus. Instead, you should instead strive to pass the frontend developers’ noticeability test. It’s a simple test. If, after including your library in a developer’s application, that app runs noticeably slower, you can expect that your polyfill will be dropped on the floor, ...