【总结】H5首屏优化方案

[slogeor]

前端渲染的基本概念

CSR(Client Side Rendering)

• 由客户端的 JavaScript 进行渲染
• 首次发送请求加载 HTML 无内容的文档
• 接着将会请求更多包含 HTML 字符串的 JavaScript 文件

SSR(Server-Side-Rendering)

• 由服务端把渲染完整的页面返回给客户端
• 减少了一次客户端到服务端的一次 HTTP 请求
• 加快响应速度，可用于首屏的性能优化

同构

• 基于React、Vue 框架，客户端渲染和服务器端渲染相结合
• 服务端执行一次，用于实现服务器端渲染（首屏输出）
• 客户端再执行一次，用于接管后续的页面交互

预渲染

三个基本术语

FP(First Paint): 首次绘制

仅有一个 div 根节点，以 VUE 为例，div#app 注册一个空的 div

FCP(First Contentful Paint): 首次内容绘制

包含页面的基本框架，但没有数据内容，对应 VUE 生命周期的 mounted

FMP(First Meaningful Paint): 首次有效绘制

包含页面所有元素及数据，对应 VUE 的生命周期中的 updated

不同渲染方式的对比

CSR 优点

• 不依赖数据
• FP 时间最快
• 客户端用户体验好

CSR 缺点

• SEO 不友好
• FCP 、FMP 慢

SSR 优点

• SEO 友好
• 首屏性能高，FMP 比 CSR 快

SSR 缺点

• 模板维护成本高

同构优点

• SEO 友好
• 客户端用户体验好
• 首屏性能高，FMP 比 CSR 快

同构缺点

• Node 容易形成性能瓶颈

性能优化常规操作

减少 HTTP 数量

• 缓存
• 请求合并

加快请求响应速度

• CDN
• 预解析 DNS
• 域名数量

减少资源的体积

• 资源合并
• GZIP

优化体验

• 首屏渲染
• 骨架屏

案例分析: 首屏白屏优化

浏览器渲染关键路径

• HTML 解析
• DOM 树构建
• CSSOM 构建
• JavaScript 解析
• 布局
• 绘制

首屏白屏原因

• 等待 HTML 文档返回，此时处于白屏状态
• 对 HTML 文档解析完成后进行首屏渲染，等待页面渲染，一般是灰屏
• 进行文件加载、JavaScript 解析等过程，导致界面长时间出于灰屏中
• 当 VUE 实例触发了 mounted 后，界面显示出大体框架

解决方法

利用预渲染方案优化首屏白屏等待时长

构建时预渲染方案

• step1: 读取配置，获取需要预渲染的页面
• step2: 发布机模拟浏览器环境打开页面
• step3: 页面脚本触发渲染时机
• step4: 渲染输出当面页面内容
• step5: 获取当前所有的 DOM 结构
• step6: 生成 HTML 文件

参考文献

• https://juejin.im/post/5bee7dd4e51d451f5b54cbb4

[slogeor]

页面加载优化的主旨思想

• 降低首屏等待的时长

页面加载优化的主要策略

• 减少HTTP请求数量
• 减少HTPP请求时长
• 减少资源文件的体积
• 优化体验，加强交互

页面加载优化的核心利器

• 缓存

参考文献

https://juejin.im/post/5bee7dd4e51d451f5b54cbb4

[slogeor]