【问题标题】:Server side rendering vs client side rendering and how does web sites used to work before angular [closed]服务器端渲染与客户端渲染以及网站在 Angular 之前是如何工作的 [关闭]
【发布时间】:2016-06-10 16:16:09
【问题描述】:

我对整个 web 应用程序和网站世界有点陌生,但我开始使用 angular 编程和构建自己的 web,我对客户端渲染的想法以及在 angular 中使用 AJAX 感到非常满意($HTTP / $RESOURCE) ,但我没有使用“传统”方法来构建网站,因为我使用 angular 是因为它听起来像是最好的新方法!

但是当我了解到我在我的道路上遇到了很多障碍,因为缺乏对传统网站技术的了解以及一切如何发展,我想知道这些网站是如何开始的,以及对这个世界的态度是什么? ,以及服务器端渲染是如何工作的,因为据我了解,我有模板很简单,客户端中的 JS 完成所有操作,添加/删除 div 等,并且没有任何连接关于渲染DOMS的服务器端,只能通过使用http或资源来获取信息。我想知道php服务器端是如何工作的。

【问题讨论】:

  • i want to know how does php server side works - 互联网上有大量教程。 SO 不是教程网站
  • 虽然这个问题是可行的,但您提出的问题对于一个简洁的答案来说太宽泛了。此外,SO 并不是真正适合这类问题的地方。我建议你拿一本书来了解这种知识。或者,您会在整个互联网上找到有关该问题的出色教程和知识库。

标签: javascript php angularjs web


【解决方案1】:

渲染有两种不同的含义,这可能会让你感到困惑。

Angular 可以获取一段“原始”信息并“渲染”显示该数据所需的 DOM 元素。例如,数据可以是一个 JavaScript 对象,它可以作为 JSON 对象从某个 API 中获取。

在服务器上与客户端上的渲染

在更传统的方法中,HTML 代码来自服务器“预渲染”。这意味着服务器包含静态 HTML(只是您可以在记事本中键入的 HTML 文件),或像 PHP 这样的服务器端脚本,它将“呈现”包含所有数据的 HTML 代码。服务器返回这个 HTML 源代码,浏览器只是“渲染”它。

所以“在服务器上渲染”意味着获取模板和数据并将它们组合成原始源代码。 “在客户端渲染”传统上意味着获取 HTML 源代码并将其显示在屏幕上。 Angular 使用第三种变体,这意味着进行 DOM 操作以将数据“渲染”到文档中。但我稍后会谈到。

因此,服务器端呈现并不意味着(现在或以前)实际显示,即您查看的页面,在服务器上呈现。甚至 DOM 都不会在服务器上呈现。服务器只是从它获取的数据中呈现文本的 HTML 源代码,而客户端(浏览器本身)仍然生成 DOM 并进行页面的图形呈现。

因此 PHP 也不会直接响应按钮单击。它仅响应 HTTP 请求,这些请求可能源自输入的 URL、访问的链接、发布的表单或执行的 AJAX 请求。

HTML 具有内置行为

传统的 HTML 具有内置行为,这就是为什么它可以在没有任何客户端脚本的情况下工作。一个普通的超链接不能点击是因为脚本,而是因为浏览器知道这个元素和它的意图。所以从一页跳到下一页的逻辑是内置在浏览器本身中的。表格也是如此。当您单击提交按钮时,浏览器知道应该将表单的数据发送到服务器。您在 HTML 中所做的只是定义(在表单属性中)URL 是什么、方法以及按下哪个按钮来发送信息。同样,无需编写脚本。

客户端 JavaScript 可以操作已加载的页面

客户端过程实际上是一个两步过程。首先,HTML 源代码被解析并转换成一个 DOM 文档,一个包含元素信息的内存对象列表。 然后在屏幕上呈现(显示)该文档。

JavaScript(也包括 jQuery 或 Angular)可以处理这些内存对象。它可以将事件绑定到它们,因此您可以在发送之前验证表单输入(节省进行往返、服务器端检查和解析完整响应页面的时间),或响应对任何元素的单击。您甚至可以通过更改对象的内容、外观、删除或添加新对象来操作对象本身。

所以 JavaScript 的方法似乎介于两者之间。您不必实际绘制所需的更改,但也不必依赖 HTML 加载。您可以直接访问对象,并且您对它们所做的任何更改都会自动反映在浏览器的显示上。所以你可以插入一个额外的元素对象,它会自动出现在屏幕上。

这就是 JavaScript 如此快速和强大的原因。这种方法比从服务器加载一大块 HTML 更直接。所以在过去,你可以从一个页面跳到下一个页面,整个页面都需要重新加载和重新渲染。使用 JavaScript,您可以进行小型交互,使用 AJAX,您可以从外部来源获取信息片段并在页面上显示信息,而无需重新加载整个页面。

注意。顺便说一句,AJAX 也不是很新。它是微软多年前发明的,用于构建丰富的基于 Web 的 Outlook 版本。 AJAX 中的 X 代表 XML,现在已被 JSON 取代,作为传达这些信息的首选符号。

Angular“隐藏”了这种 DOM 操作

Angular 只是一个框架,它抽象了 JavaScript 可以做的所有这些 DOM 操作。它允许您在 HTML 中放置标记,并在 JavaScript 中操作对象数据,它会自动将这些放在一起以更新页面。这使得在高层次上构建 Web 应用程序变得更加容易。你只需要担心设计和数据,将它们放在一起的大部分技术性都被删除了。

除此之外,Angular 并不比任何其他的 JavaScript DOM 操作方式更多。它只是让您弄乱当前加载的文档,这是服务器端脚本无法做到的。

但是,在大多数情况下,服务器(和服务器端脚本)仍然发挥着重要作用。现在,正是这个服务器端进程“呈现”了 Angular 应用程序获取的 JSON 数据。当然,除非您有一些应用程序不需要从其他任何地方加载任何额外数据。

【讨论】:

  • 所以我给你举个例子,让我知道如果理解得很好,所有页面都存储在服务器中,当我进入这个 url 时:“blabla.com/blabla.php”浏览器使用 GET http 获取特定页面,现在我的问题是页面在加载页面之前生成他的doms和数据吗?以及它对用户所做的更改有何反应让我们假设他单击了更改主题名称或其他任何内容的按钮,我不明白这个 apporach 与 angularjs apporach 之间的区别,这对我来说似乎很明显
  • 我对答案进行了一些重构。希望现在更清楚了。关键是至少 PHP 不生成 DOM,而只是生成 HTML 源代码。并且 PHP 不会直接响应按钮单击,只会响应它所获得的请求,无论是来自访问的链接、发布的表单还是执行的 AJAX 请求。我不会详细介绍 PHP 如何呈现 HTML。这是任何 PHP 入门教程都会告诉你的。这只是更大的图景。
【解决方案2】:

html 是为了在网络上共享链接文档而发明的。这一切都始于存储在服务器上的静态文本,并通过浏览器呈现给客户端。

然后在服务器(PHP、JSP 等)上使用程序/模板动态生成 html 文本。 Javascript 做了动画和一些小的客户端编程(dom 操作)。

然后在服务器上生成用于操作 dom 的 Javascript,然后交付给客户端并构建文档客户端。

【讨论】:

  • JavaScript 不仅仅用于动画和小 dom 操作。远不止这些。
猜你喜欢
  • 2023-04-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-05
  • 1970-01-01
  • 1970-01-01
  • 2019-08-07
相关资源
最近更新 更多