4-1 渲染机制

4-1 渲染机制.mp4_20171127_163909.885_看图王.jpg 4-1 渲染机制.mp4_20171127_164214.580_看图王.jpg

1. 渲染机制类

   • 什么是DOCTYPE 以及作用
   4-1 渲染机制.mp4_20171127_181158.440_看图王.jpg
   

   一句话:DTD就是告诉浏览器我是什么文档类型,浏览器根据这个来判断用什么来解析,渲染它

   DOCTYPE 就是告诉浏览器什么是DTD

   • 浏览器的渲染过程

     4-1 渲染机制.mp4_20171129_172242.480.jpg

     • DOM Tree

       
       4-1 渲染机制.mp4_20171129_174103.595.jpg

     • CSS Tree

       4-1 渲染机制.mp4_20171129_174319.149.jpg

 - Render tree

4-1 渲染机制.mp4_20171129_174523.311_看图王.jpg

 浏览器拿到HTML,CSS它要干什么?第一步:将HTML转成DOM 树,将CSS根据解析规则转成CSSOM树,然后将两棵树一整合,就形成了一个Render 树,这个Render tree就相当于告诉浏览器这个树的结构已经出来了.然后跟Render tree还有一个平行的Layout,前面的Render tree并不包含HTML里面的内容,位置在什么地方,通过layout,就能精确的计算dom元素要显示的位置,宽,高,颜色等等这些属性,最后Painting,浏览器通过GUI 开始绘图 

• 重排 Refolow

  • 定义:DOM 元素中的各个元素都有自己的盒子(模型),这些都需要浏览器通过各种样式来计算,并根据计算的结果将元素将元素放到它该出现的位置,这个过程叫做Refolow.
  • 要知道JS 是可以修改DOM 的, 我们重新修改了DOM,浏览器又该怎么做呢?这就是Refolow 要上场的时候了
  • 触发Refolow:
    1. 增加,删除,修改DOM节点的时候,会导致Refolow或Repaint.
    2. 移动 DOM 位置,比如你搞个动画的时候.
    3. 当你修改CSS 样式的时候.
    4. 当你Resize 窗口的时候,移动端没有这个问题,或者滚动的时候.
    5. 当你修改网页默认字体的时候

• 重绘 Repaint

  • 把页面要显示的内容统统都画在屏幕上,这就是Repaint
  • 触发 Repaint: 1: DOM 改动. 2: CSS改动
  • 如何减少Repaint:不要一个一个节点添加到浏览器上去,而是 要先创建一个document.fragment(代码片段),将这些节点塞到这个片段中,然后向浏览器中一次添加这个片段,导致它只Repaint 一次