浏览器渲染过程和CSS动画

布满荆棘的人生 2024-04-18 16:53 74阅读 0赞

#### 动画的原理 ####

动画其实是一个人脑的bug，是由很多个静止不同的图片，加速播放，让人看起来是在不停播放的视觉效果

###### 动画的定义 ######

1.  由许多静止的画面 (帧)
2.  以一定的速度(如每秒30张) 连续播放时
3.  肉眼因视觉残象产生错觉
4.  而误以为是活动的画面

###### 概念 ######

1.  帧：每个静止的画面都叫做帧
2.  播放速度：每秒24帧（影视）或者每秒30帧（游戏）

###### CSS是怎样实现动画的 ######

###### 使用transform属性 ######

四个常用功能
    
    	位移 translate
    	缩放 scale
    	旋转 rotate
    	倾斜 skew
    
    translate 常用写法
    
    	translateX(<length-percentage>) 水平移动
    	translateY(<length-percentage>) 垂直移动
    	translate(<length-percentage> , <length-percentage>?) 水平 和 锤子 移动
    	translateZ(<length>) 且父容器 perspective 平面大小移动
    	translate3d(x,y,z) 3d 离屏幕更近
    
    transform 之 scale
    
    	scaleX(<number>) 水平变大缩小
    	scaleY(<number>) 垂直变大缩小
    	scale(<number>,<number>) 水平垂直变大缩小
    
    transform 之 rotate
    
    	rotate([<angle> | <zero>])
    	rotateZ([<angle> | <zero>])
    	rotateX([<angle> | <zero>])
    	rotateY([<angle> | <zero>])
    
    transform 之 skew
    
    	skewX([<angle> | <zero>])
    	skewY([<angle> | <zero>])
    	skew([<angle> | <zero>],[<angle> | <zero>]?)

#### 浏览器渲染过程 ####

1.  根据HTML构建HTML树(DOM)
2.  根据CSS构建CSS树(CSSOM)
3.  将两棵树合并成一颗渲染树(render tree)
4.  Layout布局(文档流、盒模型、计算大小和位置)
5.  Paint绘制(把边框颜色、文字颜色、阴影等画出来)
6.  Compose合成(根据层叠关系展示画面)

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器渲染过程和CSS动画

动画的原理动画其实是一个人脑的bug，是由很多个静止不同的图片，加速播放，让人看起来是在不停播放的视觉效果动画的定义 1. 由许多静止的画面 (帧) 2...

布满荆棘的人生/ 2024年04月18日 16:53/ 0 赞/ 75 阅读

相关浏览器渲染页面的过程

上网浏览网页对普通人来讲是非常简单的操作，而对于程序员来说，这件事的背后发生了什么事情呢？输入的网址在通过DNS解析后得到服务器地址， ![watermark_typ

╰+攻爆jí腚メ/ 2023年01月01日 10:58/ 0 赞/ 238 阅读

相关浏览器页面渲染过程

1、浏览器页面渲染过程图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

约定不等于承诺〃/ 2022年12月01日 14:11/ 0 赞/ 259 阅读

相关浏览器渲染过程

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

古城微笑少年丶/ 2022年11月21日 01:16/ 0 赞/ 218 阅读

相关浏览器渲染过程

为什么要了解浏览器加载、解析、渲染这个过程？了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。

桃扇骨/ 2022年07月16日 05:49/ 0 赞/ 291 阅读

相关浅析浏览器渲染页面过程

1.解析HTML文件，创建DOM树自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS 优

╰+哭是因爲堅強的太久メ/ 2022年07月14日 13:56/ 0 赞/ 246 阅读

相关浏览器渲染页面过程

当了解web访问原理后，与前端工程师或页面重构师工作更为关系密切的应该是浏览器，WEB 页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验，特别是浏

逃离我推掉我的手/ 2022年06月10日 13:40/ 0 赞/ 276 阅读

相关浏览器渲染css和script

转自[浏览器渲染][Link 1] 参考[渲染内部原理][Link 2] 参考[渲染原理内部剖析][Link 3] 参考[浏览器工作原理（一）][Link 4] 浏览器

我会带着你远行/ 2022年05月29日 09:23/ 0 赞/ 114 阅读

相关浏览器渲染过程

先放一张图方便理解： ![浏览器渲染过程图][70] 渲染引擎先通过请求拿到文档内容，浏览器解析HTML构建DOM树： ![在这里插入图片描述][70 1] 然

朴灿烈づ我的快乐病毒、/ 2022年05月08日 16:00/ 0 赞/ 312 阅读

相关浏览器渲染页面的过程

一、首先了解一下浏览器的主要功能　浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括P

亦凉/ 2022年02月13日 04:47/ 0 赞/ 327 阅读