美文网首页
渲染机制

渲染机制

作者: vavid | 来源:发表于2020-07-09 16:43 被阅读0次

一、什么是DOCTYPE及作用

DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或XHTML的文档类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式
DOCTYPE是用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错
<!DOCTYPE html> // HTML5

二、浏览器渲染过程

image.png

三、重排Reflow

定义:DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow

触发Reflow

  • 当增加、删除、修改DOM结点时,会导致Reflow或Repaint
  • 当移动DOM的位置,或是设置动画时
  • 当修改CSS样式时
  • 当Resize窗口的时候(移动端没有这个问题),或是滚动时
  • 当修改网页的默认字体时

四、重绘Repaint

定义:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制一遍,于是页面的内容出现了,这个过程称为repaint

触发Repaint

  • DOM改动
  • CSS改动

相关文章

  • 离屏渲染

    离屏渲染 一、渲染机制 GPU渲染机制: CPU 计算好显示内容提交到 GPU,GPU 渲染完成后将渲染结果放入帧...

  • Android UI卡顿原因及解决办法

    渲染机制介绍 为了分析UI卡顿,我们有必要理解一下渲染机制,这套渲染机制适用于绝大部分的屏幕渲染,其中包括Andr...

  • Android 性能优化之旅4--UI卡顿分析

    渲染机制介绍 为了分析UI卡顿,我们有必要理解一下渲染机制,这套渲染机制适用于绝大部分的屏幕渲染,其中包括Andr...

  • OpenGL--深入解析离屏渲染的原理

    什么是离屏渲染 首先我们要了解GPU的渲染机制以及屏幕渲染的方式 GPU渲染机制:CPU通过解压计算好显示内容通过...

  • 谈谈 Android 渲染机制:如何绘制并显示一帧图像?

    本文将介绍 Android 的渲染机制。了解 Android 的渲染机制不论是对日常的开发,还是渲染问题排查都会有...

  • 渲染机制

    一、什么是DOCTYPE及作用 DTD(document type definition,文档类型定义)是一系列的...

  • 渲染机制

    浏览器渲染机制 什么是doctype以及作用 DTD(文档类型定义)是一系列的语法规则,用来定义XML或者(x)H...

  • 渲染机制

    TCP三次握手协议 一篇通俗易懂的解读文章 ※TCP(Transmission Control Protocol ...

  • 渲染机制

    一、DOCTYPE及作用 DTD(document type definition,文档类型定义)是一系列的语法规...

  • 渲染机制

    什么是DOCTYPE及作用? 文档声明,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 ...

网友评论

      本文标题:渲染机制

      本文链接:https://www.haomeiwen.com/subject/wxghvftx.html