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