如何获取 Screen、Window、Page 等组件的宽高？


Performance API 是一个浏览器提供的 API，可用于测量和分析 Web 应用程序的性能。下面是使用 Performance API 的一般步骤：

- 获取 Performance 对象：使用 window.performance 属性可以获取 Performance 对象。
- 使用 Performance.timing 属性获取时间信息：Performance.timing 属性返回一个对象，其中包含了各种时间信息，例如页面加载时间、DNS 解析时间等等。
- 使用 Performance.navigation 属性获取导航信息：Performance.navigation 属性返回一个对象，其中包含了导航信息，例如重定向次数等等。
- 使用 Performance.mark()方法进行标记：Performance.mark()方法可用于在代码中标记关键点，例如页面开始加载和结束加载。这样可以方便地跟踪代码执行的性能。
- 使用 Performance.measure()方法进行测量：Performance.measure()方法可用于测量两个标记之间的时间差，例如页面加载时间。
- 使用 Performance.getEntries()方法获取性能条目：Performance.getEntries()方法返回一个包含所有性能条目的数组，可以使用它来获取更详细的性能数据。

下面是一个简单的示例，演示如何使用 Performance API 测量页面加载时间：

```javascript
// 获取Performance对象
const performance = window.performance

// 在代码中标记关键点
performance.mark('start')

// 当页面加载完成后，再次标记关键点
window.addEventListener('load', () => {
  performance.mark('end')

  // 测量页面加载时间
  performance.measure('loadTime', 'start', 'end')

  // 获取性能条目
  const entries = performance.getEntries()

  // 打印页面加载时间
  console.log('页面加载时间:', entries[0].duration)
})
```

> Performance API 的可用性和功能因浏览器而异，因此在使用它时需要进行兼容性测试

除了上述基本的使用方法外，Performance API 还提供了一些其他的功能，例如：

- Performance.now()方法：Performance.now()方法返回从页面加载开始到当前时间的毫秒数，可用于测量代码执行时间。
- Performance.memory 属性：Performance.memory 属性返回一个对象，其中包含了内存使用情况的信息，例如当前内存使用量和总内存使用量。
- PerformanceObserver 接口：PerformanceObserver 接口可用于监视 Performance API 中的事件和条目，例如资源加载事件和用户交互事件。

下面是一个简单的示例，演示如何使用 PerformanceObserver 接口监视页面中的资源加载事件：

```javascript
// 获取Performance对象
const performance = window.performance

// 创建PerformanceObserver对象
const observer = new PerformanceObserver((list) => {
  // 获取所有资源加载事件的条目
  const entries = list
    .getEntries()
    .filter((entry) => entry.entryType === 'resource')

  // 打印每个资源的加载时间
  entries.forEach((entry) => {
    console.log(`${entry.name}的加载时间为${entry.duration}毫秒`)
  })
})

// 开始监视资源加载事件
observer.observe({type: 'resource', buffered: true})
```

在这个示例中，我们使用 PerformanceObserver 接口创建了一个观察器，监视所有资源加载事件的条目，并打印每个资源的加载时间。请注意，要监视 Performance API 中的事件和条目，需要使用 PerformanceObserver 接口。

除了前面提到的功能之外，Performance API 还提供了一些高级功能，例如：

- Navigation Timing Level 2：Navigation Timing Level 2 是 Performance API 的一个扩展，提供了更详细的导航信息和时间信息。例如，它可以提供更准确的页面加载时间、页面卸载时间和重定向时间等信息。
- Long Tasks API：Long Tasks API 可用于测量页面上执行时间较长的任务，例如 JavaScript 代码或布局计算。这可以帮助开发人员识别和优化慢速操作。
- Paint Timing API：Paint Timing API 可用于测量页面上的绘制时间，例如首次绘制时间和重绘时间。这可以帮助开发人员识别和优化页面绘制问题。
- User Timing API：User Timing API 可用于在代码中创建自定义的时间标记和测量，例如代码块的执行时间和用户交互时间。这可以帮助开发人员更精细地测量代码执行性能。

下面是一个简单的示例，演示如何使用 User Timing API 测量代码块的执行时间：

