协作方式:前端开发页面,后端拿到页面模版后加入业务逻辑
优点:快速实现业务开发并上线
不足:
-
取数据库数据和输出 HTML 内容,用户等待时间较长,可能出现白页面;
-
代码耦合严重,不易区分业务逻辑和模版;
-
需求变更上线周期较长
1.1 后端同步渲染(JSP 等后端语言渲染出页面)
-
JSP Servlet 映射以 .jsp 结尾的 URL,当 .jsp 文件请求时,Servlet 容器知道要调用哪个 Servlet
-
Servlet 容器检查 Servlet 是否已被编译
-
如未编译则 Servlet 容器将 JSP 转换为 Servlet 代码,进行编译
-
Servlet 容器将 JSP 请求转发到编译 JSP Servlet 类
-
JSP Servlet 类返回并发送给客户端浏览器 HTML
1.2 同构直出(Node.js 使用 Node Server 渲染)
同构:一套代码既可以在服务端运行,也可以在客户端运行
技术优势:
-
性能:降低首屏渲染时间
-
SEO:服务端渲染对搜索引擎的爬取有天然优势
-
兼容性:有效规避客户端兼容性问题,如白屏
-
代码同构:直接上线两个版本,利于灾备
技术实现:
-
next.js:服务器端渲染 React 组件框架
-
gatsby.js:服务端 React 渲染框架
-
nuxt.js:服务器端渲染 Vue 组件框架
协作方式:
-
后端专注于业务功能实现和 API 接口封装
-
前端负责实现页面交互,根据后端 API 接口封装前端模版,页面渲染,以及服务器维护
选型建议:
-
前端要处理 node serve 的机器环境、代码部署、日志、容灾、监控等运维知识,前端人员的综合能力要求比较高
-
前端开发周期变长了,需要实现与产品、运营沟通排期
-
前端能力和人力够时首选
1.3 BigPipe(网页动态加载,分块传输到客户端进行渲染)
BigPipe 通过将页面加载到 pagelet(自定义控件) 的小部件中,来加快页面渲染速度,并允许浏览器在 PHP 服务器呈现页面的同时,一直请求页面不同区块的结构,类似“流”传输管道
-
浏览器从服务器请求页面
-
serve 迅速呈现一个包含 head 标记的页面框架,一个包含空 div 的主体,这些元素充当 pagelet 的容器,由于页面尚未完成,浏览器的 HTTP 连接保持打开状态
-
浏览器开始下载 bigpipe.js 文件,然后开始呈现页面
-
PHP 服务器仍在执行,依次构建每个 pagelet,pagelet 完成后,通过
<script> BigPipe.onArrive(...) </script>
发送给浏览器 -
浏览器将收到的 HTML 代码注入到正确位置,如果小页面需要任何 CSS 资源,也将下载这些 CSS 资源
-
接收完所有的页面集后,浏览器开始加载页面集所需的所有外部 JS 文件
-
下载完 JS 后,浏览器执行所有内联 JS
2 客户端渲染
-
JS 渲染:静态化、前后端分离、单页应用
-
Web APP:NG、React、Vue,PWA(渐进式 Web 应用)
-
原生 APP:IOS Android
-
Hybrid App(混合式开发 APP):PhoneGap、AppCan 等
-
跨平台开发:RN、flutter、小程序等
2.1 PWA
渐进式 Web 应用,使用特定技术和标准模式开发的 Web 应用,同时赋予它们 Web 应用和原生应用的特性
技术优势:
-
用户可以用手机屏幕启动应用,离线或弱网情况下,通过事先缓存的资源,可以正常加载运行当前应用,完全消除对网络的依赖,给用户非常可靠的体验
-
预先缓存了资源,部分资源无需经过网络,页面秒开
-
和移动设备上的原生应用一样,具有沉浸式的用户体验
-
内容可以被搜索引擎收录
-
可以给用户发送离线推送信息
技术实现:
-
全线改造成 HTTPS,没有 HTTPS 就没有 Service Worker
-
应用 Service Worker 提升性能,离线提供静态资源文件,提升首屏用户体验
-
使用 APP Manifest
-
考虑离线消息推送等功能