美文网首页
渲染机制

渲染机制

作者: 猴子Hope | 来源:发表于2018-01-04 10:32 被阅读0次

一、DOCTYPE及作用

DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文档类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式

DOCTYPE是用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错

HTML 5

<!DOCTYPE html>

HTML 4.01    Strict    包含所有HTML元素和属性,但不包括展示性和弃用元素(如font)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01    Transitional    包含所有HTML元素和属性,包括展示性和弃用的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">

二、浏览器的渲染过程

三、重排Reflow

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

触发Reflow

    增加、删除、修改DOM节点

    移动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/uzilnxtx.html