```javascript
// 获取Performance对象
const performance = window.performance

// 在代码中标记关键点
performance.mark('start')

// 执行一个耗时的代码块
for (let i = 0; i < 1000000000; i++) {}

// 再次标记关键点
performance.mark('end')

// 测量代码块的执行时间
performance.measure('代码块执行时间', 'start', 'end')

// 获取性能条目
const entries = performance.getEntries()

// 打印代码块的执行时间
console.log('代码块执行时间:', entries[0].duration)
```

在这个示例中，我们使用 User Timing API 在代码中标记了关键点，并测量了执行时间。请注意，User Timing API 可以在代码中创建自定义的时间标记和测量，从而更精细地测量代码执行性能。

总的来说，Performance API 提供了很多有用的功能，可以帮助开发人员识别和解决 Web 应用程序中的性能问题。开发人员可以根据应用程序的需求选择适合的 API 和方法，从而优化 Web 应用程序的性能。


Performance API是一个浏览器提供的API，可用于测量和分析Web应用程序的性能

Performance API


## typeof

> 用于判断操作数的数据类型，适用于除 null、object 的其他 5 种类型的判断。

1. 对于基本类型，除 null 以外，均可以返回正确的结果。
2. 对于引用类型，除 function 以外，一律返回 object 类型。
3. 对于 null ，返回 object 类型。
4. 对于 function 返回 function 类型。

```js
typeof undefined // "undefined";
typeof 1 // "number";
typeof '1' // "string";
typeof true // "boolean";
typeof Symbol() // "symbol";
typeof {a: 1} // "object";

typeof null === 'object' // true
typeof function () {} === 'function' // true
```

## instanceof

> 用于判断是对象的那个子类型

```js
;[1, 2] instanceof Array // true
;(function foo() {} instanceof Function) // true
new Date(2018) instanceof Date // true
new Number(1) instanceof Number // true
1 instanceof Number // false
```

a instanceof b，instanceof 会去查找 a 的原型链(这里不展开讨论)上是否有 b 的 prototype 属性；如果有，就返回 true，否则返回 false。即判断 a 的原型链上是否有 a.\_proto\_\_ === b.prototype 返回 true

## constructor

> 不仅可以用于对象子类型的判断，还可以用于基本类型的判断，返回创建实例对象的 Object 构造函数的引用，原始数据类型，constructor 只读，基本类型指向对应的内置对象的构造函数

```js
;({a: 1}.constructor === Object) // true
;[1, 2].constructor === Array // true
new Date(2018).constructor === Date // true
;(function foo() {}.constructor === Function) // true
'1'.constructor === String // true
;(1).constructor === Number // true
true.constructor === Boolean // true
```

## prototype

> Object.prototype.toString.call('...')，通用方法判断对象类型。 Object.prototype 表示 Object 的原型对象，toString 返回表示该对象的字符串，call 用于指定 this

```js
Object.prototype.toString.call('1') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call([1, 2, 3]) // "[object Array]"
Object.prototype.toString.call(function foo() {}) // "[object Function]"
Object.prototype.toString.call(null) //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
```


类型判断


“gzip”命令的快速指南，用于压缩文件

gzip 命令可以在 Linux、macOS、WSL 和任何有 UNIX 环境的地方使用。

