页面渲染

一、过程

1、浏览器解析HTML，生成DOM Tree

2、浏览器解析CSS，生产CSSOM Tree

3、JavaScript会通过DOM API 和CSSOM API 来操作DOM Tree和CSS Rule Tree，浏览器将DOM Tree和CSSOM Tree合成渲染树（Render Tree）

4、布局(layout)：根据Render Tree进行回流，计算每个节点的几何信息

5、绘制：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素

6、展示：将像素发送给GPU在页面展示

二、主流技术架构

1、服务端渲染：后端同步渲染（JSP、Node.js等，能够快速实现业务开发并上线，优势：快。协助利器：jSmart、Velocity.js。）、同构直出（一套代码既可以在服务端运行，又可以在客户端运行。技术实现:Next.js、Gatsbyjs、nuxt.js）、BigPipe（pagelet、流）

2、客户端渲染：

　　JavaScript渲染：

　　　　静态化（使动态化的网址生成静态HTML页面以供用户更好访问的技术，一般分为纯静态化和伪静态化。优势：提高访问速度、降低服务器负担。缺点：服务器存储占用问题、静态页面中的链接更新会出问题。技术实现：定时任务、模板技术）、

　　　　前后端分离（后端提供API，前端从API获取数据并进行渲染和显示；后端：java、php+nginx、微服务等。前端：angular、react、vue部署到cdn或node server）

　　　　单页面应用（通过动态重写当前页面，来与用户交互。适用于：重交互页面业务、核心链路场景业务）

　　WebAPP：Angular、React、Vue等，PWA(核心是service worker，浏览器支持80+%)

　　原生APP：ios、Android

　　Hybrid App:PhoneGap、AppCan

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

三、页面渲染技术选型的合理化建议：

1、存在即合理

2、依赖业务形式

3、依赖团队规模

4、依赖技术水平

5、没有银弹

四、页面加载

1、懒加载：延迟加载。长网页中延迟加载特定元素，可能是图片、js/css文件或js的特点函数和方法。可以减少当前屏无效资源的加载。data-lazy属性实现。

2、预加载：提前加载所需的资源到浏览器本地。减少用户后续加载资源等待的时间。实现：HTML标签，显示属性设为none；使用image对象；使用preload、prefetch、preconnect、

3、预渲染

4、按需加载：

　　常规按需加载：js原生、jQuery

　　不同APP按需加载：js-sdk脚本文件

　　不同设备按需加载：PC端和html5端样式文件

　　不同分辨率按需加载:CSS Media Query

　　react异步载入

　　Vue异步载入

5、楼层式加载：楼层数据异步加载和本地缓存相结合的方式