Understanding "texImage/texSubImage upload scan cause pipeline flushes."

I'm trying to understand what Mozilla mean by "Prefer doing uploads before starting drawing, or at least between pipelines" when talking about texImage/texSubImage uploads in WebGL.

As an example I'm currently doing the below (extracted statements) and am unsure about changing the order as I thought you needed to use the program before using the material:

//after sorting out this frame's updated entities and views
//the below draw functionality is called for each entity group.

//Set blend function for this entity
gl.blendFunc(...);

//Use the program
{
    gl.useProgram(_shaderProgram);

    //Loop through, and bind shader attributes
    gl.bindBuffer(GL.ARRAY_BUFFER, buffer);
    gl.vertexAttribPointer(attrKey, compCount, type, normalize, stride, offset);
    gl.enableVertexAttribArray(attrKey);

    //Bind triangle index buffer
    gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, entity.triBuffer);
}


//Use the 'Material'
{
    //Set frag's uniform vec4 color
    gl.uniform4fv(...);

    //Activate texture unit
    gl.activeTexture(gl.TEXTURE0);

    //Use assigned texture
    gl.bindTexture(gl.TEXTURE_2D, textureObject);

    //Send the 4096*2048 video's frame to the GPU.
    //(Also need a faster solution as I'll need to run 2x synchronized 8K videos at some point :*-o)
    //(As of chrome V93 texSubImage2D is 900% slower...)
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, 
        width, height, 0, 
        internalFormat, srcFormat, 
        DOMVideoNode
    );
}


//Set the projection matrix
gl.uniformMatrix4fv(...);

//Set the Model View Matrix
gl.uniformMatrix4fv(...);

//Draw them tris
gl.drawElements(GL.TRIANGLES, entity.tris.length, GL.UNSIGNED_SHORT, 0);

Mozilla Statement Source