您可以使用 gzip 命令使用名为[LZ77](https://en.wikipedia.org/wiki/LZ77_and_LZ78)的 gzip 压缩协议压缩文件。

## 使用方法

```bash
gzip filename
```

这将压缩文件，并向其附加一个.gz 扩展名，原始文件将被删除。为了防止出现这种情况，可以使用`-C`选项并使用输出重定向将输出写入文件名.gz 文件：

```bash
gzip -c filename > filename.gz
```

-C 选项指定输出将转到标准输出流，保留原始文件不变

同时也可以使用-K 选项

```bash
gzip -k filename
```

压缩越多，压缩（和解压缩）所需的时间就越长。级别范围从 1（最快、最差的压缩）到 9（最慢、更好的压缩），默认值为 6。您可以使用-`<NUMBER>`选项选择特定级别：

```bash
gzip -1 filename
```

压缩多文件

```bash
gzip filename1 filename2
```

使用-r 选项递归地压缩目录中的所有文件：

```bash
gzip -r a_folder
```

-v 选项打印压缩百分比信息。下面是一个与-k（keep）选项一起使用的示例：

![fvzBBf](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/fvzBBf.png)

gzip 还可以用于解压缩文件，使用-d 选项：

```bash
gzip -d filename.gz
```


“gzip”命令的快速指南，用于压缩文件

Linux命令gzip


import CanIUse from 'components/CanIUse.tsx'

## Battery Api

> 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件，Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个 battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。

<CanIUse tag="will-change" />

## 方法

- chargingchange
- levelchange
- chargingtimechange
- dischargingtimechange

```js
navigator.getBattery().then(function (battery) {
  console.log('Battery charging? ' + (battery.charging ? 'Yes' : 'No'))
  console.log('Battery level: ' + battery.level * 100 + '%')
  console.log('Battery charging time: ' + battery.chargingTime + ' seconds')
  console.log(
    'Battery discharging time: ' + battery.dischargingTime + ' seconds'
  )

  battery.addEventListener('chargingchange', function () {
    console.log('Battery charging? ' + (battery.charging ? 'Yes' : 'No'))
  })

  battery.addEventListener('levelchange', function () {
    console.log('Battery level: ' + battery.level * 100 + '%')
  })

  battery.addEventListener('chargingtimechange', function () {
    console.log('Battery charging time: ' + battery.chargingTime + ' seconds')
  })

  battery.addEventListener('dischargingtimechange', function () {
    console.log(
      'Battery discharging time: ' + battery.dischargingTime + ' seconds'
    )
  })
})
```

![r63S43](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/r63S43.png)

[chrome-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/CDWccX.jpg
[firefox-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mqRvLw.jpg
[ie-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/uKn6gH.jpg
[opera-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mpzJp6.jpg
[safari-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mIxpPG.jpg
[edge-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/aoF7l0.jpg


Battery Api提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件

Battery Api


文本和排版（Typography）是网页设计和开发中非常重要的方面。以下是对这两个主题的详细解释：

文本（Text）是指在网页上显示的字母、数字、符号和其他字符的组合。网页设计师和开发人员可以使用 CSS 来控制文本的外观、布局和样式。以下是一些常见的文本属性：

- 字体属性（font）：控制文本的字体、字号、字重和字形。可以使用 Web 安全字体或自定义字体。
- 颜色属性（color）：控制文本的颜色。可以使用命名颜色、RGB 值、十六进制值或 HSL 值来定义颜色。
- 行高属性（line-height）：控制文本行之间的间距。设置行高可以提高文本的可读性。
- 字距属性（letter-spacing）：控制字母之间的距离。
- 文本对齐属性（text-align）：控制文本在其容器中的对齐方式。

排版（Typography）是指使用字体、排版和排版技巧来设计和布局文本。以下是一些常见的排版技巧：

- 字体选择：选择字体可以根据设计要求选择合适的字体，同时，要考虑可读性和可访问性。例如，sans-serif 字体更容易阅读，而 serif 字体通常用于印刷品。
- 行距：设置适当的行距可以提高文本的可读性。
- 段落间距：适当的段落间距可以使文本更易于阅读。
- 列宽：将文本限制在较窄的列宽中，可以使文本更易于阅读和理解。
- 字母大小写：使用适当的字母大小写可以改善文本的可读性和可访问性。


css - Text and Typography


## 文档(Documentation)

MDN (Mozilla) JavaScript 参考是带有示例和其他信息的主要文档。

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript.)

## 兼容性(Compatibility tables)

由于 `JavaScript` 是一门持续开发中的语言，所以会定期添加新的特性，其中一些特性可能不会被所有的浏览器或引擎所支持。下面的网站可以帮助你识别哪些功能是由哪些浏览器/引擎或浏览器版本等所支持的。

- [Can i Use](https://caniuse.com/#search=javascript)
- [Compat Table](https://kangax.github.io/compat-table)

## 编辑器(IDE's)

一些比较热门的编辑器

- [Sublime Text](https://www.sublimetext.com/)
- [Atom](https://atom.io/)
- [WebStorm](https://www.jetbrains.com/webstorm/)
- [Visual Studio Code](https://code.visualstudio.com/)

## 教程(Tutorials / Courses)

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
- [The Modern Javascript Tutorial](https://javascript.info/)
- [Getting Started with JavaScript for Web Development Courses](https://scotch.io/courses/getting-started-with-javascript-for-web-development)
- [ES6-features.org](http://es6-features.org/)
- [JavaScript Tutorial](https://www.javascripttutorial.net/)
- [ES6 Tutorial](https://www.javascripttutorial.net/es6/)
- [Intro to ES6](https://scrimba.com/learn/introtoes6)
- [Tutorials Point - ES6 for beginners](https://www.tutorialspoint.com/es6/index.htm)
- [JavaScript Free Resources](https://www.java5cript.com/)

## 视频(Videos/ Courses)

- [Learn JavaScript - Full Course for Beginners - Video By freecodecamp.org](https://www.youtube.com/watch?v=PkZNo7MFNFg&list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V&ab_channel=freeCodeCamp.orgfreeCodeCamp.orgVerified)
- [ES6 - JavaScript Improved](https://www.udacity.com/course/es6-javascript-improved--ud356)
- [Javascript Essentials](https://www.udemy.com/course/javascript-essentials/)
- [Learning ECMAScript The Next Generation of Javascript](https://www.udemy.com/course/ecmascript2015/)

## 书籍(Books)

- [Eloquent JavaScript](https://eloquentjavascript.net/)
- [Understanding ECMAScript 6](http://superherojs.com/)
- [JavaScript the Good Parts](https://andersonguelphjs.github.io/OReilly_JavaScript_The_Good_Parts_May_2008.pdf)
- [Speaking JavaScript](http://speakingjs.com/es5/index.html)

## 练习(Learn JavaScript by building small projects)

- [30 Day Vanilla JS Coding Challenge](https://javascript30.com/)
- [Learn Javascript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/)
- [24days of christmas](https://scrimba.com/learn/adventcalendar/welcome-to-24-days-of-javascriptmas-cg2QbehG)
- [Learn JavaScript](https://scrimba.com/learn/learnjavascript)
- [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
- [Freecodecamp.org](https://www.freecodecamp.org/)
- [Build a Quiz App with HTML, CSS, and JavaScript](https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/)
- [Smarter Way to learn JavaScript](http://www.asmarterwaytolearn.com/js/index-of-exercises.html)
- [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript)
- [Learn JavaScript Online](https://learnjavascript.online/)
- [learn-js.org interactive JavaScript tutorial.](https://www.learn-js.org/en/)

## GitHub

- [Javascript Algorithm and Data Structures](https://github.com/trekhleb/javascript-algorithms)
- [33 JS Concepts](https://github.com/leonardomso/33-js-concepts)
- [20+ Web Projects With Vanilla JavaScript](https://github.com/bradtraversy/vanillawebprojects)
- [50 Projects in 50 Days - HTML/CSS and JavaScript](https://github.com/bradtraversy/50projects50days)
- [JavaScript Style Guide](https://blog.kritikapattalam.com/[https://github.com/airbnb/javascript)
- [30 seconds of code](https://github.com/30-seconds/30-seconds-of-code)
- [30 Day Vanilla JS Coding Challenge](https://github.com/wesbos/JavaScript30)
- [Clean Code Javascript](https://github.com/ryanmcdermott/clean-code-javascript)
- [Javascript Questions](https://github.com/lydiahallie/javascript-questions)
- [The Algorithms - JavaScript](https://github.com/TheAlgorithms/Javascript)

## 编程挑战(Programming Challenges)

- [Hackerrank](https://www.hackerrank.com/)
- [Coding Game](https://www.codingame.com/)
- [Leet Code](https://www.hackerrank.com/)
- [Coder Byte](https://coderbyte.com/)
- [Exercism](https://exercism.io/my/tracks/javascript)
- [Elevator Saga](http://play.elevatorsaga.com/)
- [Code Wars](https://www.codewars.com/)

## 在线编辑器(Coding Ground)

- [Codepen](https://codepen.io/)
- [Js fiddle](https://jsfiddle.net/)
- [Tutorials Point Coding Ground.](https://www.tutorialspoint.com/codingground.htm)
- [CodeSandBox](https://codesandbox.io/)

## 博客(Blogs)

- [Dmitri Pavlutin](https://dmitripavlutin.com/)
- [David Walsh](https://davidwalsh.name/)
- [SuperHero.JS](https://superherojs.com/)
- [Medium](https://medium.com/)
- [dev.to](https://dev.to/)
- [Hashnode](https://hashnode.com/)
