一、过程
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、楼层式加载：楼层数据异步加载和本地缓存相结合的方式