阅读 28

浏览器渲染机制

1. 简介

  • 什么是DOCTYPE及作用
  • 浏览器渲染过程
  • 重排Reflow
  • 重绘Repaint
  • 浏览器Layout

2. 浏览器渲染机制

1. 什么是DOCTYPE及作用。

  1. DTD用来定义XML或(X)HTML的文件类型。浏览器据此判断文档类型,决定用何种协议来解析以及切换浏览器模式。
  2. DOCTYPE用来申明文档类型以及DTD规范,主要的作用就是文件的合法性校验,不合法的文件浏览器解析时会出一些差错。
  3. 常见的DOCTYPE类型
HTML5
    <!DOCTYPE html>
HTML4.0版本
1. Strict,严格模式: 包含所有html元素和属性,但不包含展示性和弃用的元素。
    <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
2. Transitional,传统模式: 包含所有html元素和属性,且包含展示性和弃用的元素。
    <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
复制代码

2. 浏览器渲染过程。

  1. 解析HTML和CSS,形成DOM树CSS树
  2. 整合DOM树和CSS树,形成渲染树(Render Tree)
  3. Render()渲染Render Tree(生成Layout,用于计算dom的宽高,生成布局) // 此时浏览器并不知道如何展示DOM
  4. 解析DOM树
  5. display展示内容

3. 重排Reflow

  1. 概念:浏览器根据DOM模型的样式并根据计算结果将DOM放到它该出现的位置的过程。
  2. 触发Reflow的条件
    (1) 增、删、改DOM节点
    (2) 移动DOM的位置,或者添加动画。
    (3) 修改CSS样式
    (4) 改变窗口大小,或者滚动
    (5) 修改网页的默认字体

4. 重绘Repaint

  1. 概念:当盒子的位置大小、颜色、属性、字体等都确定下来后,浏览器把这些元素都按照各自的特性绘制了一遍。于是页面的内容出现了,这个过程就是Repaint
  2. 触发Reflow的条件
    (1) DOM节点改动 (2) CSS改动 (3) 只要页面的显示内容改变了就会触发Repaint
  3. Repaint是无法避免的,但可以最大程度的降低Repaint
    (1) 减少DOM改动的次数
    (2) 一次性添加一个代码片段,而不是多次添加DOM节点;
    (3) 增加class而不是逐个添加属性等

3. 总结

  • 本文主要介绍了浏览器是如何将HTML渲染呈现在页面的原理。
关注下面的标签,发现更多相似文章
评论