-
页面白屏阶段的优化方案
-
首屏渲染阶段的优化方案
-
首评秒开的X种方法?
-
懒加载
-
缓存
-
离线化
-
保证首次加载为秒开的离线包设计
-
并行化
-
骨架屏
-
组件骨架屏
-
图片骨架屏
-
NSR
-
SSR
-
webView
层及代码架构层面优化 -
WebView 性能优化
-
并行初始化
-
资源预加载
-
数据接口请求优化
-
前端架构性能调优
-
长列表性能优化
-
打包优化
-
性能立项
-
确定了就去搞起来吧。
-
性能实践
-
做好准备,尽情的在各种恶劣环境下把页面快速的折腾出来吧!
小结
现在,你对前端性能优化有了一个完整的认知了吗?很多时候谈论到性能优化首先需要谈到如何对性能进行“确诊”。虽然大部分情况,你不会被人问到是如何对性能进行监控的。(说话声音越来越小。。。)
接下来就细谈优化手段
1. 懒加载
最常见的优化手段之一。
懒加载是指在长页面加载过程时,先加载关键内容,延迟加载非关键内容。比如当我们打开一个页面,它的内容超过了浏览器的可视区口大小,我们可以先加载前端的可视区域内容,剩下的内容等它进入可视区域后再按需加载。
举个栗子。 天猫首页精选。上图。
正好是天猫618活动。这个IOS版的天猫首页精选。如果你经常访问天猫首页精选,你会发现它已经几乎做到了无痕浏览。懒加载在这就被运用的很好,当然,这里不仅仅是做了懒加载才达到这样的效果。
那只说懒加载,天猫首页精选做了什么呢? 猜猜看。
- 懒加载
-
图片懒加载
-
图片是
native
做过缓存的。 -
在可视区域出现才会加载
-
卡片预先加载(懒加载的时机改变)
-
并不是进入可视区域才加载卡片的。而是当上一张卡片进入可视区域就预先加载下一张卡片。 因为相对于图片,加载卡片UI会快得多。 这也是无痕浏览的保障之一。
-
动画懒加载
-
假如你快速的进行划屏滚动,
List
滚动高度发生很大变化,那请求数据最终还是会敌不过你的高速滑动。也就是说,在没有新的数据之前你看不到下一张卡片了,这是你必须等待了。这时候就会有一个loading
的动画显示,接着