1. What is reflow?
Reflow refers to the process in which the browser recalculates the position and geometric structure of elements in the document in order to re-render part or all of the document.
Because reflow may cause the entire Dom tree to be reconstructed, it is a major killer of performance.
The following operations can cause reflow:
① Change window size
② font-size size change
③ Add or remove style sheets
④ Content changes (caused by entering text in input)
⑤ Activate CSS pseudo-class (:hover)
⑥ Manipulate class attributes, add or reduce
⑦ js operation dom
⑧ Calculation of offset related attributes
⑨ Set the value of style
......
Reflow and repaint are the main reasons for slowing down js. In particular, reflow is a performance killer, so we should try to avoid it.
<style type="text/css">
.changeStyle { width: 100px; height: 100px; }
</style>
<script type="text/javascript">
$(document).ready(function () {
var el = $('id');
//1
el.css('width', '100px');
el.css('height', '100px');
//2
el.css({ 'width': '100px;', 'height': '100px;' });
//3
el.addClass('changeStyle');
});
</script>Recommend the third one and avoid the first one
Among the above methods, I strongly recommend the third one and avoid the first one.
② Please use absolute if you have animation effects
Because the change of the absolute element has little effect on the reflow of other elements, our animation effect element should be changed to absolute.
③ Avoid using table layout (remember it is just layout, our data should still use tables)
④ Please never use CSS expressions, it is a performance killer, especially IE
⑤ Change the element at the end
Because reflow is top-down, the bottom is not as good as the top. The less impact we have on the overall situation if we modify the information at the end.
⑥ When the animation moves, you need to control it
For example, when we drag an element, I only operate it when its x or y coordinate changes by 5px. This reduces the smoothness, but improves performance.