拥有一个独特和有创意的网站来吸引用户不再是一个选择。乏味和老式的网站不再可行，因为它们不会引起用户的注意，也不会让用户想要进一步探索。访客应该有独特的体验。一个功能性和整洁的网站是必不可少的，通常会决定你客户的体验。

一个好的网站会带来更多的访问者，在搜索引擎中的排名也会更高。另外，一个网站可以既美观又实用。现在，你不需要牺牲一个来换取另一个，因为两者都是可行的。

一般人会在 7 秒内对你的网站做出判断。所以，在这么短的时间内，你的网站需要获得并保持他们的注意力。如果你不能在这段时间内获得他们的注意，通常情况下用户会失去兴趣并继续前进。

值得庆幸的是，这篇文章可以帮助你，教你在创建网站时不要做什么。我们将帮助你避免一些常见的错误和你可能没有想到的微妙问题。即使你的网站已经建好了，也要看看你是否犯过这些错误。现在做出改变还不晚。

一次性提供太多信息

我们都访问过一个网站，并完全被信息淹没。当一个网站同时呈现太多内容时，用户就会从你想要传达的内容中分心。给用户大量的信息、文字或图片会让他们感到困惑。

试着把你的网站适当地分类，把所有东西都分成一个区域。这将避免任何困惑，并会让你的访客高兴。

显示的内容过少

这个错误与第一个错误完全相反。当一个网站几乎没有信息显示时，也会让用户感到困惑。极简主义现在很流行，但这一趋势也有一个适当的限度。

当访问者访问你的网站时，应该向他们展示必要的信息。用户想知道你是谁，你能给他们提供什么。然后，看了这个，他们会进一步探索你的网站。这时你就可以向他们展示你所做的更详细的信息。

没有进行移动适配

我们都有过尝试在手机上浏览一个网站，却没有为小屏幕进行适当优化的经历。这是非常令人沮丧和头痛的，因为在 2019 年，预计你的网站将是移动友好的。

50% 的人表示，如果一个网站对手机不友好，他们就不太可能使用它。即使这些用户喜欢你的业务，他们也会选择使用移动友好的竞争对手的网站。要避免这种错误，因为这不仅会让用户感到挫败，还会让他们直接找你的竞争对手。

网站上的信息难以找到

当重要信息难以找到时，用户会感到困惑。一个网站应该有重要的信息，如工作时间，地点，经常问的问题，电话号码，电子邮件和关于容易找到的地方。

把这些信息放在搜索栏或你网站的标题附近可以让你很容易找到这些信息。掩盖这些细节是你想要避免的一个主要错误。

弹出窗口和过度使用干扰

每个人都讨厌第一次访问一个网站，然后被一个又一个的弹出窗口炸开。要求用户订阅你的时事通讯，创建一个帐户，禁用他们的广告拦截程序，以及许多其他的事情都是立即关闭用户。

谷歌最近警告用户避免这类弹出窗口和广告，因为它们的侵扰。这是一个很常见的错误。你仍然可以在你的网站上做这些事情，但要谨慎，确保它不会对用户体验产生负面影响。

使用了太多的滑块

幻灯片可能是一种向用户展示信息的有效方式，但最终应该避免使用。它们往往会扰乱用户的注意力。例如，有人可能正在阅读一张幻灯片上的信息，然后它突然跳转到下一张幻灯片上。

这将从你的网站访问者中删除控件。用户应该始终控制他们正在做的事情。你的网站不是一个中学历史的展示，所以避免在你的网站上犯幻灯片错误。

网站的速度

快速的网站是非常重要的。正如我上面提到的，你只有 7 秒钟的时间来吸引用户的注意。如果你的网页不能在这 7 秒内快速加载，那么你可能会失去一个访问者或潜在客户。

当涉及到性能时，有些事情是你无法控制的，比如用户的网速和所使用的设备。但你能控制的很简单。用内容和长视频超载你的主页会影响加载速度。要避免这种错误，请在创建网站时保持简单。

一切都与用户有关

建立一个伟大的网站似乎是一项艰巨的任务。正如我们所看到的，设计师有许多潜在的错误。

