前端部分术语记录二：SSR、CSR、Serverless、CSS预处理、模块化

部分好学的学弟学妹喜欢问些前端常用的术语表示什么意思，我只能口语化的给他们讲一下，专业的解释，百度谷歌里面很多，这里我个人也总结记录一下。这里都只简单写一下名词解释，某些名词出现的原因、具体如何实现后期有空再单独写文章吧。记录二

# 什么是服务端渲染SSR？

  Server-SideRendering：服务端渲染是指在服务端完成页面的渲染，在服务端完成页面模板、数据填充、页面渲染，然后将完整的HTML内容返回给到浏览器。由于所有的渲染工作都在服务端完成，因此网站的首屏时间和TTI（页面可交互的时间）都会表现比较好。

  但是，要注意由于渲染需要在服务端完成，并不能很好进行前后端职责分离，而且白屏时间也会比较长，同时，对于服务端的负载要求也会比较高。

# 什么是客户端渲染CSR？

  Client Side Rendering：客户端渲染目前 Web 应用中主流的渲染模式，一般由 Server 端返回的初始 HTML 页面，然后再由 JS 去异步加载数据，然后完成页面的渲染。也就是所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。其实，现代主流的前端框架均是这种渲染方式，这种渲染方式的好处在于实现了前后端架构分离，利于前后端职责分离，并且能够首次渲染迅速有效减少白屏时间。同时，CSR可以通过在打包编译阶段进行预渲染或者骨架屏生。

# 什么是Serverless？

  Serverless：无服务器，指构建和运行不需要服务器管理的应用程序。狭义上是指Serverless computing 架构 = FaaS 架构 = Trigger(事件驱动)+FaaS(函数即服务)+BaaS(后端即服务，持久化或第三方服务)=FaaS + BaaS，广义上是指服务端免运维，也就是具有 Serverless 特性的云服务。Serverless 强调的是一种架构思想和服务模型，让开发者无需关心基础设施（服务器等），而是专注到应用程序业务逻辑上。Serverless 也是下一代计算引擎。

简单来说Serverless所谓的“无服务器”并不是真正的没有服务器，而是说Serverless的用户不再需要在服务器上进行配置、维护、更新、扩容，无需在搭建服务上花费时间和资源，可以将更多的精力放到业务逻辑本身，至于服务器，把更专业的事交给更专业的人去做，由云厂商提供统一运维。

# 如何理解js模块化？

  一个大的Web 项目里可能有成百上千个 JavaScript 文件，它们之间相互依赖，没有工具可以告诉你到底哪个文件是最先被执行的，某些页面可能只要引用部分函数，不能一次全部载入。此时文件的管理就成了一个大问题，所以应用需要划分模块。目前ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单。它让引入尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

示例：

import xxx from 'xxx'

export default xxx

# 如何理解js工程化？

  js分模块引入，但是同样一个页面引用几十个js文件是不是很不美观？为了解决这个问题，我们需要将前端项目进行bundle。 这个概念下不管你的模块多乱，多分散，最终可以通过一个工具，直接转换为1 个 .js 文件。而这样的工具就叫做打包工具。这个过程就是工程化。

  常见的打包工具Webpack。Webpack 一般先打包构建再启动开发服务器，但是本地开发打包很慢。为了加快本地开发时的打包编译速度，可以使用Vite，先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件。

# 什么是CSS预处理？

  目前浏览器只认识css,但是我们知道css有缺点，有时候不能复用语句。所以某些高级的css语法也sass、less被创造出来。这些高级写法被称为css 预处理器，即这些写法要先被处理成 css，然后再以普通css 使用。