为什么 Vue3 选择了 CSS 变量

Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」

看到这个，我脑子里有以下的疑问？

• CSS 变量是什么？
• Sass/Less 中不是有变量的定义么，为什么还需要使用 CSS 变量？
• 现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS，那 CSS 变量和这种方式有什么区别？
• Vue 3 做了哪些操作，让 SFC (单文件组件)能更好的使用 CSS 变量

以下对这些问题进行探讨

CSS 变量基础

CSS 变量并不是某个框架的产物，而是 CSS 作者定义的一个标准规范

CSS 变量又称为 CSS 自定义属性，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color:  var(--main-color);）

为什么选择两根连词线（--）表示？ 因为变量 ? 被 Sass 用掉了，@ 被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了

CSS 变量一个简单例子如下，CSS 变量基础演示地址

<div class="parent">
  I am Parent
  <div class="child">
    I am Child
  </div>
</div>

.parent {
  /*  变量的作用域就是它所在的选择器的有效范围，所以.parent 读取不到 child 中的变量  */
  color: var(--body-child);
  /*  定义变量  */
  --parent-color: blue;
}
.child {
  /*  通过 var 读取变量  */
  color: var(--parent-color);
  --child-color: green;
}

结果展示

我们现在 .parent 中定义变量 --parent-color: blue;，在 .child 中使用 color: var(--parent-color);

需要注意的是，变量的作用域就是它所在的选择器的有效范围，比如 .child 中定义的 --child-color: green;， 在 .parent 读取不到的，只针对 .child 元素下的元素有效

如果希望能够在 HTML 文档中都能访问到，则可以定义在类 :root 中

除了基础的使用，还有以下几点需要注意

• CSS 变量的命名是对大小写敏感的，也就是 --myColor 和 --mycolor 是不一样的
• var() 参数可以使用第二个参数设置默认值，当该变量无效的时候，就会使用这个默认值
• CSS 变量提供了 JavaScript 与 CSS 通信的一种途径，在 JS 中我们可以操作 CSS，跟操作普通的 CSS 属性是一样的

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

这里就演示了最简单的使用，具体可以查看 MDN 文档

在 Vue 2 中使用CSS 变量

上面说了，CSS 变量并不是什么某个框架的产物，而是原生 CSS 的标准规范。那么在 Vue 2 中直接使用 CSS 变量肯定可以的，并没什么约束。

关键是我们怎么让 Vue 组件中的状态同步到 CSS 变量中，其实也很简单，通过 Style 绑定 即可。Vue 2 演示地址

<template>
  <!-- 如果要该组件都可以使用，则必须放置在根元素下 -->
  <div class="hello" :style="styleVar">
    <div class="child-1">I am Child 1</div>
    <div class="child-2">I am Child 2</div>
    <div @click="onClick">Change Red TO Blue</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      styleVar: {
        "--colorBlue": "blue",
        "--colorRed": "red",
        "--fontSize": "30px",
        "--fontSizeTest": "30px",
      },
    };
  },
  methods: {
    onClick() {
      this.styleVar["--fontSizeTest"] = "40px";
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.child-1 {
  color: var(--colorBlue);
  font-size: var(--fontSize);
}
.child-2 {
  color: var(--colorRed);
  font-size: var(--fontSizeTest);
}
</style>

结果：

我们只需要在组件的根元素中设置 :style="styleVar"（如果要该组件都可以使用，则必须放置在根元素下），就可以在 Vue 2.x 中实现组件中的状态和 CSS 值的绑定，而且这种绑定关系是响应式的，比如我定义一个方法，改变 font-size 的值，是可以实时更新的

onClick() {
  this.styleVar["--fontSizeTest"] = "40px";
},

效果演示：

:style VS CSS 变量

这里有个问题，现有的 Vue 可以通过 :style 的方式定义去动态绑定 CSS，比如我可以直接在上面的 .child-1中做如下绑定，效果跟上面是一致的。

<div class="child-1" :style="{ color: 'blue', fontSize: '30px' }">
  I am Child 1
</div>

那我为什么还要使用 CSS 变量？这样大费周章是否真有意义？

我总结有如下两个原因：

原因一：
复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。当组件中的一个状态被几十个地方用到时，那么你可能需要绑定很多个 :style。一来代码会显得可读性不强，二来性能上应该是比原生的要差，毕竟要将更改经过 Vue 的指令绑定到每一个元素上（这一点暂未验证）

通过 CSS 变量，就可以直接通过在组件的根元素设置变量，在组件内部 <style> 中直接使用即可

原因二：伪元素的使用
如果直接使用 :style 我们无法设置伪元素的样式，而 CSS 变量就可以

p::first-line {
  color: var(--theme-secondary-color);
}

在 Vue 3 中使用 CSS 变量

虽然 Vue 2.x 中可以使用 CSS 变量，但需要通过样式绑定的方式传入，似乎没那么优雅，所以 Vue 3 中做了一些优化

新增 vars 绑定

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: "red",
    };
  },
};
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

