css x轴不滚动_css知识总结

浏览器的渲染步骤

浏览器对内容渲染的步骤

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

浏览器的更新方式

浏览器的渲染优化

• 对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用requestAnimationFrame。
• 将长时间运行的 JavaScript 从主线程移到 Web Worker。
• 使用微任务来执行对多个帧的 DOM 更改。
• 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。
• 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
• 减少必须计算其样式的元素数量。
• 布局的作用范围一般为整个文档。
• DOM 元素的数量将影响性能；应尽可能避免触发布局。
• 评估布局模型的性能；新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
• 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改。
• 除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
• 绘制通常是像素管道中开销最大的部分；应尽可能避免绘制。
• 通过层的提升和动画的编排来减少绘制区域。
• 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销；应尽可能降低复杂性并减少开销。
• 坚持使用 transform 和 opacity 属性更改来实现动画。
• 使用 will-change 或 translateZ 提升移动的元素。
• 避免过度使用提升规则；各层都需要内存和管理开销。

css 动画

transform 的属性

• translate 位移

translateX(<length-percentage>)      //X轴移动
translateY(<length-percentage>)      //Y轴移动
translateZ(<length-percentage>)      //Z轴移动

• scale 缩放

scaleX(<number>)      //X轴缩放
scaleY(<number>)      //Y轴缩放
scale(<number>，<number>)        //整体缩放

• rotate 旋转

rotate([<angle>/<zero>])      //整体旋转

• skew 倾斜

skewX([<angle>/<zero>])      //X轴倾斜
skewY([<angle>/<zero>])      //Y轴倾斜

• transition 过渡 作用：补充中间帧

语法：属性名 | 时长 | 过渡方式 | 延迟

注： 并不是所有属性都能过渡 display: none

block 没法过渡。

一般改成 visibility: hidden

visible

@keyframes 完整语法

@keyframes slidein {
   from {
       transform: translateX(0%);
   }
   to {
       transform: translateX(100%);
   }

@keyframes identifier {
   0% { top: 0; left: 0;}
   60% { top: 50px;}
   100% { top: 100px; left: 100%;}
}

animation 的属性

animation 语法:

animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名

时长: 1s或者1000ms

过渡方式: 和transition取值一样，如linear

次数: 3，2.4，infinite(无限)

方向: reverse(结束到开始)、alternate(开始与结束相互循环)

填充模式: forward(定格在最后一帧)

是否暂停: paused | running