记一次播放器页面白屏时间优化方案

2022-03-17
阅读 4 分钟
1.8k
外部进入,包括筛选页进入、分享链接进入、用户详情页进入和页面强制刷新,此时白屏时间可以理解为浏览器输入 url 到播放器播放的时间,主要流程分为四部分:完全白屏,FP(First Paint) 之前流程
封面图

webpack 性能调优报告,极限压缩 monaco 编辑器

2022-03-17
阅读 6 分钟
7.1k
调优成果 优化前优化后优化比例打包体积32.01 MB13.57 MB57.61%Gzip 体积3.37 MB1.47 MB MB56.38%文件数量821976.83%资源压缩服务器 br 压缩客户端 br 压缩1压缩级别611(最高)1构建速度60s +41.1s +31.67%播放页 FP 耗时明显感知无感知1(以上数据来源为本地测试,仅供参考)优化目标降低播放页 FP 耗时减少静态资源请...
封面图

前端性能优化 - 缓存机制和 Service Worker

2022-03-17
阅读 13 分钟
3.9k
PWA(Progressive Web Apps)不是特指某一项技术,而是应用多项技术来改善用户体验的 Web App,为 Web App 提供类似 Native App 的用户体验。其核心技术包括 Web App Manifest,Web Push,Service Worker 和 Cache Api 等,用户体验才是 PWA 的核心。 PWA 主要特点如下:
封面图

深入剖析let/const在for循环中的作用原理

2021-03-31
阅读 2 分钟
1.7k
快速排序 {代码...} 归并排序 {代码...}
封面图