## 浏览器渲染过程 ![](https://img.smyhvae.com/20210114_2115.png) 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 完成后，其结果将在`