Redraw and return

Works browser

The composition of the browser

• The user interface - including the address bar, back / forward buttons, bookmarks and other directory, which is what you see in addition to other parts of the main window to display the page you requested outside

• Browser engine - used to query and rendering engine operating interface

• Rendering engine (browser kernel) - used to display the contents of the request, for example, if the requested content is html, it is responsible for parsing html and css, and displays the result parsed

• Network - network used to complete calls, such as http request, it has a platform-independent interface, you can work on different platforms

• UI rear end - to draw substantially similar composition component selection boxes and dialog boxes, etc., having a common interface not specific to the underlying operating system using a user interface platform

• JS interpreter - the code used to explain the execution of the JS

• Data storage - belong to persistence layer, the browser needs to save all kinds of data similar to a cookie on your hard drive, HTML5 defines Storage technology, which is full of a lightweight client-side storage techniques

Mainstream rendering engine

The browser's rendering engine, also known as layout engine, or a browser kernel

There are mainstream rendering engine

• Chrome browser : Blink engine (a branch of WebKit).
• Safari browser : WebKit engine, windows version March 18, 2008 launch of the official version, but Apple has stopped development of the Windows version of Safari July 25, 2012.
• FireFox browser : Gecko engine.
• Opera browser : Blink engine (using an early version of Presto engine).
• Internet Explorer browser : Trident engine.
• Microsoft Edge Browser : EdgeHTML engine (a branch of Trident).

Rendering engine works

The basic flow of the rendering engine parses:

1. 解析HTML构建Dom树，DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口。
2. 构建渲染树，渲染树并不等同于Dom树，因为像`head`标签 或 `display: none`这样的元素就没有必要放到渲染树中了，但是它们在Dom树中。
3. 对渲染树进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫`layout` 或 `reflow`。
4. 绘制渲染树，调用操作系统底层API(UI Backend)进行绘图操作。

webkit core workflow

gecko core workflow

Conclusion: The browser can parse the HTML file, and displays the page. So we can use to write the file browser to open and see the results.

Performance Optimization: Redraw and reflux (rearrangement)

Reflow (reflow) and redraw (repaint), at the time of performance optimization often mention, because it involves rendering the underlying browser, so the master of children's shoes is not much, but the interview is often mentioned.

回流(reflow): Rebuilding a part (or all) render tree because of the size of the element size, layout, and other hidden changes when required.

重绘(repaint): When the render tree some elements need to be updated attributes, but these attributes only affect the element of appearance, style, and will not affect the layout, such as background-color.

1. Each page needs at least once a reflux + redrawn.
2. Reflux will cause redraw

When reflux occurs?

1, add or remove visible DOM element;

2, the position changing element;

3, changing the element size - margins, padding, borders, width and height

4, content changes - such as text or image size is changed to change the calculated width and height changes caused;

5, page rendering initialization;

6, the browser window size is changed --resize event;

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));

• How to optimize the number of performance? Minimize redraw the return of

  • ClassName directly modify the style, style less styling

  • Let the elements to be operated "offline processing", dealt with update

    • Use DocumentFragment cache operation, trigger a reflow and redraw
    • Use display: none technology, reflow and redraw triggered only twice;

  • The need to repeatedly rearrange elements, position property to absolute or fixed, so that this element is free from the document flow, it changes will not affect other elements of HTML animation elements, such as animation, then modify their CSS is It will greatly reduce the reflow.

  • Completion is a prerequisite, thinking optimized code in the case of completion of

	var pNode,fragment = document.createDocumentFragment(); 
    //动态创建20个p标签，先用DocumentFragment 对象来缓存     
    for(var i=0; i<20; i++){
        pNode = document.createElement('p');
        pNode.innerHTML = i;
        fragment.appendChild(pNode);
    }
    document.body.appendChild(fragment);