客户端渲染CSR、服务端渲染SSR、静态站点生成

最新推荐文章于 2025-05-02 16:45:26 发布

小二aaaarrrrrr

最新推荐文章于 2025-05-02 16:45:26 发布

阅读量43

点赞数

文章标签：前端

原文链接：https://mp.weixin.qq.com/s/h7UIYz3qPyTNQ-7Ejv2BSQ

版权

文章目录

目录

前言

一、页面渲染流程

二、三种渲染方式得详解

1.客户端渲染

2.服务端渲染
总结

前言

分析详解三个不同渲染方式得区别

一、页面渲染流程

浏览器通过请求得到一个 HTML文本
渲染进程解析 HTML 文本，构建 DOM 树
浏览器解析 HTML 的同时，如果遇到内联样式或者样本样式，则下载并构建样式规则（stytle rules）。若遇到 Javascript 脚本，则会下载并执行脚本
DOM 树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree）
渲染进程开始对渲染树进行布局，生成布局树（layout tree）
渲染进程对布局树进行绘制，生成绘制记录
渲染进程对布局树进行分层，分别栅格化每一层并得到合成帧
渲染进程将合成帧发送给 GPU 进程将图像绘制到页面中

二、三种渲染方式得详解

1.客户端渲染

目前常用的前端框架Vue、React 等进行页面渲染，页面大部分DOM元素是通过JavaScript 动态插入的。在执行 JavaScript 脚本之前，HTML 页面已经开始解析并且构建 DOM 树了，JavaScript 脚本只是动态的改变 DOM 树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也就是平时我们所称的客户端渲染 CSR（client side render）

下面代码为浏览器请求 react 编写的单页面应用网页时响应回的HTML文档，其实它只是一个空壳，里面并没有具体的文本内容，需要执行 JavaScript 脚本之后才会渲染我们真正想要的页面

2.服务端渲染

在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的下载过程，即可直接构建出我们所希望的 DOM 树并展示到页面中。这个服务端组装HTML的过程就叫做服务端渲染 SSR

服务端渲染返回的HTML文档中具有页面的核心文本

<!DOCTYPE html>
<html lang="zh-hans">

<head>
  <link rel="preload" href="https://unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js" as="script" />
  <meta name="generator" content="Gatsby 2.24.63" />
  <style data-href="/styles.dc271aeba0722d3e3461.css">
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    html {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%
    }

    /* ....many CSS style */
  </style>
</head>

<body>
  <script>
    (function () {
      /*
        BE CAREFUL!
        This code is not compiled by our transforms
        so it needs to stay compatible with older browsers.
      */

      var activeSurveyBanner = null;
      var socialBanner = null;
      var snoozeStartDate = null;
      var today = new Date();

      function addTimes(date, days) {
        var time = new Date(date);
        time.setDate(time.getDate() + days);
        return time;
      }
      // ...many js code
    })();
  </script>
  <div id="___gatsby">
    <!-- ...many html dom -->
    <div class="css-1vcfx3l">
      <h3 class="css-1qu2cfp">一次学习，跨平台编写</h3>
      <div>
        <p>无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。</p>
        <p>React 还可以使用 Node 进行服务器渲染，或使用 <a href="https://reactnative.dev/" target="_blank"
                                           rel="nofollow noopener noreferrer">React Native</a> 开发原生移动应用。</p>
      </div>
    </div>
     <!-- ...many html dom -->
  </div>

</body>

</html>

3静态站点生成

与SSR的相同之处就是对应的服务端同样是将已经组合好的HTML文档直接返回给客户端，所以客户端依旧不需要下载Javascript文件就能渲染出整个页面，那不同之处又有哪些呢？

使用了SSG技术搭建出的网站，每个页面对应的HTML文档在项目build打包构建时就已经生成好了，用户请求的时候服务端不需要再发送其它请求和进行二次组装，直接将该HTML文档响应给客户端即可，客户端与服务端之间的通信也就变得更加简单

他也有很多弱点：

HTML文档既然是在项目打包时就已经生成好了，那么所有用户看到的都只能是同一个页面，就像是一个静态网站一样，这也是这项技术的关键字眼——静态
每次更改内容时都需要构建和部署应用程序，所以其具有很强的局限性，不适合制作内容经常会变换的网站

使用场景：比如个人博客、项目使用文档等Web应用程序

总结

无论是哪种渲染方式，一开始都是要请求一个 HTML 文本，但是区别就在于这个文本是否已经被服务端组装好了

客户端渲染还需要去下载和执行额外的Javascript脚本之后才能得到我们想要的页面效果，所以速度会比服务端渲染慢很多
服务端渲染得到的HTML文档就已经组合好了对应的文本，浏览器请求到之后直接解析渲染出来即可，不需要再去下载和执行额外的Javasript 脚本，所以速度会比客户端渲染快很多
对于一些内容不经常变化的网站，我们甚至可以在服务端渲染的基础上予以改进，将每次请求服务端都渲染一次HTML文档改成总共就只渲染一次，这就是静态站点生成技术

客户端与服务端渲染的流程图