Understanding the difference between clearing a renderer's framebuffer before and after rendering is crucial in grasping how WebGL content is displayed on a web page. In the realm of WebGL, there is always buffering happening - typically at least double buffering (and in some cases like Firefox, even triple-buffering). This means that during a requestAnimationFrame callback (such as your render function), all WebGL operations only affect a back buffer while leaving the front buffer untouched. Once the callback ends, the browser switches these buffers: the back becomes the front, and vice versa. The refreshed front buffer is then used by the browser to render the webpage, while the new back buffer awaits the next cycle of rAF. It's important to note that the browser usually doesn't alter the buffer contents upon swapping unless instructed to do so with the preserveDrawingBuffer context option.
In relation to your query, if you first render a scene and then clear the buffer, you'll initially see remnants of the previous frame stored in the buffer's memory before erasing them. Consequently, this process may yield unexpected outcomes since you're essentially wiping out what was just rendered. On the other hand, starting with a cleared buffer before rendering ensures accurate results - eliminating any artifacts from prior frames and replacing them with fresh content. The browser then presents this updated buffer on the webpage for viewing.
To summarize: it's common practice to clear the framebuffer initially to avoid any carryover from earlier frames, establishing a pristine canvas for subsequent rendering tasks.