然而，当你把用户放在心上时，你就会知道你走的是正确的道路。确保你的网站易于使用，可访问和移动友好。这是让自己走向成功的最佳方式。

你是否在寻找一种方法将长文章分成不同的页面？这样做可以把冗长的内容分成几个页面可以让访问者更容易地阅读文章和浏览不同的部分。

在本文中，我们将逐步向你展示如何将 WordPress 文章拆分为多个页面。

为什么把 WordPress 文章分成多个页面？

如果你的博客文章或指南很长，那么设置文章分页可以提高内容的可读性。

它有助于将文章分成不同的部分，并将它们分成多个页面。这样，访问者可以很容易地消化你的内容，并阅读任何他们感兴趣的部分。

拆分 WordPress 帖子的另一个好处是，它可以帮助增加页面访问量和广告收入。

话虽如此，让我们来看看如何将 WordPress 文章拆分为多个页面。我们将介绍如何在没有插件和使用 WordPress 插件的情况下将你的 WordPress 文章分成多个页面。

方法一：不使用插件的情况拆分文章页面

设置分页最简单的方法是在你的 WordPress 内容编辑器中使用 “分页” 块。你不需要 WordPress 插件来把你的文章分成多个页面。

首先，在你的 WordPress 网站上编辑或添加一篇新文章。在那之后，点击加号 (+) 按钮，你想要拆分你的内容，并添加一个 “分页” 块。

现在，你应该在内容中看到一个分页行，以指示分页将出现在何处。

如果你使用的是经典的编辑器，那么请使用<!-- nextpage -- > 标签来分割你的内容。

只需编辑任何博客文章，并进入 “文本” 视图，进入你想要拆分内容的标签。

你也可以使用键盘上的 Alt + Shift + P 键插入分页符。要做到这一点，转到 “Visual” 视图，并按下键盘快捷键，在你想要添加分页符的地方。

之后，你可以预览和发布博客文章。现在你将在内容的底部看到分页。

方法二：使用插件将 WordPress 文章分页

另一种将冗长的内容分解成不同页面的方法是使用 WordPress 插件。这种方法的好处是，当文章满足特定条件时，它会自动对文章进行分页。

对于这个方法，我们将使用免费的自动分页帖子插件，因为它很容易使用，并且适用于任何 WordPress 主题。

首先，在你的 WordPress 网站上安装并激活 Automatically Paginate Posts 插件。

一旦插件在你的网站上激活，进入设置 » 阅读，并向下滚动到 “自动分页帖子” 部分。

你可以选择将文章类型拆分为不同的页面。然后，选择是根据总页数还是每页大约字数来拆分文章。

接下来，点击 “Save Change” 按钮来存储你的设置。

这个插件会根据你的设置自动分割你的内容。然而，你也可以在使用插件时手动添加分页符到你的内容中。

如果你使用的是 Google 文档、Google 电子表格和微软 Word 文档，你肯定熟悉 "搜索和替换" 功能。当你尝试在多个页面上查找重复的单词或短语，然后删除或使用另一个单词或短语而不是此单词或短语时，就会发生这种情况。

与上述工具类似，WordPress 还允许你搜索和替换网站上的数据库。你可以快速找到文本、图像，甚至 URL，并将其替换为新的文本、图像或 URL。

事实上，WordPress 不会让用户轻松过滤和替换数据。你必须使用代码或从第三方工具寻求帮助。因此，我们将此教程放在一起，清楚地向你展示如何在 WordPress 网站上执行数据库搜索和更换。在深入了解详细指南之前，我们想细分一些常见案例，说明何时需要应用此强大的功能。

你应该何时搜索和替换 WordPress 数据库？

