> 最近在使用微软AI聊天工具Bing时，发现一个有趣的东西。我向它提问后，它在持续输出的过程中，如果我离开了当前它的浏览器会话，比如切屏，看当前浏览器的其它标签页，它会默认停止它的输出，等我回来它才继续。我们来探讨一下这个现象的实现方式，以及它的作用。




## 什么是浏览器的可见性API

浏览器的可见性`API`是一种`JavaScript`的接口，它可以让你知道一个页面什么时候是隐藏的，什么时候是显示的。

当用户最小化窗口或切换到另一个标签页时，`API`会发送`visibilitychange`事件，让监听者知道页面的状态已发生变化。你可以检测到该事件并执行某些操作或采取不同的行为。例如，如果你的`web`应用正在播放视频，当用户将标签页放到后台时，它可以暂停视频，当用户返回标签页时，它又可以恢复播放。

浏览器的可见性`API`可以让你在页面不可见时避免执行不必要的任务，这对于节省资源和提高性能特别有用。例如，你可以在页面隐藏时停止动画或轮询服务器，从而减少`CPU`和网络的消耗。

## 如何使用浏览器的可见性API

要使用浏览器的可见性`API`，你需要了解以下几个概念：

- **`document.hidden`属性**：这是一个只读的布尔值，如果页面处于隐藏状态，则返回`true`，否则返回false。
- **`document.visibilityState`属性**：这是一个只读的字符串，表示页面的当前可见性状态。可能的值有：
    - **`visible`**：页面内容至少部分可见。在实践中，这意味着页面是非最小化窗口的前景选项卡。
    - **`hidden`**：页面内容对用户不可见，原因可能是文档标签页在后台或属于最小化窗口的一部分，也可能是设备屏幕关闭。
    - **`prerender`**：页面正在预渲染，尚未对用户可见。这个状态只在支持预渲染的浏览器中存在，比如Chrome。
    - **`unloaded`**：页面正在从内存中卸载。这个状态只在支持页面卸载事件的浏览器中存在，比如`Firefox`。

- **`visibilitychange`事件**：这是一个事件，当页面的可见性状态发生变化时触发。你可以给`document`对象添加一个事件监听器，来处理这个事件。

## 浏览器的可见性API的示例

下面是一个简单的示例，用浏览器的可见性`API`来实现一个简单的数据绑定，当页面可见时，显示当前的时间，当页面隐藏时，停止更新时间：

```html
<html>
<head>
  <style>
    #time {
      font-size: 36px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="time"></div>
  <script>
    // 获取页面上的元素
    let timeElement = document.getElementById("time");

    // 定义一个变量，用来存储定时器的ID
    let timerId = null;

    // 定义一个函数，用来更新时间
    function updateTime() {
      // 获取当前的时间
      let now = new Date();
      // 格式化时间为HH:MM:SS
      let timeString = now.toTimeString().slice(0, 8);
      // 更新页面上的元素的内容
      timeElement.textContent = timeString;
    }

    // 定义一个函数，用来处理页面可见性变化的事件
    function handleVisibilityChange() {
      // 如果文档变为可见，更新时间并启动定时器
      if (document.visibilityState === "visible") {
        updateTime();
        timerId = setInterval(updateTime, 1000);
      }
      // 如果文档变为隐藏，清除定时器
      else if (document.visibilityState === "hidden") {
        clearInterval(timerId);
      }
    }

    // 监听文档的可见性变化事件
    document.addEventListener("visibilitychange", handleVisibilityChange);

    // 启动定时器
    timerId = setInterval(updateTime, 1000);
  </script>
</body>
</html>
```

你可以在浏览器中运行这个代码，然后切换标签页或最小化窗口，看看页面上的时间的变化。

## 浏览器的可见性API的应用场景

浏览器的可见性`API`有很多有用的应用场景，比如：

- 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
- 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
- 页面想要检测何时正在预渲染，以便可以准确的计算页面浏览量。
- 当设备进入待机模式（用户按下电源键关闭屏幕）时，网站想要关闭设备声音。

## 浏览器的可见性API的兼容性和注意事项

浏览器的可见性`API`是一个比较新的特性，它在大多数现代浏览器中都有支持，但在一些老版本的浏览器中可能不兼容。如果你想让你的代码在不支持的浏览器中也能运行，你可以使用一些`polyfill`或`shim`的方法。

