【每日十分钟前端】基础篇15，页面可见性、css优先级与权重、null与undefined的区别

1、[HTML]页面可见性（Page Visibility）
2、[CSS]css优先级与权重
3、[JS]null，undefined 的区别？

---

1、页面可见性（Page Visibility API）

用来监听页面的可视状态。

使用场景：

（1）、网站的动态效果、画布动画等，只有在用户观看的时候，才运行。
（2）、实时更新的信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
（3）、页面想要检测是否正在渲染，以便可以准确的计算网页浏览量。
（4）、页面失去用户焦点时暂停视频。

属性：

（1）、Document.hidden布尔值

document.addEventListener('visibilitychange', function() {
    if(document.hidden) {}
    else {}
})

（2）、Document.visibilityState字符串
有四个不同的值
visible：该标签页面可见或具有焦点
prerender：页面已加载，但用户未查看
hidden：页面在任何屏幕上都不可见
unloaded：表示用户将要关闭当前页面

document.addEventListener('visibilitychange', function() {
    if(document.visibilityState=='visible') {}
    else {}
})

补充：Document:visibilitychange
事件被触发时要到用的代码

2、css优先级与权重

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。
基于不同种类选择器组成的匹配规则。

优先级与权重计算

以下四个逐级递增：
（1）、类型选择器（p）、伪元素（:before）
权重为1（0.0.0.1）
（2）、类选择器（.class）、属性选择器（[type=“redio”]）、伪类（:hover）
权重为10（0.0.1.0）
（3）、ID选择器（#id）
权重为100（0.1.0.0）
（4）、内联样式（style=“”）可看作是具有最高的优先级，总会覆盖外部表的任何样式
权重为1000（1.0.0.0）

补充：通配选择符（*）、关系选择符（+>~）、否定伪类（:not()）对优先级没有影响（但是，在 :not() 内部声明的选择器会影响优先级）
权重为0。

当权重一样的时候，写在后面的样式优先。

例外规则：

!important 例外规则
此声明将覆盖任何其他声明，尽量少用。
:is()、:not() 例外规则
否定伪类在优先级计算中不会被看作是伪类。
事实上，在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。
:where() 例外规则
实验中的功能

3、null，undefined 的区别？

在if中都被转化为false
他们两个是基本相等的，但是不全等。

null == undefined 
null !== undefined 
typeof(null) === "object"

null

null是人为进行赋值的，表示"没有对象"，它本身就是真正的值；
有存储地址，没有内容。
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

let book = null;
（1）、let book; 声明变量，创建了一个变量叫book；
（2）、book = null;分配存储地址，变量赋值，给这个变量给了一个值，这个值就是null，表空值；

undefined

undefined的产生为初始化的时候，没有进行赋值，表示"缺少值"，就是此处应该有一个值，但是还没有定义。
没有存储空间。
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

let page;
（1）let page;声明变量，创建了一个变量叫page；

补充：

0

let num = 0
分配存储空间，内容为0；

not defined

console.log(name)
name is not defined;
没有定义，连声明都备有被声明过。