4-1 渲染机制.mp4_20171127_163909.885_看图王.jpg
4-1 渲染机制.mp4_20171127_164214.580_看图王.jpg
-
渲染机制类
- 什么是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:
- 增加,删除,修改DOM节点的时候,会导致Refolow或Repaint.
- 移动 DOM 位置,比如你搞个动画的时候.
- 当你修改CSS 样式的时候.
- 当你Resize 窗口的时候,移动端没有这个问题,或者滚动的时候.
- 当你修改网页默认字体的时候
-
重绘 Repaint
- 把页面要显示的内容统统都画在屏幕上,这就是Repaint
- 触发 Repaint: 1: DOM 改动. 2: CSS改动
- 如何减少Repaint:不要一个一个节点添加到浏览器上去,而是 要先创建一个document.fragment(代码片段),将这些节点塞到这个片段中,然后向浏览器中一次添加这个片段,导致它只Repaint 一次