另外，你还需要注意以下几点：

- 浏览器的可见性`API`只能检测页面是否处于前台或后台，不能检测页面是否被遮挡或半透明。
- 浏览器的可见性`API`只能检测标签页的可见性，不能检测`<iframe>`的可见性。如果你想检测`<iframe>`的可见性，你需要在`<iframe>`内部的文档中使用浏览器的可见性API。
- 浏览器的可见性`API`不能检测用户是否真的在关注页面，只能检测页面是否有可能被用户看到。如果你想检测用户是否真的在关注页面，你可能需要使用其他的方法，比如检测用户的鼠标或键盘活动，或者使用`WebGazer.js`等工具来实现眼球追踪。


## 总结

浏览器的可见性`API`是一种`JavaScript`的接口，它可以让你知道一个页面什么时候是隐藏的，什么时候是显示的。

你可以使用`document.hidden`和`document.visibilityState`属性来获取页面的可见性状态，也可以使用`visibilitychange`事件来监听页面的可见性变化。

浏览器的可见性`API`可以让你在页面不可见时避免执行不必要的任务，从而节省资源和提高性能。浏览器的可见性`API`有很多有用的应用场景，比如暂停视频，停止轮播，关闭声音等。浏览器的可见性`API`在大多数现代浏览器中都有支持，但在一些老版本的浏览器中可能不兼容，你可以使用一些`polyfill`或`shim`的方法来解决这个问题。

浏览器的可见性`API`还有一些注意事项，比如不能检测页面是否被遮挡或半透明，不能检测`<iframe>`的可见性，不能检测用户是否真的在关注页面等。

如何利用浏览器的可见性API优化网站性能

> 之前的博文中，已经跟大家介绍过，微信小程序云开发如何实现单条件单字段的模糊查询，这个是很常见的业务需求。在一些更复杂的场景下，我们需要实现多条件多字段的模糊查询，比如同时兼容对商品名称、类别、产地等多条件的模糊查询。我们看一下云开发如何实现。




## 什么是多条件模糊查询（与、或）

在实际的项目开发时，我们经常需要根据用户输入的多个条件进行数据库查询。而模糊查询是指根据一部分信息来查找数据库中的记录，而不是完全匹配。多条件模糊查询则是在这个基础上，结合多个条件进行查询。

而多条件模糊查询又分"与"和"或"。

"与"操作，就是我们多个条件的模糊查询，同时满足才会被查询到。而"或"操作，就是我们多个条件的模糊查询，只要能对上一个满足的条件，就会被查询到。

例如，我们在对商品的名称、类别、产地进行查询时，要筛选名称中包含"果"，类别包含"水"，产地包含"河"的条件。"与"操作就需要数据同时满足这三个模糊查询的条件，"或"操作就是满足一个即可。

## 云开发如何实现多条件模糊查询的"与"操作