在 Vue 3 中的 SFC 中，style 标签支持 vars 绑定，该参数接受对象键值对方式注入 CSS 变量，如上所示 <style vars="{ color }">。可以效果可以看 Vue 3演示地址

这些变量会直接绑定到组件的根元素上，上面的例子中，最后的渲染结果如下：

<div style="--color:red" class="text">hello</div>

和 <style scoped> 一起使用

当 vars 和 <style scoped> 一起使用时，所应用的 CSS 变量将以组件的 Scoped id 作为前缀，访问的时候也会自动加上 Scoped id

比如，我们书写如下：

<style scoped vars="{ color }">
h1 {
  color: var(--color);
}
</style>

则编译过后，变成

h1 {
  color: var(--6b53742-color);
}

假如我们这种情况下想访问的是全局的 CSS 变量呢？也就是我们不希望加上 Scoped Id，那么要书写类似如下：

<style scoped vars="{ color }">
h1 {
  color: var(--color);
  font-size: var(--global:fontSize);
}
</style>

这样会编译成如下结果：

h1 {
  color: var(--6b53742-color);
  font-size: var(--fontSize);
}

Less/Sass 中的变量 VS CSS 变量

我理解最重要的一点，就是 CSS 变量可以跟 JavaScript 更好的通信，相当于 CSS 和 JavaScript 的桥梁。在 Vue 中这一点还是体现得挺明显的

另外来看一个切换主题的例子，如果我们用 Sass 变量，如下：

$color-primary: blue;
$color-text: black;
$color-bg: white;
/* invert */
$color-primary-invert: red;
$color-text-invert: white;
$color-bg-invert: black;

.component {
  color: $color-text;
  background-color: $color-bg;

  a {
    color: $color-primary;
  }
}

.component--dark {
  color: $color-text-invert;
  background-color: $color-bg-invert;

  a {
    color: $color-primary-invert;
  }
}

我们有两个主题，一个是普通的主题，一个暗黑模式的（dark）。注意，在暗黑模式中，我们需要新的颜色变量去更新旧的颜色变量。假如这种设置非常多的时候，我们会很苦恼。

看 CSS 变量设置的话

:root, [data-theme="default"] {
  --color-primary: blue;
  /* color contrasts */
  --color-bg: white;
  --color-contrast-lower: hsl(0, 0%, 95%);
  --color-contrast-low: hsl(240, 1%, 83%);
  --color-contrast-medium: hsl(240, 1%, 48%);
  --color-contrast-high: hsl(240, 4%, 20%);
  --color-contrast-higher: black;
}

[data-theme] {
  background-color: var(--color-bg);
  color: var(--color-contrast-high);
}

[data-theme="dark"] {
  --color-primary: red;
  /* color contrasts */
  --color-bg: black;
  --color-contrast-lower: hsl(240, 6%, 15%);
  --color-contrast-low: hsl(252, 4%, 25%);
  --color-contrast-medium: hsl(240, 1%, 57%);
  --color-contrast-high: hsl(0, 0%, 89%);
  --color-contrast-higher: white;
}

这种情况下，我们不需要额外定义一个颜色变量，因为我们只需要设置CSS 变量为正确的值即可

之所以会有以上用法上的不同，我理解是 SASS 变量是编译时，也就是说预处理器在向浏览器输出前已经解析完毕，而浏览器对 CSS 变量解析是运行时的

另外预处理器和 CSS 变量并不冲突，它们结合可以更好的提升我们的开体验

缺点——浏览器兼容性问题