• 改进 SEO- 你有几个关于某个主题的帖子。但是，它们不会在任何地方排名，因为你的目标是一个从低到低的搜索量关键字。建议用具有相同含义的高音量关键字替换此关键字。因此，Google 可以轻松地澄清你的主要内容，并更好地对内容进行排名。
• 纠正拼写错误或语法错误–在发表之前，每篇文章都必须经过仔细的审查和编辑。但是，你的团队有时会犯反复使用错误词而不注意的错误。一旦你发现，此错误已在你的网站上发生。不过，一个接一个的修复是很费时的。这是搜索和替换功能派上用场的地方。
• 更换未受保护的网址 - 这种情况似乎很少见，但它仍然以某种方式发生。在保护已嵌入内容的媒体文件时，其原始 URL 将更改为受保护的链接。如果此文件以前在其他帖子中的众多帖子中使用，你也必须更新它们。搜索和替换解决方案使你能够查找特定文件的未受保护链接，并将其替换为受保护的链接。

在 WordPress 中搜索和替换数据库的方法

在 WordPress 中搜索和替换方法时，你有多种选择。事实上，你可以使用 "Ctrl + F" 键盘组合来发现页面上的文本。如果你有数百页需要处理，该怎么办？

手动浏览每一页，发布和编辑每一个页面都会使你疯狂和疲惫。你有时也会错过一些事件。最重要的是，不可能使用 "Ctrl +F" 来查找链接。

除此之外，如果你决定手提更新数据库，请小心，因为它涉及大量数据表。对于拥有专业编码知识的开发人员来说，这可能是一个挑战。

此外，触摸数据库可能会危及你的网站性能。只要稍有不正确的更改，就会产生潜在的冲突，并损坏你的数据库。

我们建议使用插件来简化流程。

使用 Better Search Replace 插件

该插件超过 100 万个具有 4.5 星级评级的活动安装，你可以想象 "更好的搜索替换" 在查找数据并将其替换为其他数据方面是多么强大。

插件将访问你选定的表，然后进行查询，以找出应该更新多少字段。与其他插件不同，它不需要访问你的 WordPress 服务器。

简单的"设置"页面使你能够轻松配置 WordPress 搜索并替换功能。要开始使用插件，请参考以下方法：

1. 要在WordPress仪表板中添加新的插件 
2. 在关键字框中键入 "Better Search Replace"
3. 安装并激活插件
4. 前往工具并选择Better Search Replace选项
5. 输入你打算查找的文本或 URL 以及你想要在搜索中显示的文本或 URL
6. 选择要替换的数据库表
7. 点击运行搜索 / 替换

该插件允许你从主站点仪表板或仅在单个子站点的所有表上运行 "搜索" 和 "替换"。

执行搜索和替换时要小心，因为如果你输入了不正确的字符串，则会损坏 WordPress 数据库。在采取任何行动之前，你还必须备份数据。

你有时会在运行搜索时看到白色屏幕，并使用更好的搜索替换插件进行更换。要解决这个问题，只需前往 "设置" 选项卡并降低最大页面大小级别即可。

使用 MySQL 查询进行文字新闻搜索和替换

此方法适合那些对代码感到满意且不喜欢将插件添加到 WordPress 网站的人。要做到这一点，你需要：

1. 登录到你的 c 面板托管，并在数据库部分选择 phpMy 管理员

2. 单击你的 WordPress 数据库名称，然后点击 SQL

3. 以以下格式输入 SQL 查询

   update TABLE_NAME set FIELD_NAME =
   replace(FIELD_NAME, 'Text to find', 'text to replace with'); 

4. 用特定的 WordPress 表和文件名称替换 TABLE_NAME 和 FIELD_NAME

5. 点击继续

在过去的几年中，浏览器已用于 document.execCommand() 剪贴板交互。尽管得到了广泛的支持，但这种剪切和粘贴方法还是要付出代价的：剪贴板访问是同步的，并且只能读写 DOM。

这对于一小段文字来说很好，但是在很多情况下，阻止页面进行剪贴板传输是一种糟糕的体验。在内容可以安全粘贴之前，可能需要耗时的清理或图像解码。浏览器可能需要从粘贴的文档中加载或内联链接资源。在磁盘或网络上等待时会阻塞页面。想象一下，将权限添加到混合中，要求浏览器在请求剪贴板访问时阻止页面。同时，document.execCommand()用于剪贴板交互的权限 被松散定义，并且在浏览器之间有所不同。

