前端性能优化-页面渲染架构设计与性能优化2-页面渲染技术架构和方案总览

本文地址：https://www.cnblogs.com/veinyin/p/14380909.html

 

一些常见的页面渲染技术，可根据需要选型

1 服务端渲染

协作方式：前端开发页面，后端拿到页面模版后加入业务逻辑

优点：快速实现业务开发并上线

不足：

• 取数据库数据和输出 HTML 内容，用户等待时间较长，可能出现白页面；

• 代码耦合严重，不易区分业务逻辑和模版；

• 需求变更上线周期较长

1.1 后端同步渲染（JSP 等后端语言渲染出页面）

1. JSP Servlet 映射以 .jsp 结尾的 URL，当 .jsp 文件请求时，Servlet 容器知道要调用哪个 Servlet

2. Servlet 容器检查 Servlet 是否已被编译

3. 如未编译则 Servlet 容器将 JSP 转换为 Servlet 代码，进行编译

4. Servlet 容器将 JSP 请求转发到编译 JSP Servlet 类

5. 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 服务器呈现页面的同时，一直请求页面不同区块的结构，类似“流”传输管道

1. 浏览器从服务器请求页面

2. serve 迅速呈现一个包含 head 标记的页面框架，一个包含空 div 的主体，这些元素充当 pagelet 的容器，由于页面尚未完成，浏览器的 HTTP 连接保持打开状态

3. 浏览器开始下载 bigpipe.js 文件，然后开始呈现页面

4. PHP 服务器仍在执行，依次构建每个 pagelet，pagelet 完成后，通过 <script> BigPipe.onArrive(...) </script> 发送给浏览器

5. 浏览器将收到的 HTML 代码注入到正确位置，如果小页面需要任何 CSS 资源，也将下载这些 CSS 资源

6. 接收完所有的页面集后，浏览器开始加载页面集所需的所有外部 JS 文件

7. 下载完 JS 后，浏览器执行所有内联 JS

2 客户端渲染

1. JS 渲染：静态化、前后端分离、单页应用

2. Web APP：NG、React、Vue，PWA（渐进式 Web 应用）

3. 原生 APP：IOS Android

4. Hybrid App（混合式开发 APP）：PhoneGap、AppCan 等

5. 跨平台开发：RN、flutter、小程序等

2.1 PWA

渐进式 Web 应用，使用特定技术和标准模式开发的 Web 应用，同时赋予它们 Web 应用和原生应用的特性

技术优势：

• 用户可以用手机屏幕启动应用，离线或弱网情况下，通过事先缓存的资源，可以正常加载运行当前应用，完全消除对网络的依赖，给用户非常可靠的体验

• 预先缓存了资源，部分资源无需经过网络，页面秒开

• 和移动设备上的原生应用一样，具有沉浸式的用户体验

• 内容可以被搜索引擎收录

• 可以给用户发送离线推送信息

技术实现：

• 全线改造成 HTTPS，没有 HTTPS 就没有 Service Worker

• 应用 Service Worker 提升性能，离线提供静态资源文件，提升首屏用户体验

• 使用 APP Manifest

• 考虑离线消息推送等功能