Update escaping of attribute and text HTML characters in SSR

[villelaitila]

I noticed when profiling parts of ReactDOM, I noticed that the escaping of HTML characters in SSR was particularly slow. Looking into it more, I changed the implementation to a much faster one that uses String.prototype.indexOf rather than RegEx (indexOf was faster in Chrome/Firefox and Safari) and also opted to use a similar implementation to other libraries when it comes to the escaping of characters. I then noticed something interesting: we are escaping characters that no longer need to be escaped.

For DOM node attributes, we don't need to escape single quotes or left/right angle brackets. You can try this out yourself in all the different browsers (I never tested IE8). For text nodes, you don't need to escape single or double quotes, again this can be validated in all browsers using the DOM API. You can see for yourself below:

var x = document.createElement('div');
x.textContent = `'"><&`;
console.log(x.outerHTML);

var y = document.createElement('div');
y.setAttribute("foo", `'"><&`);
console.log(y.outerHTML);

Not only does this improve SSR render performance it also improves hydration when checking if the text nodes have changed, as before we'd mismatch in far more cases where there was a difference in the diffing due to escaped characters of a text node value not matching that of what React derives.

The difference in SSR rendering before (this is using the hacker-news benchmark in scripts):

// Before:
hacker-news 17.2ms
// After:
hacker-news 14.4ms

Using the color-picker benchmark from Marko:

// Before:
react x 6,857 ops/sec ±0.73% (94 runs sampled)
// After:
react x 7,485 ops/sec ±0.44% (93 runs sampled)

[softagram-bot]

Softagram Impact Report for pull/4 (head commit: 23d8c7b)

⭐ Visual Overview

Changed elements and changed dependencies.


(Open in Softagram Desktop for full details)

⭐ Change Impact

How the changed files are used by the rest of the project


(Open in Softagram Desktop for full details)

📄 Full report

• Permalink: Full report for pull/4

Give feedback of this report to [email protected]