在 异步剪贴板 API 解决了这些问题，提供了一个良好定义的权限模型不阻止页面。Safari 最近宣布 在 13.1 版中支持它。这样，主要的浏览器就具有基本的支持水平。在撰写本文时，Firefox 仅支持文本。在某些浏览器中，图像支持仅限于 PNG。如果你对使用 API感兴趣， 请 在继续之前查阅浏览器支持表。

异步剪贴板 API 仅限于处理文本和图像。Chrome 84 引入了一项实验性功能，该功能使剪贴板可以处理任意数据类型。

复制：将数据写入到剪贴板

writeText（）

要将文本复制到剪贴板，请调用writeText()。由于此 API 是异步的，因此该writeText()函数将返回一个 Promise，该 Promise 将根据传递的文本是否被成功复制来解决或拒绝：

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
} 

write（）

实际上，writeText()这只是通用write() 方法的一种便捷方法，它还允许你将图像复制到剪贴板。像一样writeText()，它是异步的并返回 Promise。

要将图像写入剪贴板，你需要将图像作为 blob。一种实现方法是使用fetch()，从服务器请求图像，然后调用 blob()响应。

由于多种原因，可能不希望或不可能从服务器请求图像。幸运的是，你还可以将图像绘制到画布上并调用 canvas 的 toBlob() 方法。

接下来，将ClipboardItem对象数组作为参数传递给write() 方法。目前，你一次只能传送一张图片，但我们希望将来增加对多张图片的支持。ClipboardItem将图像的 MIME 类型作为键并将 Blob 作为值的对象。对于从fetch()或获取的 Blob 对象canvas.toBlob()，该blob.type属性自动包含图像的正确 MIME 类型。

try {
  const imgURL = '/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
} 

复制事件

在用户启动剪贴板副本的情况下，非文本数据将作为 Blob 提供给你。该 copy事件 包括一个clipboardData属性，该属性具有已采用正确格式的项目，从而无需手动创建 Blob。呼叫preventDefault()以防止默认行为因你自己的逻辑而异，然后将内容复制到剪贴板。在此示例中未涵盖的是当不支持剪贴板 API 时如何回退到较早的 API。

document.addEventListener('copy', async (e) => {
    e.preventDefault();
    try {
      let clipboardItems = [];
      for (const item of e.clipboardData.items) {
        if (!item.type.startsWith('image/')) {
          continue;
        }
        clipboardItems.push(
          new ClipboardItem({
            [item.type]: item,
          })
        );
        await navigator.clipboard.write(clipboardItems);
        console.log('Image copied.');
      }
    } catch (err) {
      console.error(err.name, err.message);
    }
  }); 

粘贴：从剪贴板中读取数据

readText（）

要从剪贴板中读取文本，请致电navigator.clipboard.readText()并等待返回的 Promise 解决：

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
} 

read（）

该navigator.clipboard.read()方法也是异步的，并返回 Promise。要从剪贴板读取图像，请获取 ClipboardItem 对象列表 ，然后对其进行迭代。

每个都ClipboardItem可以将其内容保留为不同的类型，因此你需要再次使用for...of循环来遍历类型列表。对于每种类型，请getType()以当前类型为参数调用该方法以获得相应的 Blob。和以前一样，此代码不与图像绑定，并且可以与其他将来的文件类型一起使用。

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        console.log(URL.createObjectURL(blob));
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
} 

paste 事件

如前所述，已经计划引入事件以与 Clipboard API 一起使用，但是现在你可以使用现有paste事件。它与用于读取剪贴板文本的新异步方法很好地配合使用。与copy活动一样，不要忘记致电preventDefault()。

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const text = await navigator.clipboard.readText();
  console.log('Pasted text: ', text);
}); 

处理多种文件类型

大多数实现将多种数据格式放在剪贴板上，以便进行单个剪切或复制操作。这样做的原因有两个：作为应用程序开发人员，你无法了解用户要将文本或图像复制到的应用程序的功能，并且许多应用程序都支持将结构化数据粘贴为纯文本。这是通过 “编辑” 菜单项呈现给用户的，该菜单项的名称为 “粘贴和匹配样式” 或 “不格式化”。