CSS 变量目前的支持度并非特别好，IE 目前全部都是不支持的，但终上所述，依旧看好它的未来

对它的兼容性进行处理，我们也可以进行如下书写：

a {
  color: #7F583F;
  color: var(--primary);
}

总结

最后总结一下文章开头提出的几个问题：

• CSS 变量是什么？

  • CSS 变量又称为 CSS 自定义属性，它包含的值可以在整个文档中重复使用

• 现有的 Vue 不是通过 :style 的方式定义去动态绑定 CSS，那 CSS 变量和它又有什么区别呢？

  • 复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值
  • 伪元素的使用

• Vue 3 做了哪些操作，让 SFC (单文件组件)能更好的使用 CSS 变量

  • 新增 vars 绑定
  • 和 <style scoped> 一起使用，增强作用域功能

• Sass/Less 中不是有变量的定义了么，为什么还要使用 CSS 变量？

  • CSS 变量可以跟 JavaScript 更好的通信，相当于 CSS 和 JavaScript 的桥梁
  • SASS 变量是编译时，CSS 变量是运行时

参考

• CSS 变量教程
• Why we prefer CSS Custom Properties to SASS variables

• 作者：陈大鱼头
• github： KRISACHAN

进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。

作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来康康有哪些有意思的进度条实现方式。

常规版 — div 一波流

这是比较常规的实现方式，先看效果：

源码如下：

