css知识总结

1. 浏览器渲染原理

浏览器渲染原理是指将HTML、CSS、JavaScript等Web资源转化为可视化的网页过程。它的核心是浏览器渲染引擎，不同浏览器渲染引擎实现机制不同，但通常都包括以下几个步骤：

解析HTML文档：当用户在浏览器中输入一个URL时，浏览器会向服务器发送请求，服务器将HTML文档作为响应返回给浏览器。浏览器会对HTML文档进行解析，并构建DOM树。
构建DOM树：DOM（Document Object Model）树是由浏览器解析HTML文档而创建的一个树状结构，它表示HTML文档的内容和结构。DOM树中的每个节点都是一个对象，可以通过脚本来访问和操作。
构建CSSOM树：CSSOM（CSS Object Model）树是由浏览器解析CSS样式表而创建的一个树状结构，它表示页面的样式信息。与DOM树类似，CSSOM树中的每个节点也是一个对象，可以通过脚本来访问和操作。
合并DOM树和CSSOM树：将DOM树和CSSOM树合并成一棵渲染树（Render Tree），渲染树中只包含需要渲染的节点，例如可见的文本、图片、视频等。渲染树中的节点属性包括位置、尺寸、颜色等，这些属性是由CSS样式表计算而来的。
布局：对渲染树进行布局（Layout），确定每个节点在屏幕上的确切位置和大小。浏览器会根据每个节点的位置和尺寸计算出它们的位置坐标、大小等属性，并创建一个包含所有节点的二维矩形。
绘制：将布局好的渲染树转换成屏幕上的像素，这个过程称为绘制（Painting）。浏览器会将渲染树中的每个节点转换成屏幕上的像素，并通过图形卡将它们绘制到屏幕上。
合成：将绘制好的像素合成成最终的页面。合成（Compositing）是浏览器渲染过程的最后一步，它将所有的像素合成成一个页面，并在屏幕上显示出来。合成过程通常由图形卡完成，可以利用硬件加速来提高性能。

在这个过程中，JavaScript的执行可能会影响到DOM树和CSSOM树的构建和修改，进而影响到布局计算和绘制渲染等过程。所以，JavaScript的执行通常会在渲染引擎的主线程上进行，如果JavaScript执行时间过长，可能会阻塞主线程，导致页面卡顿甚至无响应。

2. CSS 动画的两种做法（transition 和 animation）

2.1 Transition

transition过渡动画可以让元素在发生变化时平滑地过渡。它的原理是在元素的状态变化前和变化后之间设置一个过渡时间，浏览器会根据这个时间自动计算过渡期间的动画效果。transition可以设置的属性包括transition-property、transition-duration、transition-timing-function和transition-delay。

2.2 Animation

animation动画是一种更灵活的动画方式，可以通过定义一系列关键帧（keyframes）来控制元素在不同时间点的状态。animation可以设置的属性包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。其中animation-name用于指定动画的关键帧规则，animation-duration指定动画的持续时间，animation-timing-function指定动画的时间函数，animation-delay指定动画延迟多长时间开始执行，animation-iteration-count指定动画的重复次数，animation-direction指定动画的方向，animation-fill-mode指定动画完成后是否保留最后一帧的样式，animation-play-state指定动画的播放状态。

2.3 总结

总体而言，transition适合实现简单的动画效果，而animation则更加灵活，可以实现更为复杂的动画效果。在实际开发中，需要根据需求选择合适的动画方式。

CSS知识总结