90%的人都不知道的前端性能优化技巧（上）(1)

• 页面白屏阶段的优化方案

• 首屏渲染阶段的优化方案

• 首评秒开的X种方法？

• 懒加载

• 缓存

• 离线化

• 保证首次加载为秒开的离线包设计

• 并行化

• 骨架屏

• 组件骨架屏

• 图片骨架屏

• NSR

• SSR

• webView层及代码架构层面优化

• WebView 性能优化

• 并行初始化

• 资源预加载

• 数据接口请求优化

• 前端架构性能调优

• 长列表性能优化

• 打包优化

• 性能立项

• 确定了就去搞起来吧。

• 性能实践

• 做好准备，尽情的在各种恶劣环境下把页面快速的折腾出来吧！

小结

现在，你对前端性能优化有了一个完整的认知了吗？很多时候谈论到性能优化首先需要谈到如何对性能进行“确诊”。虽然大部分情况，你不会被人问到是如何对性能进行监控的。（说话声音越来越小。。。）

接下来就细谈优化手段

首屏秒开的多种优化手段

---

1. 懒加载

最常见的优化手段之一。

懒加载是指在长页面加载过程时，先加载关键内容，延迟加载非关键内容。比如当我们打开一个页面，它的内容超过了浏览器的可视区口大小，我们可以先加载前端的可视区域内容，剩下的内容等它进入可视区域后再按需加载。

举个栗子。 天猫首页精选。上图。

正好是天猫618活动。这个IOS版的天猫首页精选。如果你经常访问天猫首页精选，你会发现它已经几乎做到了无痕浏览。懒加载在这就被运用的很好，当然，这里不仅仅是做了懒加载才达到这样的效果。

那只说懒加载，天猫首页精选做了什么呢？ 猜猜看。

1. 懒加载

• 图片懒加载

• 图片是native做过缓存的。

• 在可视区域出现才会加载

• 卡片预先加载（懒加载的时机改变）

• 并不是进入可视区域才加载卡片的。而是当上一张卡片进入可视区域就预先加载下一张卡片。 因为相对于图片，加载卡片UI会快得多。 这也是无痕浏览的保障之一。

• 动画懒加载

• 假如你快速的进行划屏滚动，List滚动高度发生很大变化，那请求数据最终还是会敌不过你的高速滑动。也就是说，在没有新的数据之前你看不到下一张卡片了，这是你必须等待了。这时候就会有一个loading的动画显示，接着