Query objects give developers another, more explicit way to peek at the inner workings of the GPU. A query wraps a set of GL commands for the GPU to asynchronously report some sort of statistic about. For example, occlusion queries are done in the following way: performing a gl.ANY_SAMPLES_PASSED query around a set of draw calls will let you detect if any of the geometry passed the depth test. If not, you know that the object wasn't visible and may choose not to draw that geometry in future frames until something happens (object moved, camera moved, and so on) that indicates that the geometry might have become visible again.

It should be noted that these queries are asynchronous, which means that a queries' results may not be ready for many frames after the query was originally issued! This makes them tricky to use, but it can be worth it in the right circumstances.

Here's an example:

gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);
gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, 2);
gl.endQuery(gl.ANY_SAMPLES_PASSED);

//...

(function tick() {
  if (!gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE)) {
    // A query's result is never available in the same frame
    // the query was issued.  Try in the next frame.
    requestAnimationFrame(tick);
    return;
  }

  var samplesPassed = gl.getQueryParameter(query, gl.QUERY_RESULT);
  gl.deleteQuery(query);
})();