浏览器的渲染原理

• 步骤

  • 根据HTML构建HTML树(DOM）
  • 根据CSS构建CSS树(CSSOM)
  • 将HTML树和CSS树能够展示的部分合成一颗渲染树(render tree)
  • Layout布局(文档流、盒模型、计算大小和位置，主要根据大小和位置实现每一层的布局的素描)
  • Paint绘制(把边框颜色、文字颜色、阴影等画出来，主要绘制颜色，填色)
  • Composite合成（根据层叠顺序将所有的图层合成一张图层）

• 三棵树

• 如何渲染样式

  • 一般我们用JS来渲染样式,小部分用CSS

    • 比如div.style.background='red'
    • 比如div.style.display='none'
    • 比如div.classList.add('red')
      • 一般用类加样式，不会单独加样式，因为类里面有很多样式
    • 比如div.remove()直接删除节点

  • 那这些方法有什么区别

    

    • 三种渲染方式
      • 第一种，全走
        • div.remove()会触发当前消失，其他元素repaint
      • 第二种，跳过layout
        • 改变背景颜色,直接repaint+composite
      • 第三种，跳过layout和paint
        • 改变transform，只需composite

CSS动画的两种做法(transtion和animation)

• transition作用

  • 补充中间帧
  • 告诉中间和结束帧，中间自动补齐

• transition语法

  • transition:属性名 时长 过渡方式 延迟
    • transition:left 200ms linear 3s
    • 延迟很少用到
  • 可以用逗号分隔两个不同属性
    • transiton:left 200ms ,top 400ms
  • 可以用all代表所有属性
    • transition: all 200ms
  • 过渡方式有:linear|ease|ease-out|ease-in-out|cubic-bezir|step-start|step-end|steps,具体含义要靠数学知识
    • linear表示线性，其他都是非线性
    • ease表示缓动
    • ease-in表示淡入，先慢再快
    • ease-out表示淡出，先快后慢
    • ease-in-out表示先淡出再淡入

• 注意

  • 并不是所有的属性都能过渡

    • display:none不能过渡到display:block;display:block也不能过渡到display:none
      • 一般改成visibility:hidden=>visible
      • display和visibility的区别是：display消失之后，所占的空间也消失；visibility隐藏之后，所占的空间并不消失
    • background颜色可以过渡吗？
      • 可以
    • opacity透明度可以过渡吗？
      • 可以，不推荐
    • 只要有过渡规律的，就可以用transition
    • 代码演示

  • 过渡必须要有起始

    • 一般只有一次动画，或者两次动画

      • 两次动画，如hover和非hover状态的过渡

    • 如果还有中间点怎么办？

      • 方法一：使用两次transform

        • .a=====transform=====.b
        • .b=====transform=====.c
        • 如何知道到了中间点？
          • 用setTimeout或者监听transitionend事件

      • 方法二：使用animation

        • 可以方便的添加多次动画，而transform只能方便地添加一次或两次动画

        • 既声明关键帧，又添加动画

        • animation缩写语法

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

            • 时长：动画的总时长,1s或者1000ms

            • 过渡方式:跟transition取值一样

            • 次数:3或者2.4或者infinite（无限次）

            • 方向：reverse|alternate|alternate-reverse

            • 填充模式：none|forwards|backwards|both

            • 是否暂停：paused|running

            • 以上属性均有对应的单独属性

        • 如何让动画停在最后一帧

          • 最详细的搜索css animation stop at end
          • 网友给出的答案是forwards

        • @keyframes完整语法

          • 一种写法是from to
            • 
          • 另一种写法是百分数，常用写法
            •