静态网站 vs 动态网站：全面比较 – techsyncer

当许多人想到网站时，几乎不会考虑静态网站与动态网站的概念。毕竟，网站只是出现了，对吧？从技术上讲是的，但背后却有很多事情正在发生。

对于计划创建或迁移网站的人来说，了解这两种类型的网站是至关重要的。您选择的网站类型将影响开发人员如何管理和更新网站，以及可能的运营和维护成本。

在本文中，您将了解静态网站与动态网站之间的区别。您将看到开发人员如何制作静态和动态网站，以及您的浏览器如何呈现它们，以及许多其他有用的比较。

静态网站和动态网站是什么？

顾名思义，静态网站的元素是固定的或硬编码的。无论您使用什么样的浏览器，静态网站的内容都不会改变。

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

大多数静态网站的性质是信息性的。例如，个人博客就是一个例子，其目的是向读者显示信息。在个人博客上，用户通常只是浏览网站的内容。

相反，动态网站超越了客户端代码。最终，动态网站基于HTML和CSS，就像静态网站一样。但是，为了使动态网站正常运行，它需要服务器端语言，如PHP、ASP.net或JavaScript来动态生成HTML代码。

动态网站使用术语CRUD,代表创建、读取、更新、删除。CRUD表示针对数据库执行的操作。如果你猜到动态网站使用数据库，那么你猜对了！

网站呈现的差异

Web服务器如何将静态和动态网站提供给读者的浏览器？

静态网站精确地在Web服务器上提供代码

请记住，静态网站包含硬编码的HTML文档和可选的CSS和JS文件。您上传到Web服务器的任何代码都将精确地提供给浏览您网站的用户。

以下是一个在Visual Studio Code中的示例静态网站项目，其中包含三个文件。这个静态网站的主页只显示一个标题和一个按钮。

当你在这个简单的网页上点击按钮时，会显示一个单词。

Static Website Project in Visual Studio Code

以下是index.html文件的代码。这充当静态网站的主页。

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

下面的代码是style.css的代码。这个CSS文件定义了主页元素在浏览器中的显示样式。

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

最后，下面的代码是button.js的代码，其中包含当读者点击按钮时浏览器将触发的JavaScript代码。

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

假设静态网站现在已经上线，下面的演示是它的样子。然后，如果你打开页面源代码，你应该看到页面的代码与index.html文件的源代码完全相同。

注意：这个静态网站示例是使用Visual Studio Code中的HTTP Server / HTML Preview扩展进行测试的。

正如您在上面的演示中所看到的，即使用户通过单击按钮与页面交互，底层代码也从未改变。这是静态网站的行为；浏览器处理一切。

动态网站首先读取数据库

与静态网站相反，动态网站使用服务器端处理来生成代码。这意味着页面背后的底层代码可能随时更改，这取决于设计。

例如，下面是一个仅包含一个JavaScript文件的Node.js动态网站项目。

Dynamic Website Project in Visual Studio Code

dynamicsite.js的代码如下所示。这段代码是一个服务器端脚本，每次加载页面时显示当前计算机时间。

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

下面的演示显示了动态网站的显示方式。每次刷新页面时，底层HTML代码都会更改。

注意：此动态网站示例是使用Node.js进行测试的。

这就是动态网站在幕后的基本示例。

静态与动态网站：内容如何管理？

现在您知道静态和动态网站是如何渲染和提供的。那么，如何添加、更新或删除内容呢？假设您有一个静态个人博客网站，您如何添加新的帖子？如果您拥有一个动态的电子商务网站，您如何在目录中添加新产品呢？

你定义网站类型将影响你管理网站内容的方式。以下是内容管理的典型选项。

硬编码静态页面

每当网站或其内容需要更新时，几乎总是需要更改代码。最基本且可能是最古老的方法是硬编码。该方法涉及使用任何文本编辑器编辑网站源代码。

这种方法可能是最繁琐和耗时的，因为网站的每个方面都必须手动编码。但是，这也使得静态网站在设计上具有灵活性，因为每个页面都可以是不同的。

一些设计简单、功能简单的网站可以利用Markdown编写其内容。然后，将这些Markdown文档转换为HTML，从而生成可以上传到Web服务器的网页。

例如，下面的静态网站有三个页面：index.html，page1.html和page2.html。尽管这些文件是一个静态网站的一部分，但它们被编写成具有不同设计或主题。

Example of a static website with different page themes

静态网站生成器

静态网站生成器提供了创建整个静态网站的能力，而不是手动编写代码，可以从头开始创建，也可以从样板模板开始。新的帖子或页面通常是用Markdown编写的，并且在网站构建过程中生成HTML文件。

然后可以将生成的文件上传到Web服务器，使网站生效。在某些静态网站生成器中，还可以使用其他格式编写内容，如纯HTML和JSON。

以下是一些您可以探索的最受欢迎的静态网站生成器列表。

下面的示例网站是使用Jekyll生成的，而无需输入任何代码。

内容管理系统（CMS）

到目前为止，您已经听说过WordPress。那么Drupal、Joomla和Netlify呢？这些是最受欢迎的内容管理系统或CMS的名称。

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

动态网站通常与CMS相连。事实上，当您购买Web托管套餐时，它已经包含了可以在单击（或几次点击）鼠标的情况下部署的网站构建器和CMS。CMS可能是动态网站成为流行选择的原因。

静态网站也可以配置为使用CMS。例如，Netlify支持与静态站点生成器（如Jekyll、Hugo和NextJS）集成。尽管与动态网站相比，设置与这些平台的CMS集成通常涉及更多工作。

何时使用静态网站与动态网站

如果你想知道这个古老问题何时会有答案，“哪个更好？”，你可能要等一段时间。可能不会有一个明确的赢家。静态网站和动态网站哪个更好，取决于你的需求。

在选择网站类型时需要考虑很多因素。以下只是一些要考虑的因素。

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

结论

如果你已经拥有一个网站，你可能已经知道你是否拥有一个静态网站或动态网站。如果不是，那么你应该在这篇文章中学会如何区分这两种类型。

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

如果你只是计划建立一个新网站，你的选择很大程度上取决于它的目的。比如，电子商务和招聘网站可能更适合作为动态网站。而博客或作品集网站将发现静态网站足够。

静态网站是一切的开始，可能永远不会消失。特别是现在静态站点生成器越来越受欢迎。动态网站将随着进一步的持续发展变得更好。

进一步阅读

如果您想了解更多关于静态网站和动态网站的信息，请务必查看这些其他ATA帖子。

如何托管由Cloudflare支持的Azure静态网站