![image.png](https://creatorblog.cn/static/img/055a2be58ea1d32fc8f330f083daf64a.image.webp)

假设我们有一个存储商品信息的数据库集合 `products`，其中每个商品有 `name`（商品名称）和 `category`（商品类别）两个字段。我们希望用户可以同时输入商品名称和类别进行查询，匹配同时满足的数据。

在云函数中，可以新建`searchData`函数使用以下代码实现多条件同时满足的模糊查询：

```js
// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init();

const db = cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
  const { name, category } = event;
  try {
    const result = await db.collection('products')
      .where(
        db.command.and([
          {
            name: db.RegExp({
              regexp: name,
              options: 'i',
            }),
          },
          {
            category: db.RegExp({
              regexp: category,
              options: 'i',
            }),
          },
        ])
      )
      .get();
    return result.data;
  } catch (err) {
    console.error(err);
    return err;
  }
};
```

在小程序页面中请求云函数：

```js
Page({
    data: {
        name: '',
        category: '',
        searchResult: []
    },
    
   onNameInput(e) {
    this.setData({
      name: e.detail.value
    })
   },
   
   onCategoryInput(e) {
    this.setData({
      category: e.detail.value
    })
   },
    
    async searchData() {
        const { name, category } = this.data;
        if (name.trim().length === 0 && category.trim().length === 0) {
          wx.showToast({
            title: '请输入搜索关键词',
            icon: 'none'
          })
          return;
        }
        wx.showLoading({
          title: '搜索中...',
        })
        try {
          const res = await wx.cloud.callFunction({
            name: 'searchData',
            data: {
              name,
              category,
            }
          });
          this.setData({
            searchResult: res.result
          })
        } catch (err) {
          console.error(err)
          wx.showToast({
            title: '搜索失败',
            icon: 'none'
          })
        } finally {
          wx.hideLoading()
        }
    }
})
```

## 云开发如何实现多条件模糊查询的"或"操作

单一满足和同时满足在实现方式上，只有一点点区别，在使用云数据库API时，同时满足是`db.command.and()`，单一满足是`db.command.or()`。


![image.png](https://creatorblog.cn/static/img/cb2eccac68cdfef48855f3445e6c8d3f.image.webp)

例如：

```js
// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init();

const db = cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
  const { name, category } = event;
  try {
    const result = await db.collection('products')
      .where(
        db.command.or([
          {
            name: db.RegExp({
              regexp: name,
              options: 'i',
            }),
          },
          {
            category: db.RegExp({
              regexp: category,
              options: 'i',
            }),
          },
        ])
      )
      .get();
    return result.data;
  } catch (err) {
    console.error(err);
    return err;
  }
};
```



## 总结

通过以上的方法，我们可以实现在微信小程序云开发中进行多条件模糊查询。

首先要清楚了解自己的业务场景，在多条件查询的前提下，是需要同时满足，还是单一满足。再选择对应的云数据库API `db.command.or` 和 `db.command.and`,  搭配 `db.RegExp`使用，即可灵活实现既定的需求。这种方式不仅提高了查询的灵活性，也为用户提供了更好的搜索体验。

微信小程序云开发如何实现多条件模糊查询

> 微信官方自从推出微信小程序云开发之后，让小程序开发的门槛再次降低，你可以不需要掌握任何后端的语言和数据库，有一些js的基本功，就可以完成一个完整带前后端交互功能的小程序项目。今天我们介绍一个日常开发中非常常见的需求，就是实现模糊查询，这个主要是后端做的，我们看看云开发如何实现。





## 什么是模糊查询

在数据库操作中，模糊查询是一种常见的数据搜索方式，它允许我们根据指定的关键词来匹配数据库中的记录，而不需要完全匹配关键词。模糊查询通常用于处理用户输入的搜索关键词，使得搜索更加灵活和智能。

例如，当用户在前端页面中的某个搜索框中输入"苹果"，如果是非模糊查询，就必须精确匹配到某个字段的值为"苹果"。而如果是模糊查询，只要某个字段的值内包含"苹果"都会被查询到，比如："苹果手机、苹果笔记本、苹果耳机"等。

## 云开发如何实现模糊查询

在微信小程序中，我们可以借助云开发的数据库服务来实现模糊查询。以下是实现模糊查询的步骤：

### 初始化云开发环境

首先，在小程序的`app.js`文件中初始化云开发环境：

```js
// app.js
App({
  onLaunch: function () {
    // 初始化云开发环境
    wx.cloud.init({
      env: 'your-cloud-environment-id',
    })
  }
})

```

### 在云开发控制台创建集合

在云开发控制台中创建一个集合（类似于关系型数据库中的表），用于存储需要进行模糊查询的数据。

![image.png](https://creatorblog.cn/static/img/44ec727c6277c759cddfaa2ffcac5f1a.image.webp)

### 编写模糊查询的云函数

在小程序的`cloudfunctions`目录下创建一个新的云函数，例如`searchData`。

![image.png](https://creatorblog.cn/static/img/7224cd6a38155ab0586a29e967950c27.image.webp)
在该云函数的`index.js`文件中编写模糊查询的代码：

```js
// cloudfunctions/searchData/index.js
const cloud = require('wx-server-sdk')
cloud.init()

const db = cloud.database()
const _ = db.command

exports.main = async (event, context) => {
  // 用户输入的内容
  const { keyword } = event
  try {
    const result = await db.collection('your-collection-name').where({
      name: db.RegExp({
        regexp: keyword,
        options: 'i', // 不区分大小写
      })
    }).get()
    
    // 返回搜索到的结果
    return result.data;
  } catch (err) {
    console.error(err)
    return err;
  }
}

```

在上面的代码中，`name`是需要进行模糊查询的字段，`keyword`是用户输入的搜索关键词。`db.RegExp`会根据用户输入的关键词构造一个正则表达式，实现模糊匹配。


### 在小程序页面调用云函数进行模糊查询

在小程序的页面中，当用户输入搜索关键词后，调用上面创建的云函数进行模糊查询：

```js
// pages/index/index.js
Page({
  data: {
    keyword: '',
    searchResult: []
  },
  onKeywordInput(e) {
    this.setData({
      keyword: e.detail.value
    })
  },
  async search() {
    const { keyword } = this.data;
    if (keyword.trim() === '') {
      wx.showToast({
        title: '请输入搜索关键词',
        icon: 'none'
      })
      return;
    }
    wx.showLoading({
      title: '搜索中...',
    })
    try {
      const res = await wx.cloud.callFunction({
        name: 'searchData',
        data: {
          keyword,
        }
      });
      this.setData({
        searchResult: res.result
      })
    } catch (err) {
      console.error(err)
      wx.showToast({
        title: '搜索失败',
        icon: 'none'
      })
    } finally {
      wx.hideLoading()
    }
  }
})
```

在上面的代码中，`onKeywordInput`函数用于监听用户输入的搜索关键词，`search`函数用于调用云函数进行模糊查询，并将查询结果保存到`searchResult`中，供页面渲染显示。


## 总结

通过云开发，我们可以轻松实现小程序中的模糊查询功能。首先，我们需要在云开发控制台创建集合，并在云函数中编写模糊查询的代码。然后，在小程序页面中调用云函数，传入用户输入的关键词，即可获取模糊查询的结果。这种方式简单而高效，为小程序开发提供了强大的数据库支持，使得数据操作更加便捷和灵活。

微信小程序云开发如何优雅的实现模糊查询

> 渐变色是一种在网页设计中非常常见的视觉效果，它可以为网站带来更加丰富多彩的外观。在网页设计中，我们通常会用到渐变色来实现背景、边框和文字的颜色渐变。本文将介绍如何使用CSS来实现背景、边框和文字的渐变色效果。





## 背景渐变色

要实现背景的渐变色效果，可以使用`CSS`的`background`属性。以下是一个示例代码，实现了从红色到蓝色的背景渐变效果：

```css
.gradient-background {
    background: linear-gradient(to right, red, blue);
}
```

在这个示例中，`linear-gradient`函数用于创建一个线性渐变。`to right`表示渐变的方向是从左到右，`red`和`blue`分别表示渐变的起始和结束颜色。

## 边框渐变色

要实现边框的渐变色效果，可以使用`CSS`的`border`属性。以下是一个示例代码，实现了从绿色到橙色的边框渐变效果：

```css
.gradient-border {
    border: 5px solid;
    border-image: linear-gradient(to right, green, orange);
    border-image-slice: 1;
}
```

在这个示例中，`border`属性设置了一个5像素宽的边框，`border-image`属性用于指定边框的图片。`linear-gradient`函数创建了一个从绿色到橙色的线性渐变，`border-image-slice`属性设置了边框的分割方式。

## 文字渐变色

要实现文字的渐变色效果，可以使用`CSS`的`background`属性和`background-clip`属性。以下是一个示例代码，实现了从紫色到黄色的文字渐变效果：

```css
.gradient-text {
    background: linear-gradient(to right, purple, yellow);
    -webkit-background-clip: text;
    color: transparent;
}
```

在这个示例中，`background`属性创建了一个从紫色到黄色的线性渐变。`-webkit-background-clip: text;`属性将背景渐变色限制在文字的区域内，`color: transparent;`将文字颜色设置为透明，从而显示背景渐变色。

## 总结

以上就是实现背景、边框和文字的渐变色效果的方法。你可以根据自己的需求调整渐变色的颜色、方向和样式，以及边框的宽度和分割方式，从而实现各种各样的渐变效果。

CSS如何实现背景、边框、文字的渐变色

> 大多数初级前端程序员，在通过浏览器F12的调试工具调试网络请求时，可能都会有一个发现，在进行POST请求时，明明代码里只请求了一次，为什么network里发送了两次呢，难道我代码出bug了？带着疑问点开第一个请求才发现，原来第一个是OPTIONS类型的请求，第二个才是我代码里写的POST类型的请求。那为什么，POST请求之前默认伴随着一个OPTIONS请求呢？




我本人也是在第一份实际工作中，才发现了这个事情，带着疑问查询了一些资料，才知晓了其中缘由。在这个过程中也了解到了一些不常用的`HTTP`协议请求的方法以及它们的作用，比如`OPTIONS`。

可能大多数程序员，职业生涯里，90%遇到和创造的接口都是`GET`和`POST`，秉持着"不用就不学"的原则，越来越多的`HTTP`协议的请求方法淡化在了大家视野里，自然在遇到的时候就不知道它是干啥的了。

## 背景

在`Web`开发中，我们经常会遇到跨域请求的问题。当前端应用试图从一个源`（origin）`上的`Web`页面访问另一个源上的资源时，浏览器会执行跨域请求，其中`POST`请求常常会伴随着两次发送：一次`OPTIONS`请求（`CORS`预检）和一次实际的`POST`请求。
![](https://creatorblog.cn/static/img/7f9bba67ef0bf8acc9ae7361473c5102.image.webp)

![image.png](https://creatorblog.cn/static/img/48018ae49b0f40d0eb5651e38e2c0058.image.webp)
为什么会有这两次请求？下文我们继续深入解释这个问题，逐步探究`CORS`预检的原因和机制。

## 什么是CORS（跨源资源共享）

`CORS`是一种浏览器的安全策略，用于控制一个源（`domain、protocol、port`的组合）的`Web`页面是否可以请求另一个源的资源。`CORS`通过在服务器响应头中添加特定的字段，告诉浏览器是否允许来自其他源的请求。

## 为什么POST请求需要CORS预检

`POST`请求通常用于向服务器提交数据，但由于安全性考虑，浏览器会限制跨域`POST`请求。在实际发送`POST`请求之前，浏览器会发送一个`OPTIONS`请求，以便确认目标服务器是否允许实际的`POST`请求。

## GET请求一定不需要CORS预检吗
 
`CORS`预检是一种安全机制，用于控制跨域请求的访问权限。对于简单请求`（Simple Requests）`，包括使用`GET`、`HEAD`、`POST`其中一种方法，且只使用了以下几种简单请求头（`Simple Request Headers`）的请求，浏览器会自动处理`CORS`，无需进行预检：

1. Accept
2. Accept-Language
3. Content-Language
4. Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）

因此，`GET`请求通常不会触发`CORS`预检。只有当你的请求是跨域的、使用了非简单请求头、或者使用了不支持的`HTTP`方法时，才会触发`CORS`预检。对于非简单请求，浏览器会在实际请求之前发送一个`OPTIONS`请求，用来确认服务器是否支持跨域请求。而对于简单请求，浏览器会直接发送实际的`GET`请求，不需要进行预检。

## CORS预检的过程

1. **浏览器发送OPTIONS请求：**

当浏览器发现一个跨域的`POST`请求时，它首先发送一个`OPTIONS`请求到目标服务器，这是`CORS`预检的开始。

2. **服务器响应CORS头信息：**

服务器接收到`OPTIONS`请求后，检查请求中的信息，并返回响应。响应中包含了`CORS`头信息，其中包括允许的`HTTP`方法、允许的请求头等。如果服务器返回的`CORS`头信息允许实际的`POST`请求，浏览器才会继续发送实际的`POST`请求。


## 服务端示例代码

在服务器端，你需要配置`CORS`，以允许来自特定源的`POST`请求。以下是`Nodejs` `Express`框架的示例：

```js
const express = require('express');
const app = express();

// 配置CORS，允许所有源的POST请求
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有源
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的HTTP方法
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许的请求头
  next();
});

// 实际的POST请求处理
app.post('/api/data', (req, res) => {
  // 处理POST请求的逻辑
  res.send('POST请求成功！');
});

app.listen(3000, () => {
  console.log('服务器启动在端口 3000');
});
```

在上述代码中，通过配置`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`等响应头信息，服务器明确指定了允许的源、`HTTP`方法和请求头。

## 总结

`POST`请求发送两次的现象是因为浏览器在执行跨域的`POST`请求时，为了确保安全性，会发送一个`OPTIONS`请求进行`CORS`预检。服务器的`CORS`配置决定了是否允许实际的`POST`请求。理解`CORS`预检的过程，能够帮助我们更好地处理跨域请求问题，确保`Web`应用的安全性和稳定性。

为什么POST请求经常发送两次？

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！