以下示例显示了如何执行此操作。此示例用于fetch()获取图像数据。

function copy() {
  const image = await fetch('kitten.png');
  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
  const item = new ClipboardItem({
    'text/plain': text,
    'image/png': image
  });
  await navigator.clipboard.write([item]);
} 

安全性和权限

剪贴板访问一直是浏览器的安全隐患。没有适当的权限，页面可能会以静默方式将所有形式的恶意内容复制到用户的剪贴板，粘贴时会产生灾难性的结果。

使网页不受限制地对剪贴板具有读取权限，这会更加麻烦。用户通常将诸如密码和个人详细信息之类的敏感信息复制到剪贴板，然后在用户不知情的情况下，任何页面都可以读取这些信息。

与许多新 API 一样，剪贴板 API 仅支持通过 HTTPS 服务的页面。为防止滥用，仅当页面为活动选项卡时才允许剪贴板访问。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板，但是从剪贴板中读取始终需要权限。

复制和粘贴的权限已添加到 Permissions API 中。clipboard-write当页面是活动选项卡时，权限会自动授予它们。clipboard-read必须请求该权限，你可以通过尝试从剪贴板读取数据来执行此操作。下面的代码显示了后者：

const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
const permissionStatus = await navigator.permissions.query(queryOpts);
// Will be 'granted', 'denied' or 'prompt':
console.log(permissionStatus.state);

// Listen for changes to the permission state
permissionStatus.onchange = () => {
  console.log(permissionStatus.state);
}; 

你还可以使用该allowWithoutGesture选项控制是否需要用户手势来调用剪切或粘贴。该值的默认值因浏览器而异，因此应始终将其包括在内。

这就是剪贴板 API 的异步特性真正派上用场的地方：尝试读取或写入剪贴板数据会自动提示用户获得许可（如果尚未授予许可）。由于 API 基于承诺，因此这是完全透明的，并且用户拒绝剪贴板权限会导致承诺被拒绝，因此页面可以适当地响应。

由于 Chrome 仅在页面为活动标签时才允许剪贴板访问，因此你会发现，如果直接粘贴到 DevTools 中，此处的某些示例将不会运行，因为 DevTools 本身就是活动标签。有一个技巧：使用延迟剪贴板访问setTimeout()，然后在调用函数之前快速在页面内部单击以将其聚焦：

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000); 

特征检测

要在支持所有浏览器的同时使用 Async Clipboard API，请测试 navigator.clipboard并退回到较早的方法。例如，这是实现粘贴以包括其他浏览器的方式。

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  let text;
  if (navigator.clipboard) {
    text = await navigator.clipboard.readText();
  }
  else {
    text = e.clipboardData.getData('text/plain');
  }
  console.log('Got pasted text: ', text);
}); 

这还不是全部。在 Async Clipboard API 之前，Web 浏览器混合了多种复制和粘贴实现。在大多数浏览器中，可以使用document.execCommand('copy')和触发浏览器自身的复制和粘贴 document.execCommand('paste')。如果要复制的文本是 DOM 中不存在的字符串，则必须将其注入 DOM 中并进行选择：

button.addEventListener('click', (e) => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();
  const result = document.execCommand('copy');
  if (result === 'unsuccessful') {
    console.error('Failed to copy text.');
  }
}); 

content-visibility属性在 Chromium 85 中得到支持，该属性可能是影响页面加载性能的最具影响力的新 CSS 属性之一。content-visibility可以使用户代理可以跳过元素的渲染工作，包括布局和绘画，直到需要它为止。

因为跳过了渲染，所以如果大部分内容不在屏幕上，则利用该content-visibility属性可使初始用户加载更快。

它还允许与屏幕上的内容进行更快的交互。

浏览器支持

content-visibility: auto依赖于 CSS 包含规范中的原语，虽然content-visibility: auto目前 仅在 Chromium 85 中得到支持（并且被 Firefox 视为 “有价值的原型”），但是大多数现代浏览器都支持该属性。