<style>
  .progress1 {
    height: 20px;
    width: 300px;
    background-color: #f5f5f5;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
  }
  .progress1::before {
    counter-reset: progress var(--percent, 0);
    content: counter(progress) '%\2002';
    display: block;
    height: 20px;
    line-height: 20px;
    width: calc(300px * var(--percent, 0) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
  }
  .btn {
    margin-top: 30px;
  }
</style>
<div id="progress1" class="progress1"></div>
<button id="btn" class="btn">点我一下嘛～</button>
<script>
  'use strict';
  let startTimestamp = (new Date()).getTime();
  let currentPercentage = 0;
  let maxPercentage = 100;
  let countDelay = 100;
  let timer = null;
  let start = false;
  const percentageChange = () => {
    const currentTimestamp = (new Date()).getTime();
    if (currentTimestamp - startTimestamp >= countDelay) {
      currentPercentage++;
      startTimestamp = (new Date()).getTime();
      progress1.style = `--percent: ${currentPercentage}`;
    };
    if (currentPercentage < maxPercentage) {
      timer = window.requestAnimationFrame(percentageChange);
    } else {
      window.cancelAnimationFrame(timer);
    };
  };
  const clickHander = () => {
    if (!start) {
      start = true;
      percentageChange();
    };
  };
  btn.addEventListener('click', clickHander);
</script>

这种方法的核心就是以当前盒子为容器，以 ::before 为内容填充。用 <div> 的好处就是实现简单，兼容性强，拓展性高，但是美中不足的是标签语义化不强。

进阶版 — input type="range"

<input /> 是一个非常实用的替换元素，不同的 type 可以做不同的事情。第二种就是用 <input type="range" /> 来实现的。首先我们来看看效果：

源码如下：

<style>
  .progress2[type='range'] {
    display: block;    
    font: inherit;
    height: 20px;
    width: 300px;
    pointer-events: none;
    background-color: linear-gradient(to right, #2376b7 100%, #FFF 0%);
  }
  .progress2[type='range'],
  .progress2[type='range']::-webkit-slider-thumb { 
    -webkit-appearance: none;
  };
  .progress2[type='range']::-webkit-slider-runnable-track {
    border: none;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    height: 20px;
    width: 300px;
  }
  .btn {
    margin-top: 30px;
  }
</style>
<input id="progress2" class="progress2" type='range' step="1" min="0" max="100" value="0"/>
<button id="btn" class="btn">点我一下嘛～</button>
<script>
  'use strict';
  let startTimestamp = (new Date()).getTime();
  let currentPercentage = 0;
  let maxPercentage = 100;
  let countDelay = 100;
  let timer = null;
  let start = false;
  let percentageGap = 10;
  const percentageChange = () => {
    const currentTimestamp = (new Date()).getTime();
    if (currentTimestamp - startTimestamp >= countDelay) {
      currentPercentage++;
      startTimestamp = (new Date()).getTime();
      progress2.value = currentPercentage;
      progress2.style.background = `linear-gradient(to right, #2376b7 ${currentPercentage}%, #FFF 0%`;
    };
    if (currentPercentage < maxPercentage) {
      timer = window.requestAnimationFrame(percentageChange);
    } else {
      window.cancelAnimationFrame(timer);
    };
  };
  const clickHander = () => {
    if (!start) {
      start = true;
      percentageChange();
    };
  };
  btn.addEventListener('click', clickHander);
</script>

写完这个 demo 才发现，<input type="range" /> 并不适合做这个功能。。一个是实现困难，这个 type 组件的每个元件都可以单独修改样式，但是效果并不是很好。

另一个是因为 range 有专属语意 —— 范围，所以它更适合做下面这种事：

以上demo来自：https://developer.mozilla.org...

高级版 — progress 鸭

当然，上述两种方式都是模拟进度条，实际上我们并不需要模拟，因为 whatwg 有为我们提供原生的进度条标签 —— <progress> 。

我们先看效果：

实现如下：

<style>
  .progress3 {
    height: 20px;
    width: 300px;
    -webkit-appearance: none;
    display: block;
  }
  .progress3::-webkit-progress-value {
    background: linear-gradient(
      -45deg, 
      transparent 33%, 
      rgba(0, 0, 0, .1) 33%, 
      rgba(0,0, 0, .1) 66%, 
      transparent 66%
    ),
      linear-gradient(
        to top, 
        rgba(255, 255, 255, .25), 
        rgba(0, 0, 0, .25)
      ),
      linear-gradient(
        to left,
        #09c,
        #f44);
    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
  }
  .btn {
    margin-top: 30px;
  }
</style>
<progress id="progress3" class="progress3" max="100" value="0"></progress>
<button id="btn" class="btn">点我一下嘛～</button>
<script>
  'use strict';
  let startTimestamp = (new Date()).getTime();
  let currentPercentage = 0;
  let maxPercentage = 100;
  let countDelay = 100;
  let timer = null;
  let start = false;
  const percentageChange = () => {
    const currentTimestamp = (new Date()).getTime();
    if (currentTimestamp - startTimestamp >= countDelay) {
      currentPercentage++;
      startTimestamp = (new Date()).getTime();
      progress3.setAttribute('value', currentPercentage);
    };
    if (currentPercentage < maxPercentage) {
      timer = window.requestAnimationFrame(percentageChange);
    } else {
      window.cancelAnimationFrame(timer);
    };
  };
  const clickHander = () => {
    if (!start) {
      start = true;
      percentageChange();
    };
  };
  btn.addEventListener('click', clickHander);
</script>

虽然有原生的进度条标签，但是规范里并没有规定它的具体表现，所以各个浏览器厂商完全可以按照自己的喜好去定制，样式完全不可控，所以标签虽好。。可用性却不强，有点可惜。

终极版 — meter 赛高

当然，能够实现进度条功能的标签，除了上面所说的，还有 <meter> 标签。先看效果：

代码如下：

<style>
  .progress4 {
    display: block;    
    font: inherit;
    height: 50px;
    width: 300px;
    pointer-events: none;
  }
  .btn {
    margin-top: 30px;
  }
</style>
<meter id="progress4" class="progress4" low="60" high="80" min="0" max="100" value="0"></meter>
<button id="btn" class="btn">点我一下嘛～</button>
<script>
  'use strict';
  let startTimestamp = (new Date()).getTime();
  let currentPercentage = 0;
  let maxPercentage = 100;
  let countDelay = 100;
  let timer = null;
  let start = false;
  const percentageChange = () => {
    const currentTimestamp = (new Date()).getTime();
    if (currentTimestamp - startTimestamp >= countDelay) {
      currentPercentage++;
      startTimestamp = (new Date()).getTime();
      progress4.value = currentPercentage;
    };
    if (currentPercentage < maxPercentage) {
      timer = window.requestAnimationFrame(percentageChange);
    } else {
      window.cancelAnimationFrame(timer);
    };
  };
  const clickHander = () => {
    if (!start) {
      start = true;
      percentageChange();
    };
  };
  btn.addEventListener('click', clickHander);
</script>

这个标签可能比较陌生，实际上它跟 <input type="range"> 的语义是一样的，用来显示已知范围的标量值或者分数值。不一样的就是。。。它样式改起来更麻烦。

总结

本文测评了4种实现进度条的方式，得出的结论就是 —— <div> 赛高。。。虽然有的时候想优雅一点追求标签语义化，但是资源不支持，也很尴尬。

嗯，万能的 <div> 。

以上 demo 都可以我的 codepen 上查看：https://codepen.io/krischan77...

今年已经 90 岁的以色列科学家 Jacob Ziv 获得了 2021 年IEEE荣誉奖章。

他是 Lempel-Ziv 压缩算法的幕后推手，与 Abraham Lempel 开发了两个无损耗的数据压缩算法: 1977年的 Lempel-Ziv 77和次年的 LZ78。这两个程序能够从压缩的数据中完美地重建数据，并且比以前的算法更有效。它们允许开发 GIF、PNG 和 ZIP 文件。

简单的说就是，你能和朋友发表情包斗图，都是靠他的算法。

90 岁获得 IEEE 最高荣誉

IEEE 的奖项分为三个级别，IEEE 奖章、 IEEE 技术领域奖和 IEEE 荣誉奖章。Jacob Ziv 获得的荣誉奖章是其中最高级别的奖项。

Jacob Ziv 和 Abraham Lempel 开发了以他们二人名字命名的 Lempel-Ziv 算法。这一算法也被称为 IEEE 的一大里程碑，至今仍在广泛使用。

支持 Jacob Ziv 获得该荣誉的一位工程师说：“Lempel-Ziv 算法是第一个成功的主要通用压缩算法，这些算法以及 Jacob Ziv 对它们的分析构成了大多数后续通用算法工作的基础。”

Jacob Ziv 开创了通用信源编码，这是一系列不需要知道任何固有信息就可以压缩数据的算法。这种算法降低了从未失真和失真数据重建图像所需的数据速率。他还提出了纠错码的低计算复杂度解码理论。

奠定通用信源编码基础，获奖无数

如今已经 90 岁的 Jacob Ziv，获得了众多荣誉，包括 1995 年的马可尼奖、2008 年的 BBVA 基金会前沿奖科学奖和 2017 年的 EMET 奖。

1931 年 11 月 27 日，Jacob Ziv 出生于以色列。1954 年和 1957 年，他分别在以色列理工学院和 D.Sc 获得了电气工程学位，1962 年获得麻省理工学院大学硕士学位。从 1955 年到 1959 年，Jacob Ziv 都在担任以色列国防部科学部的高级研究工程师，被分配到通信系统的研究和发展。1961 年至 1962 年，在麻省理工学院攻读博士学位期间，他加入了马萨诸塞州梅尔帕公司应用科学部，担任高级研究工程师，从事传播理论研究。

1962 年，Jacob Ziv 博士回到以色列国防部科学部，担任通信司司长，并兼任以色列理工学院电气工程系助理教授。从 1968 年到 1970 年，他一直是新泽西州默里山贝尔实验室的技术人员。1970 年，Jacob Ziv 加入以色列理工学院担任电气工程教授。1974 年至 1976 年任电机工程学院院长，1978 年至 1982 年任学术事务副院长。

1982 年，Jacob Ziv 当选为以色列科学院院士，并被任命为以色列科学技术学院杰出教授。1988 年，他被选为美国国家工程院的外国助理。1993 年，他被授予以色列精密科学奖（工程和技术）。同时，他还是 1976 年 到 1979 年 IEEE 信息理论最佳论文奖的获得者……

Jacob Ziv 博士因其对通用信源编码的贡献而闻名于世。

他的研究领域包括数据压缩、信息理论和统计通信等一般性课题。在他对信息论的众多重要贡献中，首创了纠错码复杂性理论。这项工作是级联编码的前身，级联编码是现代纠错编码理论的一个重要分支。他对参数估计器性能的基本 Ziv-Zakai 界的推导做出了贡献: 这是通信工程师的一个有用的设计工具。

Lempel-Ziv 算法至今都在广泛应用，是他奠定了大多数后续通用算法工作的基础。IEEE 荣誉奖章再次肯定了 Jacob Ziv 博士的贡献。

前言

当我们接手了一台或者几台服务器的时候，首先我们有必要对服务器的基本配置有所认识，这样才可以对症下药，对以后的软件部署，系统运维会有事半功倍的效果。

查询服务器的基本配置一般查询操作系统，CPU，内存，硬盘，下面进行逐一讲解。

操作系统基本配置查询

1、查看操作系统版本

#cat /etc/redhat-release这个命令主要是查看红帽发行的操作系统的版本号
[root@node5 ~]# cat /etc/redhat-release 
CentOS Linux release 7.4.1708 (Core) 
#cat /etc/issue这个命令适用于大多数linux发行版
[root@node5 ~]# cat /etc/issue
S
Kernel r on an m

2、查看操作系统内核版本

[root@node5 ~]# uname -r
3.10.0-693.el7.x86_64

3、查看操作系统详细信息

[root@node5 ~]# uname -a
Linux node5 3.10.0-693.el7.x86_64 #1 SMP Tue Aug 22 21:09:27 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux
#从上面这段输出可以看出，该服务器主机名是node5，linux内核版本是3.10.0-693.el7.x86_64，CPU是x86架构
#该命令可以查看更多信息
[root@node5 ~]# more /etc/*release 
::::::::::::::
/etc/centos-release
::::::::::::::
CentOS Linux release 7.4.1708 (Core) 
::::::::::::::
/etc/os-release
::::::::::::::
NAME="CentOS Linux"
VERSION="7 (Core)"
ID="centos"
ID_LIKE="rhel fedora"
VERSION_ID="7"
PRETTY_NAME="CentOS Linux 7 (Core)"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:centos:centos:7"
HOME_URL="https://www.centos.org/"
BUG_REPORT_URL="https://bugs.centos.org/"
CENTOS_MANTISBT_PROJECT="CentOS-7"
CENTOS_MANTISBT_PROJECT_VERSION="7"
REDHAT_SUPPORT_PRODUCT="centos"
REDHAT_SUPPORT_PRODUCT_VERSION="7"
::::::::::::::
/etc/redhat-release
::::::::::::::
CentOS Linux release 7.4.1708 (Core) 
::::::::::::::
/etc/system-release
::::::::::::::
CentOS Linux release 7.4.1708 (Core)

CPU基本配置查询

1、名词解释

[root@node5 ~]# grep 'physical id' /proc/cpuinfo | sort -u | wc -l
1

2、查看 CPU 核心数量

[root@node5 ~]# grep 'core id' /proc/cpuinfo | sort -u | wc -l
4

3、查看 CPU 线程数

#逻辑cpu数：一般情况下，逻辑cpu=物理CPU个数×每颗核数，如果不相等的话，则表示服务器的CPU支持超线程技术（HT：简单来说，它可使处理#器中的1 颗内核如2 颗内核那样在操作系统中发挥作用。这样一来，操作系统可使用的执行资源扩大了一倍，大幅提高了系统的整体性能，此时逻#辑cpu=物理CPU个数×每颗核数x2）
[root@node5 ~]# cat /proc/cpuinfo| grep "processor"|wc -l
4
[root@node5 ~]# grep 'processor' /proc/cpuinfo | sort -u | wc -l
4

4、查看 CPU 型号

[root@node5 ~]# cat /proc/cpuinfo | grep name | sort | uniq
model name  : Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
[root@node5 ~]# dmidecode -s processor-version | uniq   #使用uniq进行去重
Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz

5、查看 CPU 的详细信息

#CPU有几个核，就会输出几个重复的信息
[root@node5 ~]# cat /proc/cpuinfo
processor  : 0
vendor_id  : GenuineIntel
cpu family  : 6
model    : 142
model name  : Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
stepping  : 10
microcode  : 0x96
cpu MHz    : 2000.921
cache size  : 8192 KB
physical id  : 0
siblings  : 4
core id    : 0
cpu cores  : 4
apicid    : 0
initial apicid  : 0
fpu    : yes
fpu_exception  : yes
cpuid level  : 22
wp    : yes
flags    : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ss ht syscall nx pdpe1gb rdtscp lm constant_tsc arch_perfmon nopl xtopology tsc_reliable nonstop_tsc eagerfpu pni pclmulqdq vmx ssse3 fma cx16 pcid sse4_1 sse4_2 x2apic movbe popcnt tsc_deadline_timer aes xsave avx f16c rdrand hypervisor lahf_lm abm 3dnowprefetch tpr_shadow vnmi ept vpid fsgsbase tsc_adjust bmi1 avx2 smep bmi2 invpcid mpx rdseed adx smap clflushopt xsaveopt xsavec arat
bogomips  : 4002.00
clflush size  : 64
cache_alignment  : 64
address sizes  : 43 bits physical, 48 bits virtual
power management:

6、查看CPU的详细信息

[root@node5 ~]# lscpu
Architecture:          x86_64
CPU op-mode(s):        32-bit, 64-bit
Byte Order:            Little Endian
CPU(s):                4
On-line CPU(s) list:   0-3
Thread(s) per core:    1
Core(s) per socket:    4
Socket(s):             1
NUMA node(s):          1
Vendor ID:             GenuineIntel
CPU family:            6
Model:                 142
Model name:            Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Stepping:              10
CPU MHz:               2000.921
BogoMIPS:              4002.00
Virtualization:        VT-x
Hypervisor vendor:     VMware
Virtualization type:   full
L1d cache:             32K
L1i cache:             32K
L2 cache:              256K
L3 cache:              8192K
NUMA node0 CPU(s):     0-3
Flags:                 fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ss ht syscall nx pdpe1gb rdtscp lm constant_tsc arch_perfmon nopl xtopology tsc_reliable nonstop_tsc eagerfpu pni pclmulqdq vmx ssse3 fma cx16 pcid sse4_1 sse4_2 x2apic movbe popcnt tsc_deadline_timer aes xsave avx f16c rdrand hypervisor lahf_lm abm 3dnowprefetch tpr_shadow vnmi ept vpid fsgsbase tsc_adjust bmi1 avx2 smep bmi2 invpcid mpx rdseed adx smap clflushopt xsaveopt xsavec arat
#CPU配置总结
通过以上的查询，我们可以知道该服务器是1路4核的CPU ，CPU型号是Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz，该CPU没有超线程。

内存基本配置查询

查询服务器内存

[root@node5 ~]# free -m
              total        used        free      shared  buff/cache   available
Mem:           3941         286        3446          19         208        3407
Swap:          2047           0        2047
#注释
#linux的内存管理机制的思想包括（不敢说就是）内存利用率最大化。内核会把剩余的内存申请为cached，而cached不属于free范畴。当系统运#行时间较久，会发现cached很大，对于有频繁文件读写操作的系统，这种现象会更加明显。直观的看，此时free的内存会非常小，但并不代表可##用的内存小，当一个程序需要申请较大的内存时，如果free的内存不够，内核会把部分cached的内存回收，回收的内存再分配给应用程序。所以#对于linux系统，可用于分配的内存不只是free的内存，还包括cached的内存（其实还包括buffers）。
#对于操作系统：
#MemFree=total-used
#MemUsed  = MemTotal - MemFree
#对于应用程序：
#MemFree=buffers+cached+free

每隔3秒查询一下内存

[root@node5 ~]# free -s 3
              total        used        free      shared  buff/cache   available
Mem:        4036316      361144     3458272       19536      216900     3419776
Swap:       2097148           0     2097148
              total        used        free      shared  buff/cache   available
Mem:        4036316      361144     3458272       19536      216900     3419776
Swap:       2097148           0     2097148
              total        used        free      shared  buff/cache   available
Mem:        4036316      361144     3458272       19536      216900     3419776
Swap:       2097148           0     2097148

硬盘基本配置查询

1、查询磁盘整体使用情况

[root@node5 ~]# df -h
Filesystem               Size  Used Avail Use% Mounted on
/dev/mapper/centos-root   17G  4.1G   13G  24% /
devtmpfs                 2.0G     0  2.0G   0% /dev
tmpfs                    2.0G  8.0K  2.0G   1% /dev/shm
tmpfs                    2.0G  8.7M  2.0G   1% /run
tmpfs                    2.0G     0  2.0G   0% /sys/fs/cgroup
/dev/sda1               1014M  125M  890M  13% /boot
tmpfs                    395M     0  395M   0% /run/user/0
#命令拓展
#df -a 显示全部的文件系统的使用情况
#df -i显示inode信息
#df -k 已字节数显示区块占用情况
#df -T 显示文件系统的类型

2、查询某个目录磁盘占用情况

#命令拓展
#du -s 指定目录大小汇总
#du -h带计量单位
#du -a 含文件
#du --max-depth=1 子目录深度
#du -c 列出明细的同时，增加汇总值
[root@node5 ~]# du -sh /home/
1.7G  /home/
[root@node5 ~]# du -ach --max-depth=2 /home/
4.0K  /home/www/.bash_logout
4.0K  /home/www/.bash_profile
4.0K  /home/www/.bashrc
4.0K  /home/www/web
16K  /home/www
4.0K  /home/nginx/.bash_logout
4.0K  /home/nginx/.bash_profile
4.0K  /home/nginx/.bashrc
12K  /home/nginx
4.0K  /home/esnode/.bash_logout
4.0K  /home/esnode/.bash_profile
4.0K  /home/esnode/.bashrc
4.0K  /home/esnode/.oracle_jre_usage
4.3M  /home/esnode/elasticsearch-analysis-ik-6.2.2.zip
80M  /home/esnode/kibana-6.2.2-linux-x86_64.tar.gz
300M  /home/esnode/x-pack-6.2.2.zip
28M  /home/esnode/elasticsearch-6.2.2.tar.gz
4.0K  /home/esnode/.bash_history
294M  /home/esnode/elasticsearch-6.2.2
4.0K  /home/esnode/.ssh
4.0K  /home/esnode/x-pack生成的秘钥.txt
1014M  /home/esnode/kibana-6.2.2-linux-x86_64
8.0K  /home/esnode/.viminfo
1.7G  /home/esnode
1.7G  /home/
1.7G  total

3、查看目录结构

#tree命令默认没有安装，需要手动安装一下
[root@node5 ~]# yum -y install tree
#-L指定目录深度
[root@node5 ~]# tree -L 2 /home/
/home/
├── esnode
│   ├── elasticsearch-6.2.2
│   ├── elasticsearch-6.2.2.tar.gz
│   ├── elasticsearch-analysis-ik-6.2.2.zip
│   ├── kibana-6.2.2-linux-x86_64
│   ├── kibana-6.2.2-linux-x86_64.tar.gz
│   ├── x-pack-6.2.2.zip
│   └── x-pack347224237346210220347232204347247230351222245.txt
├── nginx
└── www
    └── web
6 directories, 5 files

4、以树状的格式显示所有可用的块设备信息

[root@node5 ~]# lsblk
NAME            MAJ:MIN RM  SIZE RO TYPE MOUNTPOINT
sda               8:0    0   20G  0 disk 
├─sda1            8:1    0    1G  0 part /boot
└─sda2            8:2    0   19G  0 part 
  ├─centos-root 253:0    0   17G  0 lvm  /
  └─centos-swap 253:1    0    2G  0 lvm  [SWAP]
sdb               8:16   0    1G  0 disk 
└─sdb1            8:17   0  200M  0 part 
sr0              11:0    1 1024M  0 rom
#注释
#NAME —— 设备的名称
#MAJ:MIN —— Linux 操作系统中的每个设备都以一个文件表示，对块（磁盘）设备来说，这里用主次设备编号来描述设备。
#RM —— 可移动设备。如果这是一个可移动设备将显示 1，否则显示 0。
#TYPE —— 设备的类型
#MOUNTPOINT —— 设备挂载的位置
#RO —— 对于只读文件系统，这里会显示 1，否则显示 0。
#SIZE —— 设备的容量

列出所有可用的设备、通用唯一识别码（UUID）、文件系统类型以及卷标

[root@node5 ~]# blkid
/dev/sda1: UUID="6503b4ad-2975-4152-a824-feb7bea1b622" TYPE="xfs" 
/dev/sda2: UUID="nqZ4uJ-ksnN-KzYS-N42b-00m3-Ohc2-BJXunP" TYPE="LVM2_member" 
/dev/sdb1: UUID="94396e17-4821-4957-aa76-d41f33958ff5" TYPE="xfs" 
/dev/mapper/centos-root: UUID="c1d38b37-821d-48e7-8727-3937ccc657a4" TYPE="xfs" 
/dev/mapper/centos-swap: UUID="c2fcaf11-42d8-4e4c-bf9e-6464f0777198" TYPE="swap"

转自：人生的哲理
来源：https://www.cnblogs.com/rensh...