客户端渲染的优缺点

2019-12-19 08:00:00 · 飞浪

介绍在本指南中，我将引导您了解React中的客户端渲染（CSR）。客户端渲染元素是JavaScript创建的HTML内容。几年前，JavaScript被用来进行一些基本的DOM操作。

介绍

在本指南中，我将引导您了解 React 中的客户端渲染（CSR）。

客户端渲染元素是 JavaScript 创建的 HTML 内容。几年前，JavaScript 被用来进行一些基本的 DOM 操作。因此，jQuery 等库应运而生。但现在它已经变得如此强大，我们可以构建一个完整的 UI 系统。

今天，我们可以用 JavaScript 编写 HTML 和 CSS，并根据需要呈现页面，这一切都归功于客户端渲染。

玩转 React

React 是前端使用的优秀 JavaScript 库之一。React 应用程序仅包含一个 HTML 页面，即index.html，而要创建其他 HTML 内容，我们使用 JSX。React 将所有内容移动到一个 HTML 文件中。这称为单页应用程序或 SPA，其中 JavaScript 处理渲染逻辑。每个 SPA 框架都使用自己的路由在不同的页面或路由上显示 HTML 内容。

但是如果我们谈论 JSX，那么就会出现一个问题：“它内部是如何工作的？”

由于浏览器仅支持 JavaScript，因此 JSX 首先被转换为纯 JavaScript。之后，JavaScript 创建 HTML 内容并将其呈现在用户的屏幕上。

下面我会简单介绍一下 React 的内部结构，这样可以帮助你更清晰的理解 CSR。

使用 JavaScript 创建 HTML

下面是一个示例代码，它将让您了解如何使用 JavaScript 创建 HTML 元素。

      function elt(type, props, ...children) {
  let dom = document.createElement(type);
  if (props) Object.assign(dom.props);

  for (let child of children) {
    if (typeof child != string) dom.appendChild(child);
    else dom.appendChild(document.createTextNode(child));
  }
  return dom;
}
    

在上面的代码片段中，我编写了一个带有三个参数的函数：type，props和children，其中 rest 运算符将发送任意数量的子项。

文档的createElement ()方法在 DOM 上创建一个元素。

      document.createElement("input");

上述代码将在 HTML 中生成一个输入标签。

文档的appendChild()方法将创建的元素附加到块。

      let dom = document.crateElement("div");
let dom1 = document.createElement("input");
dom.appenChild(dom1);
    

上述代码将输出以下 HTML 内容：

      <div>
  <input />
</div>
    

现在您可以清楚地看到如何使用appendChild()方法在另一个标签下创建一个标签。

文档的createTextNode（）方法帮助您在DOM上生成字符串标签。

      let dom = document.crateElement("div");
let label = docuemnt.createTextNode("Name:");
dom.appenChild(label);
let dom1 = document.createElement("input");
dom.appenChild(dom1);
    

上述代码生成 HTML 如下：

      <div>Name:<input /></div>

现在您已准备好了解elt()方法。您可以使用elt()方法生成name标签和<div>下的<input />的相同 HTML 。

      elt(
  "div",
  {},
  "Name",
  elt("input", {
    type: text,
    value: ""
  })
);
    

输出：

      <div>Name:<input /></div>

这就是使用 JavaScript 创建 HTML 元素的方法。现在让我们看看客户端渲染的优缺点。

CSR 的优点

高性能

CSR 按需生成 HTML。它不会像常规 HTML 页面那样刷新或重新渲染整个页面。它只是假装是一个单独的页面，但它将内容渲染在一个页面上。这节省了大量计算能力和 RAM，因此它比服务器端渲染 (SSR) 更快地获得结果。

速度

CSR 生成需要显示的 HTML。这意味着 DOM 仅包含 HTML 内容预计要显示的代码。因此，DOM 可以轻松使用隐藏和显示事件处理大量元素。尽管 DOM 必须处理更多代码，但渲染并不需要太多时间。由于延迟加载，CSR 比服务器端渲染快得多。

可重用组件

借助 CSR，我们可以在多个页面或路由中重复使用 UI 组件，而无需每次都请求服务器。这提高了可用性和页面性能。

但另一方面，CSR 也有一些缺点，我们将在下面讨论。

CSR 的缺点

一开始很慢

CSR 首次加载整个 JavaScript，然后调用 API 从数据库获取数据并根据数据生成 HTML。但首次加载数据比服务器端渲染花费的时间要多一点。

SEO问题

SEO 代表搜索引擎优化。CSR 需要在浏览器中进行 JS 渲染和索引的两波过程，通常由 Google 完成。

第一波请求源代码，抓取，然后索引呈现的 HTML。但在 CSR 中，我们没有太多的 HTML，因为从 JavaScript 转换为 HTML 需要时间。

在第二波中，当所有资源都可用后，浏览器将额外的支持和索引返回给搜索引擎。这对于服务器端渲染来说不是问题，因为在服务器端渲染中，HTML 本身是第一次可用的。

缓存问题

由于 HTML 在初始渲染时不可用，浏览器无法缓存页面的 HTML 结构。避免此问题的一种方法是缓存 JavaScript，但这可能代价高昂，因为 JavaScript 文件会占用浏览器内存中的大量空间。

结论

CSR 比 SSR 有多种优势，但也存在一些我们无法否认的缺陷。但在第一次加载后，它会变得非常流畅和用户友好。它具有高性能和高速度，并且运行时不需要太多 RAM。

我希望本指南能够提供有用的信息并成为您客户端征战的门户。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

客户端渲染的优缺点

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

function elt(type, props, ...children) { let dom = document.createElement(type); if (props) Object.assign(dom.props); for (let child of children) { if (typeof child != string) dom.appendChild(child); else dom.appendChild(document.createTextNode(child)); } return dom; }