CSS 属性值

该属性主要目标是通过提供 DOM 子树与页面其余部分的可预测隔离来实现 Web 内容的渲染性能改进。

基本上，开发人员可以告诉浏览器页面的哪些部分被封装为一组内容，从而使浏览器无需考虑子树之外的状态就可以对内容进行推理。知道内容（子树）的哪些位包含隔离的内容意味着浏览器可以为页面渲染做出优化决策。

CSS 包含四种属性值，每种类型都是containCSS 属性的潜在值，可以将它们组合在一起，以空格分隔的值列表：

• size：元素上的大小限制可确保元素框的布局，而无需检查其后代。这意味着，如果我们仅需要元素的大小，就可以跳过后代的布局。
• layout：布局限制意味着后代不会影响页面上其他框的外部布局。如果我们要做的只是布置其他方框，这使我们有可能跳过后代的布局。
• style：样式包含可确保不仅对子元素有影响的属性不会脱离元素（例如，计数器）。如果我们想要的只是在其他元素上计算样式，这使我们有可能跳过后代的样式计算。
• paint：绘制包含可以确保容纳盒的后代不会显示在其边界之外。没有任何内容可以使元素明显溢出，并且如果元素在屏幕外或以其他方式不可见，则其后代也将不可见。如果元素不在屏幕上，这使我们有可能跳过 paint后代。

使用content-visibility跳过渲染工作

可能很难弄清楚要使用哪个包含值，因为只有在指定了适当的设置后，浏览器优化才能开始。你可以使用这些值来查看最合适的值，或者可以使用另一个 CSS 属性content-visibility来自动应用所需的包含。content-visibility确保开发人员以最小的努力获得最大的浏览器性能提升。

content-visibility属性可以接受多个值，但是auto可以立即提高性能。具体属性值包括：自动获得布局、样式和绘制内容。如果该元素不在屏幕上（并且与用户无关，则相关元素将是在其子树中具有焦点或选择的元素），那么它也会获得size包容性。

简而言之，如果该元素不在屏幕上，则不会渲染其后代。浏览器在不考虑元素任何内容的情况下确定元素的大小，并在此处停止。跳过大多数渲染，例如元素子树的样式和布局。

当元素接近视口时，浏览器不再添加size容器，而是开始绘制和点击测试元素的内容。这使得渲染工作能够及时地被用户看到。

用contain-intrinsic-size指定元素的自然大小

为了实现content-visibility的潜在好处，浏览器需要应用大小限制，以确保内容的呈现结果不会以任何方式影响元素的大小。这意味着该元素将布局为好像是空的。如果元素没有在常规块布局中指定的高度，则其高度为 0。

这可能不是理想的，因为滚动条的大小会发生变化，这取决于每个具有非零高度的故事。

值得庆幸的是，CSS 提供了另一个属性，contain-intrinsic-size该属性可以有效地指定元素的自然大小（如果该元素受大小包含影响）。在我们的示例中，我们将其设置1000px为对部分的高度和宽度的估计。

这意味着它将进行布局，就好像它有一个 “内在大小” 尺寸的子对象一样，从而确保未调整大小的 div 仍然占据空间。 contain-intrinsic-size充当占位符大小来代替呈现的内容。

用content-visibility: hidden隐藏内容

如果要利用缓存的呈现状态的优点，使内容不呈现在屏幕上而又不呈现它怎么办？输入： content-visibility: hidden。

该content-visibility: hidden属性为你提供未渲染内容和缓存渲染状态的所有相同优点，与content-visibility: auto屏幕外一样。但是，与之不同auto，它不会自动开始在屏幕上呈现。

这给了你更多的控制权，使你可以隐藏元素的内容并稍后快速取消隐藏它们。

将其与隐藏元素内容的其他常见方式进行比较：

• display: none：隐藏元素并破坏其呈现状态。这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵。
• visibility: hidden：隐藏元素并保持其呈现状态。这并不能真正从文档中删除该元素，因为它（及其子树）仍占据页面上的几何空间，并且仍然可以单击。它也可以在需要时随时更新渲染状态，即使隐藏也是如此。

