Open slogeor opened 5 years ago
JavaScript
HTML
HTTP
仅有一个 div 根节点,以 VUE 为例,div#app 注册一个空的 div
div
div#app
包含页面的基本框架,但没有数据内容,对应 VUE 生命周期的 mounted
mounted
包含页面所有元素及数据,对应 VUE 的生命周期中的 updated
updated
利用预渲染方案优化首屏白屏等待时长
https://juejin.im/post/5bee7dd4e51d451f5b54cbb4
前端渲染的基本概念
CSR(Client Side Rendering)
JavaScript
进行渲染HTML
无内容的文档SSR(Server-Side-Rendering)
HTTP
请求同构
预渲染
三个基本术语
FP(First Paint): 首次绘制
仅有一个
div
根节点,以 VUE 为例,div#app
注册一个空的div
FCP(First Contentful Paint): 首次内容绘制
包含页面的基本框架,但没有数据内容,对应 VUE 生命周期的
mounted
FMP(First Meaningful Paint): 首次有效绘制
包含页面所有元素及数据,对应 VUE 的生命周期中的
updated
不同渲染方式的对比
CSR 优点
CSR 缺点
SSR 优点
SSR 缺点
同构优点
同构缺点
性能优化常规操作
减少 HTTP 数量
加快请求响应速度
减少资源的体积
优化体验
案例分析: 首屏白屏优化
浏览器渲染关键路径
首屏白屏原因
mounted
后,界面显示出大体框架解决方法
利用预渲染方案优化首屏白屏等待时长
构建时预渲染方案
参考文献