(Ix) the front end of the interview: rendering mechanism

Reference article content from " front-end interview quit the necessary skills ." 

1. What is the role and DOCTYPE

 

DTD (document type definition, Document Type Definition) is a set of grammar rules that define the XML or (X) HTML file types. The browser will use it to determine the type of document, decide which protocol to use to parse and switch the browser mode.

DOCTYPE is used to verify the legitimacy of the document type declaration and DTD specifications, one of the main purposes is to file. If the file code is not legitimate, the browser will be some error while parsing.

2. The browser rendering process

3. rearrangement Reflow

definition

DOM structure of each element has its own case (model), which are required to calculate the browser and the calculation results into the element where it appears that according to various patterns, the process is called reflow.

Trigger Reflow

  • When you add, delete, modify the DOM node will cause Reflow or Repaint
  • When you move the position of DOM, or put forward a time animation
  • When you modify CSS styles when
  • When you Resize the window (mobile terminal does not have this problem), or when scrolling
  • When you change the default font page
     

4. Redraw Repaint

Definition of
the various boxes when the position, size and other attributes, such as color, font size, and so determined, the browser then put these elements are drawn in accordance with respective characteristics - times, then contents of the page appears, this process call repaint.

Repaint Trigger

  • DOM changes
  • CSS changes

The layout Layout 

 

Guess you like

Origin blog.csdn.net/qq_39025670/article/details/96855959