@samitouri / QOS-React-2 / commits / d547374847

[perf] Log DOM time

Log the time it takes to perform all DOM operations

Pete Hunt committed Feb 12, 2014 at 11:35 UTC d5473748477537b4bfd1a2d62efd8e9ac3a0311c
1 file changed +102 -74
src/browser/ReactDOMIDOperations.js
+102 -74
@@ -25,6 +25,7 @@ var CSSPropertyOperations = require('CSSPropertyOperations');
25 var DOMChildrenOperations = require('DOMChildrenOperations');
26 var DOMPropertyOperations = require('DOMPropertyOperations');
27 var ReactMount = require('ReactMount');
28 +var ReactPerf = require('ReactPerf');
29
30 var getTextContentAccessor = require('getTextContentAccessor');
31 var invariant = require('invariant');
@@ -66,23 +67,27 @@ var ReactDOMIDOperations = {
67 * @param {*} value New value of the property.
68 * @internal
69 */
69 - updatePropertyByID: function(id, name, value) {
70 - var node = ReactMount.getNode(id);
71 - invariant(
72 - !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
73 - 'updatePropertyByID(...): %s',
74 - INVALID_PROPERTY_ERRORS[name]
75 - );
76 -
77 - // If we're updating to null or undefined, we should remove the property
78 - // from the DOM node instead of inadvertantly setting to a string. This
79 - // brings us in line with the same behavior we have on initial render.
80 - if (value != null) {
81 - DOMPropertyOperations.setValueForProperty(node, name, value);
82 - } else {
83 - DOMPropertyOperations.deleteValueForProperty(node, name);
70 + updatePropertyByID: ReactPerf.measure(
71 + 'ReactDOMIDOperations',
72 + 'updatePropertyByID',
73 + function(id, name, value) {
74 + var node = ReactMount.getNode(id);
75 + invariant(
76 + !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
77 + 'updatePropertyByID(...): %s',
78 + INVALID_PROPERTY_ERRORS[name]
79 + );
80 +
81 + // If we're updating to null or undefined, we should remove the property
82 + // from the DOM node instead of inadvertantly setting to a string. This
83 + // brings us in line with the same behavior we have on initial render.
84 + if (value != null) {
85 + DOMPropertyOperations.setValueForProperty(node, name, value);
86 + } else {
87 + DOMPropertyOperations.deleteValueForProperty(node, name);
88 + }
89 }
85 - },
90 + ),
91
92 /**
93 * Updates a DOM node to remove a property. This should only be used to remove
@@ -92,15 +97,19 @@ var ReactDOMIDOperations = {
97 * @param {string} name A property name to remove, see `DOMProperty`.
98 * @internal
99 */
95 - deletePropertyByID: function(id, name, value) {
96 - var node = ReactMount.getNode(id);
97 - invariant(
98 - !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
99 - 'updatePropertyByID(...): %s',
100 - INVALID_PROPERTY_ERRORS[name]
101 - );
102 - DOMPropertyOperations.deleteValueForProperty(node, name, value);
103 - },
100 + deletePropertyByID: ReactPerf.measure(
101 + 'ReactDOMIDOperations',
102 + 'deletePropertyByID',
103 + function(id, name, value) {
104 + var node = ReactMount.getNode(id);
105 + invariant(
106 + !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
107 + 'updatePropertyByID(...): %s',
108 + INVALID_PROPERTY_ERRORS[name]
109 + );
110 + DOMPropertyOperations.deleteValueForProperty(node, name, value);
111 + }
112 + ),
113
114 /**
115 * Updates a DOM node with new style values. If a value is specified as '',
@@ -110,10 +119,14 @@ var ReactDOMIDOperations = {
119 * @param {object} styles Mapping from styles to values.
120 * @internal
121 */
113 - updateStylesByID: function(id, styles) {
114 - var node = ReactMount.getNode(id);
115 - CSSPropertyOperations.setValueForStyles(node, styles);
116 - },
122 + updateStylesByID: ReactPerf.measure(
123 + 'ReactDOMIDOperations',
124 + 'updateStylesByID',
125 + function(id, styles) {
126 + var node = ReactMount.getNode(id);
127 + CSSPropertyOperations.setValueForStyles(node, styles);
128 + }
129 + ),
130
131 /**
132 * Updates a DOM node's innerHTML.
@@ -122,38 +135,42 @@ var ReactDOMIDOperations = {
135 * @param {string} html An HTML string.
136 * @internal
137 */
125 - updateInnerHTMLByID: function(id, html) {
126 - var node = ReactMount.getNode(id);
127 -
128 - // IE8: When updating a just created node with innerHTML only leading
129 - // whitespace is removed. When updating an existing node with innerHTML
130 - // whitespace in root TextNodes is also collapsed.
131 - // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
132 -
133 - if (useWhitespaceWorkaround === undefined) {
134 - // Feature detection; only IE8 is known to behave improperly like this.
135 - var temp = document.createElement('div');
136 - temp.innerHTML = ' ';
137 - useWhitespaceWorkaround = temp.innerHTML === '';
138 - }
139 -
140 - if (useWhitespaceWorkaround) {
141 - // Magic theory: IE8 supposedly differentiates between added and updated
142 - // nodes when processing innerHTML, innerHTML on updated nodes suffers
143 - // from worse whitespace behavior. Re-adding a node like this triggers
144 - // the initial and more favorable whitespace behavior.
145 - node.parentNode.replaceChild(node, node);
146 - }
147 -
148 - if (useWhitespaceWorkaround && html.match(/^[ \r\n\t\f]/)) {
149 - // Recover leading whitespace by temporarily prepending any character.
150 - // \uFEFF has the potential advantage of being zero-width/invisible.
151 - node.innerHTML = '\uFEFF' + html;
152 - node.firstChild.deleteData(0, 1);
153 - } else {
154 - node.innerHTML = html;
138 + updateInnerHTMLByID: ReactPerf.measure(
139 + 'ReactDOMIDOperations',
140 + 'updateInnerHTMLByID',
141 + function(id, html) {
142 + var node = ReactMount.getNode(id);
143 +
144 + // IE8: When updating a just created node with innerHTML only leading
145 + // whitespace is removed. When updating an existing node with innerHTML
146 + // whitespace in root TextNodes is also collapsed.
147 + // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
148 +
149 + if (useWhitespaceWorkaround === undefined) {
150 + // Feature detection; only IE8 is known to behave improperly like this.
151 + var temp = document.createElement('div');
152 + temp.innerHTML = ' ';
153 + useWhitespaceWorkaround = temp.innerHTML === '';
154 + }
155 +
156 + if (useWhitespaceWorkaround) {
157 + // Magic theory: IE8 supposedly differentiates between added and updated
158 + // nodes when processing innerHTML, innerHTML on updated nodes suffers
159 + // from worse whitespace behavior. Re-adding a node like this triggers
160 + // the initial and more favorable whitespace behavior.
161 + node.parentNode.replaceChild(node, node);
162 + }
163 +
164 + if (useWhitespaceWorkaround && html.match(/^[ \r\n\t\f]/)) {
165 + // Recover leading whitespace by temporarily prepending any character.
166 + // \uFEFF has the potential advantage of being zero-width/invisible.
167 + node.innerHTML = '\uFEFF' + html;
168 + node.firstChild.deleteData(0, 1);
169 + } else {
170 + node.innerHTML = html;
171 + }
172 }
156 - },
173 + ),
174
175 /**
176 * Updates a DOM node's text content set by `props.content`.
@@ -162,10 +179,14 @@ var ReactDOMIDOperations = {
179 * @param {string} content Text content.
180 * @internal
181 */
165 - updateTextContentByID: function(id, content) {
166 - var node = ReactMount.getNode(id);
167 - node[textContentAccessor] = content;
168 - },
182 + updateTextContentByID: ReactPerf.measure(
183 + 'ReactDOMIDOperations',
184 + 'updateTextContentByID',
185 + function(id, content) {
186 + var node = ReactMount.getNode(id);
187 + node[textContentAccessor] = content;
188 + }
189 + ),
190
191 /**
192 * Replaces a DOM node that exists in the document with markup.
@@ -175,10 +196,14 @@ var ReactDOMIDOperations = {
196 * @internal
197 * @see {Danger.dangerouslyReplaceNodeWithMarkup}
198 */
178 - dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
179 - var node = ReactMount.getNode(id);
180 - DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
181 - },
199 + dangerouslyReplaceNodeWithMarkupByID: ReactPerf.measure(
200 + 'ReactDOMIDOperations',
201 + 'dangerouslyReplaceNodeWithMarkupByID',
202 + function(id, markup) {
203 + var node = ReactMount.getNode(id);
204 + DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
205 + }
206 + ),
207
208 /**
209 * Updates a component's children by processing a series of updates.
@@ -187,13 +212,16 @@ var ReactDOMIDOperations = {
212 * @param {array<string>} markup List of markup strings.
213 * @internal
214 */
190 - dangerouslyProcessChildrenUpdates: function(updates, markup) {
191 - for (var i = 0; i < updates.length; i++) {
192 - updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
215 + dangerouslyProcessChildrenUpdates: ReactPerf.measure(
216 + 'ReactDOMIDOperations',
217 + 'dangerouslyProcessChildrenUpdates',
218 + function(updates, markup) {
219 + for (var i = 0; i < updates.length; i++) {
220 + updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
221 + }
222 + DOMChildrenOperations.processUpdates(updates, markup);
223 }
194 - DOMChildrenOperations.processUpdates(updates, markup);
195 - }
196 -
224 + )
225 };
226
227 module.exports = ReactDOMIDOperations;