content-visibility: hidden在另一方面，在保留元素的呈现状态的同时将其隐藏，因此，如果需要进行任何更改，则仅在再次显示该元素（即，content-visibility: hidden删除属性）时才会发生更改 。

在这篇文章中，我们将研究什么是 CommonJS，以及为什么它会使你的 JavaScript 包超出必需的范围。

简介：为了确保捆绑程序能够成功优化你的应用程序，请避免依赖 CommonJS 模块，并在整个应用程序中使用 ECMAScript 模块语法。

什么是 CommonJS？

CommonJS 是 2009 年以来的一项标准，为 JavaScript 模块建立了约定。它最初打算在 Web 浏览器之外使用，主要用于服务器端应用程序。

使用 CommonJS，你可以定义模块，从中导出功能，以及将其导入其他模块中。例如，下面定义了片段其中出口 5 个功能的模块：add，subtract，multiply，divide，和max：

// utils.js
const { maxBy } = require('lodash-es');
const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]); 

稍后，另一个模块可以导入和使用以下部分或全部功能：

// index.jsconst { add } = require(‘./utils');console.log(add(1, 2)); 

调用index.js与node将输出数量3在控制台中。

由于 2010 年代初期浏览器中缺乏标准化的模块系统，CommonJS 也成为 JavaScript 客户端库的流行模块格式。

CommonJS 如何影响捆绑包大小？

服务器端 JavaScript 应用程序的大小并不像浏览器中那样重要，这就是为什么 CommonJS 并非在设计时就考虑到了减小生产包的大小。同时，分析表明，JavaScript 软件包的大小仍然是使浏览器应用程序变慢的第一原因。

JavaScript 捆绑程序和压缩程序（例如webpack和terser）执行不同的优化以减小应用程序的大小。他们在构建时分析你的应用程序，他们尝试从你不使用的源代码中尽可能多地删除。

例如，在上面的代码段中，你的最终捆绑包应仅包含add函数，因为这是utils.js你导入的唯一符号index.js。

让我们使用以下webpack配置来构建应用程序：

const path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
}; 

在这里，我们指定我们要使用生产模式优化并将其index.js用作入口点。调用后webpack，如果我们探索输出大小，我们将看到类似以下内容：

$ cd dist && ls -lah
625K Apr 13 13:04 out.js 

注意，这个包是 625KB。如果我们查看输出，会发现 utils.js 中的所有函数以及 lodash 中的许多模块。尽管我们在 index.js 中没有使用 lodash，但它是输出的一部分，这给我们的生产资产增加了很多额外的权重。

现在让我们将模块格式更改为 ECMAScript 模块，然后再试一次。这一次，utils.js 看起来是这样的:

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

import { maxBy } from 'lodash-es';

export const max = arr => maxBy(arr); 

而 index.js 会使用 ECMAScript 模块语法从 utils.js 中导入:

import { add } from './utils';

console.log(add(1, 2)); 

使用相同的webpack配置，我们可以构建应用程序并打开输出文件。它现在是40个字节，输出如下：

(()=>{"use strict";console.log(1+2)})(); 

请注意，最终的包没有包含来自 util.js 中我们不使用的任何函数，并且没有来自 lodash 的跟踪！更进一步，terser (webpack 使用的 JavaScript 缩小器) 将 add 函数内联到 console.log 中。

你可能会问一个合理的问题，为什么使用 CommonJS 会导致输出包几乎增大 16000 倍？当然，这是一个玩具样例，实际上，大小的差异可能没有那么大，但是 CommonJS 很有可能为你的生产构建增加了很大的权重。

在一般情况下，CommonJS 模块更难优化，因为它们比 ES 模块更动态。为了确保你的 bundler 和 minifier 能够成功地优化你的应用程序，请避免依赖于 CommonJS 模块，并在整个应用程序中使用 ECMAScript 模块语法。

请注意，即使你在中使用 ECMAScript 模块，如果你使用 index.js 的模块是 CommonJS 模块，应用程序的分发包大小也会受到影响。

为什么 CommonJS 会让你的应用变大？

