web前端 之 渲染机制


web前端 之 渲染机制

什么是DOCTYPE及作用

web前端 之 渲染机制
DTD告诉浏览器我是什么文档类型
浏览器根据文档类型来决定用什么隐情引擎来渲染他
DOCTYPE就是告诉浏览器什么是DTD的,通知浏览器告诉 当前文档包含的是哪个TB,也就是哪个文档类型,我们html中第一行的就是告诉浏览器文档类型是html
常见的DOCTYPE有哪些:
那我们现在经常用的就是HTML5
4.0版本有两个模式,一个严格模式(Strict),一个传统模式()Transitional
web前端 之 渲染机制

浏览器渲染过程

web前端 之 渲染机制
html经过html Parser解释器转换为DOM树,CSS经过CSS Parser解释器转换为DOM树,这两个DOM数一整合形成Render Tree,Layout对Render Tree精确计算后,最后开始绘图Painting,最后展示在浏览器上

html的DOM Tree:
web前端 之 渲染机制
css的DOM Tree
web前端 之 渲染机制
Render Tree
web前端 之 渲染机制

重排Reflow

一般导致Reflow就会导致Repaint
1、什么是重排
2、什么时候会触发Reflow
3、什么时候会避免触发Reflow
web前端 之 渲染机制

重绘Repaint

页面呈现的内容通通呈现在浏览器页面上就叫repaint
Rpaint是无法避免的,因为不触发Repaint的话就是静态页面,没有任何交互
如何避免最小程度的Repaint:
(1)将元素的display设置为”none”,完成修改后再把display修改为原来的值
(2)如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document
(3)先将元素从document中删除,完成修改后再把元素放回原来的位置
(4)ng-if/ng-show
web前端 之 渲染机制

布局Layout

Layout对Render Tree精确计算,进行布局