This (background) Changer scans the HTML Plain Text Nodes of the entire page looking for the relevant String once all of the HTML elements for the current Passage have been generated, it also preforms that scan each time the HTML structure is interactively changed by macros like (append:), (replace:), etc...
This allows you to do things like the following.
Blah blah red Red blah blah plastered blah blah textured blah blah redish.
|more>[]
(enchant: " red ", (text-colour: "red"))
(link: "continue")[(append: ?more)["More blah blah red blah."]]
... the "red" in the text appended by the link is style after it is inserted into the current page, and the styling of the "red" text in the first sentence is re-applied at the same time. (this re-applying can be seen if you use your web-browser's built-in Web Developer tools to Inspect the HTML element structure during the selection of the link)
The main timing difference between using a CSS rule or a Changer to style content is, the CSS styling is applied by the web-browser engine during the HTML render process, while the Changer styling is applied by the Harlowe engine just after the HTML has been rendered.
The main reasons why CSS rule based styling may be faster are:
a. searching for identifiable HTML elements within the structure is generally faster than searching the content of all of the page's HTML Plain Text Nodes for a value.
b. the CSS rule is styling an existing HTML element, where as the Changer has to replace the found text with a new styled tw-enchantment element (containing the found text), thus it has to modify the HTML structure.