Performance of a method to mask all but one rectangular element on the page
It is not entirely clear to me what the goal of that mask exactly is, but I guess you want to bring focus to your content div while editing it (correct me if I'm wrong, perhaps a simple demo would be nice to see what you want to achieve exactly)

If my assumption is correct, I would keep thing a lot simpler, and let css take care of things. This is by far the most performant solution I believe, since browser are obviously quite well optimized for applying css.

You could just apply a ridiculously large box shadow to your focus div, which will obscure the rest of the content, while keeping it's background in tact. No need to alter your DOM and check for resizes or anything. The css would look something like this:

div[contenteditable] {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.8);
}


I've set up a very simple demo to demonstrate (hit the edit button to see the effect, and edit the content to see how it reacts on resize)



$('button').click(function() {
 $('div').first().attr('contenteditable', true);
});
body {
  background: red;
}

div[contenteditable] {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.8);
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;h1&gt;Test CMS&lt;/h1&gt;
&lt;div&gt;
  Lorem ipsum
&lt;/div&gt;
&lt;div&gt;
  Lorem ipsum
&lt;/div&gt;
&lt;button&gt;edit&lt;/button&gt;