---
title: 05-页面渲染性能优化
publish: true
---
## 浏览器渲染过程
1. 浏览器解析 HTML，生成 DOM Tree（Parse HTML）。
2. 浏览器解析 CSS，生成 CSSOM（CSS Object Model）Tree。
3. JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree，浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树（Render Tree）。
4. 布局（Layout）：根据生成的 Render Tree，进行回流，以计算每个节点的几何信息（位置、大小、字体样式等等）。
5. 绘制（Painting）：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素。
6. 展示（Display）：将像素发送给图形处理器（GPU），展示在页面上。
## 页面渲染技术方案总览
**服务端渲染**：
- 后端同步渲染、同构直出、BigPipe。
**客户端渲染**：
- JavaScript 渲染：静态化、前后端分离、单页面应用
- Web App：React、Vue、PWA
- Hybrid App：PhoneGap 、AppCan 等
- 跨平台开发：RN 、Flutter 、小程序等。
- 原生 App：iOS 、Android
建议：
- 依赖业务形式、依赖团队规模、依赖技术水平。
## 静态化技术方案
静态化是使动态化的网站生成静态 HTML 页面以供用户更好访问的技术，一般分为纯动态化和伪动态化。
技术优势：
- 提高了页面访问速度，降低了服务器的负担，因为访问页面时不需要每次去访问数据库。
- 提高网站内容被搜索引擎搜索到的几率，因为搜索引擎更喜欢静态页面。
- 网站更稳定，如果后端程序、数据库出现问题，会直接影响网站的正常访问，而静态化页面有缓存，更不容易出现问题。
技术不足：
- 服务器存储占用问题，因为页面量级在增加，要占用大量硬盘空间。
- 静态页面中的链接更新问题会有死链或者错误链接问题。
技术实现：
- 跑定时任务，将已有的动态内容进行重定，生成静态的 HTML 页面。
- 利用模板技术，将模板引擎中模板字符替换为从数据库字段中取出来的值， 同时生成 HTML 文件。
协作方式：
- 前端统一写好带有交互的完整静态页面。
- 后端拆分出静态页面文件，并嵌套在后端模板文件中。
选型建议：后端研发人员充分，又需要考虑用户体验、服务器负载的业务。
## 前后端分离技术与实现
前后端分离是指研发人员分离、业务代码分离、后端实现业务接口，前端渲染页面。
技术实现：
- 后端只负责功能接口实现，提供按照约定的数据格式并封装好的 API 接口。
- 前端负责业务具体实现，获取到 API 接口数据后，进行页面模板拼接和渲染，独立上线。
协作方式：
- 前端负责实现页面前端交互，根据后端 API 接口拼装前端模板。
- 后端专注于业务功能实现和 API 接口封装。
技术优势：
- 团队更加专注
- 提升了开发效率
- 增加代码可维护性
技术架构：
- 后端架构：Java、C++、PHP、 + Nginx，使用微服务（比如 Dubbo 等）等实现业务的解耦，所有的服务使用某种协议提供不同的服务（比如 JSF 等） 。
- 前端架构：使用 Angular、React、Vue 前端框架并部署页面至 CDN。
- 前端架构 2：使用 Angular、React、Vue 前端框架并部署在 Node Server。
技术不足：
- 因为前端需要负责一大部分业务逻辑实现，和服务端同步、静态化，需要前端人力非常多。
- 页面数据异步渲染，不利于 SEO，搜索引擎更喜欢纯静态页面。
选型建议：
- 这是大型互联网公司正在采用的开发模式，一句话，如果考虑用户体验，以及前端人力够用，就可以积极采用。
## 单页面应用技术方案
单页应用（single-page application，缩写 SPA），通过动态重写当前页面，来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法在使用过程中不需要重新加载页面，避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。
技术优点：
- 不错的加载速度：用户往往感觉页面加载非常快，因为一进入页面就能看到页面元素；
- 良好的交互体验：进行局部渲染，避免不必要的页面间跳转和重复渲染；
- 前后端职责分离：前端进行页面交互逻辑，后端负责业务逻辑；
- 减轻服务器负载：服务器只处理数据接口输出，不用考虑页面模板渲染和 HTML 展示。
技术缺点：
- 开发成本相对较高
- 首次页面加载时间过多
- SEO 难度比较大
技术实现：
- 使用 React、Vue 框架可以很好的。
## BigPipe 简介和工作模式
BigPipe 通过将页面加载到称为 Pagelet 的小部件中，来加快页面渲染速度，并允许浏览器在 PHB 服务器呈现页面的同时，一直请求页面不同区块的结构，类似一个“流”传输管道。
**技术实现**：
1. 浏览器从服务器请求页面。
2. Server 迅速呈现一个包含 标记的页面框架，以及一个包含空 div 元素的主体，这些元素充当 Pagelet 的容器。由于该页面尚未完成，因此与浏览器的 HTTP 连接保持打开状态。
3. 浏览器将开始下载 bigpipe.js 文件，然后它将开始呈现页面。
4. PHP 服务器进程仍在执行，并且一次构建每个 Pagelet 。Pagelet 完成后，其结果将在`