为了回答这个问题，我们将研究webpack 中 ModuleConcatenationPlugin 的行为，然后讨论静态可分析性。这个插件将你所有模块的范围连接到一个闭包中，让你的代码在浏览器中有更快的执行时间。让我们来看一个例子:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b; 

// index.js
import { add } from ‘./utils';
const subtract = (a, b) => a - b;

console.log(add(1, 2)); 

上面，我们有一个 ECMAScript 模块，我们在 index.js 中导入它。我们还定义了一个减法函数。我们可以使用与上面相同的 webpack 配置来构建这个项目，但是这一次，我们将禁用最小化:

const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: false
  },
  mode: 'production',
}; 

让我们看看输出结果：

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";

// CONCATENATED MODULE: ./utils.js**
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// CONCATENATED MODULE: ./index.js**
const index_subtract = (a, b) => a - b;**
console.log(add(1, 2));**

/******/ })(); 

在上面的输出中，所有函数都在同一个名称空间中。为了防止冲突，webpack 将 index.js 中的减法函数重命名 为 index_subtract。

如果使用压缩程序处理上面的源代码，它会：

• 删除未使用的函数 subtract 和 index_subtract
• 删除所有注释和多余的空格
• 在 console.log 调用中内联 add 函数的主体

通常，开发人员将这种未使用导入的移除称为“摇树”。是因为 webpack 能够静态地(在构建时)理解我们从 util .js 导入哪些符号，导出哪些符号。

与 CommonJS 相比，ES模块在默认情况下启用了这种行为，因为它们更容易静态分析。

让我们看看完全相同的例子，但这次改变 util .js 使用 CommonJS 而不是ES模块:

// utils.js
const { maxBy } = require('lodash-es');

const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]); 

这个小更新将显著改变输出。由于它太长，嵌入这个页面，我只分享了它的一小部分:

...
(() => {

"use strict";
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
const subtract = (a, b) => a - b;
console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));

})(); 

注意，最终的包包含一些 webpack “运行时”注入的代码，负责从绑定模块导入/导出功能。这一次，我怕，我们没有把所有的符号从utils.js与index.js 放在同一个命名空间下，我们需要动态地在运行时，该add功能使用__webpack_require__。

这是必要的，因为使用 CommonJS，我们可以从任意表达式中获得导出名称。例如，下面的代码是一个绝对有效的构造:

module.exports[localStorage.getItem(Math.random())] = () => { … }; 

在构建时，绑定者无法知道导出符号的名称，因为只有在运行时才能在用户浏览器上下文中使用的信息。

这样，minifier 无法从依赖关系中理解 index.js 到底使用了什么，所以它无法将其树式删除。我们还将观察到第三方模块的完全相同的行为。如果我们从 node_modules 导入一个 CommonJS 模块，则你的构建工具链将不能正确地优化它。

CommonJS 中的 Tree-shaking

由于 CommonJS 模块是动态定义的，因此要分析它们要困难得多。例如，与作为表达式的 CommonJS 相比，ES 模块中的导入位置始终是字符串文字。

在某些情况下，如果你使用的库遵循了使用 CommonJS 的特定约定，那么可以使用第三方 webpack 插件在构建时删除未使用的导出。尽管这个插件增加了对树晃动的支持，但它并没有涵盖你的依赖项使用 CommonJS 的所有不同方式。这意味着你不会获得与 ES 模块相同的保证。此外，它还增加了构建过程中在默认 webpack 行为之上的额外成本。

结论

为确保捆绑程序可以成功优化应用程序，请避免依赖 CommonJS 模块，并在整个应用程序中使用 ECMAScript 模块语法。

以下是一些可行的技巧，可用来验证你是否处于最佳状态：

• 使用 Rollup.js 的 node-resolve 插件并设置modulesOnly标志以指定你仅希望依赖 ECMAScript 模块。
• 使用该软件包 is-esm 来验证 npm 软件包是否使用 ECMAScript 模块。
• 如果你使用的是 Angular，则默认情况下，如果你依赖不可摇树的模块，则会收到警告。