时间对象、重绘和回流

一、时间对象

• 时间对象：用来表示时间的对象。
• 作用：可以得到当前系统时间。

1. 实例化

• 使用new关键字实现实例化对象操作。

语法：

//1. 获取当前时间
let data = new Date()

//2.获取指定时间 不要忘记给值加引号
let data = new Date('2022-5-24 18:23:14')

2. 时间对象方法

方法	作用
getFullYear()	获得年份
getMonth()	获得月份 ，取值为 0 ~ 11
getDate()	获取月份中的每一天
getDay()	获取星期 ，取值为 0 ~ 6
getHours()	获取小时 ，取值为 0 ~ 23
getMinutes()	获取分钟 ，取值为 0 ~ 59
getSeconds())	获取秒， 取值为 0 ~ 59

使用时间对象：先实例化对象，再给对象添加方法。

3. 时间戳

3.1 什么是时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。概括来说时间戳是毫秒数，用于计算时间。

3.2 获取时间戳

有三种获取时间戳的办法，语法如下：

<script>
    // 时间无法直接进行加减，但是可以利用时间戳进行加减，再转换为时间
        
    // 三种获取时间戳的办法：
    // 1.getTime() 需要实例化
    let date = new Date()
    console.log(date.getTime())

    // 2.+new Date() +在这里表示正，将其后面元素隐士转换为数字型 需要实例化 常用
    console.log(+new Date())
    console.log(+new Date('2022-08-05 20:18:20'))

    // 3.Date.now() 无需实例化，,但是无法获取特定时间戳，前两种可以
    console.log(Date.now())

</script>

区别：

• 最后一种方法不需要实例化对象；
• 前两种可得到指定的时间戳，最后一种只能得到当前的时间戳。

---

二、重绘和回流

1. 浏览器的界面渲染

浏览器渲染界面的过程：

• 解析（Parser）HTML，生成DOM树(DOM Tree)；
• 同时解析（Parser）CSS，生成样式规则 (Style Rules)；
• 根据DOM树和样式规则，生成渲染树(Render Tree)；
• 回流/重排（Layout）:根据生成的渲染树，得到节点的几何信息（位置，大小）；
• 重绘(Painting): 根据计算和获取的信息进行整个页面的绘制；
• Display: 展示在页面上。

2. 重绘和回流（重排）

• 重绘 ：改变元素的CSS样式。
• 回流 ：改变元素布局。
• 重绘不一定引起回流，而回流一定会引起重绘。
• 会导致回流（重排）的操作：只要是影响布局的操作，就会有回流。
  – 页面的首次刷新；
  – 浏览器的窗口大小发生改变；
  – 元素的大小或位置发生改变；
  – 改变字体的大小；
  – 内容的变化（如：input框的输入，图片的大小）；
  – 激活css伪类 （如：:hover）；
  – 脚本操作DOM（添加或者删除可见的DOM元素）。