懒加载之intersection observer

聊聊intersection observer

二话不说先上链接

先说说为什么最近在看这个

最近在做性能优化。每一个工程师代码量积累到一定程度之后总有一天会遇到这个问题，那就是性能问题。而我在写了快一年半的前端之后，也自然而然遇到了性能问题。其实性能问题之前就有遇到，只不过当时工程量比较小，觉得应该要等到成熟一点再考虑这个事情（事实证明这个思路是正确的）。而性能优化真的是个大话题，关于性能优化其实我有非常多的心得，虽然现在还是处于摸索阶段。

针对业务场景自然而然想到去用intersection observer

我们的业务场景会在首屏渲染非常多的东西，多到需要等待十几秒才能看到页面。而需要这么多时间的根本原因是页面需要渲染的东西过多。之前写的时候不懂那么多，就按着业务逻辑来，设计师估计也没考虑这么多好看就行。当突然某一天需要在首页加载很大的数据量的时候就凉凉了。(现在老板每次打开首页都得等个10几秒，羞愧。。好在好像勉勉强强能接受)但是其实我们这个网页和其他人的网页都有个很大的共同点就是首屏数据并没有特别多。我试了一下将其他地方用ngif注掉，只渲染首屏，除去后端初始化的数据，光渲染部分只需要不到1秒钟。

查了很多资料，发现比较适合的有两个方向，intersection observer和virtual scroll。翻译过来就是响应式观察和虚拟滚动。其实他们两个的目的一样，就是每次只渲染用户看到的部分，当用户滚动、切屏等操作想要看到新内容时，才会去渲染新内容。

其实也可以不用intersection observer,自己硬写问题不大。原理其实还是比较简单的，就是监听用户滚动操作，拿到当前的scrollTop和设置了滚动的元素的height，计算出可视范围(viewport)，然后在每个单元组件去查看自己所属的元素是否在这个可视范围内，若是则渲染，不是则忽略。

然后就开始做起来了

上述思路虽然说起来容易，其实想要实现起来也很容易，但是若自己操作则需要考虑兼容性问题、代码规范问题、测试问题等等，而intersection observer其实是帮我们将一系列操作包好，形成一系列响应式api，我们只需要结合rxjs就可以很轻易的用起来了。

我也可以简单说一下我的思路。new一个全局唯一的observer，参数需要传想要监听滚动的root元素，各子child元素与root元素交叉百分之多少则视为可视。我用的是angular，所以我写了一个service来加载这个obsserver，写了一个directive来绑定root元素，再写一个directive来绑定想要懒加载的元素。service只暴露一个方法，即当前可视的元素都有哪些，再结合rxjs，就能实现了。

说一下该做法下懒加载的过程。当刚刚打开页面时，对于html来说其实所有元素还是加载了，只不过会根据intersection observer选择性的只渲染最小单位，说白了就是只要这个元素能有就行了，一些复杂的子元素，会很消耗性能的都ngif干掉（ngif异步小技巧，即如果绑定的变量是异步的，比如有个变量为const sub$= new Subject()，那可以这么写(ngIf=‘sub$ | async’)，angular ngif的内部实现会帮你去subscribe该变量，且还能帮你在组件销毁时unsubscribe该变量，非常方便）。而对于js来说，也可以将很多耗时的代码都放到subscribe当中。视觉上来说，在滚动时，看起来像流水一样，不停哗啦啦加载出东西。

结局

感觉自己并没有吃透，因为一顿操作之后重新计时，发现也就快了200ms。对于整体的10几秒钟来说感觉像没优化过一样。也有可能是我没敢大张旗鼓地去重构我们的代码，很多消耗性能的代码没去优化。但是至少我觉得这个思路应该是正确的，剩下的就是一点点去抠哪里消耗性能，然后用intersection observer对它作懒加载。还是比较有信心能达到想要的效果的。

再说说虚拟滚动

虚拟滚动也是另一个特别好的思路。我们的业务场景不是特别适合，但是给了我一个新的思路就是我也不一定要死抠技术实现，有时候设计师只要在设计上动点脑子，把我这个需求也考虑进去，说不定就可以很简单的实现了。我已经在孜孜不倦洗脑设计师能尽快出下一版，然后把我这个思路考虑进去，使得我可以更方便做懒加载页面。

关于懒加载

关于懒加载我目前觉得最好的思路还是vscode。我有看过源码，虽然还没花大量时间去抠细节，但是vscode跳转(就是在vscode可以跳转引用，应该很多ide都有，只不过我目前只看过vscode)的思路就是它能精确计算出需要跳转到的元素在哪个位置，即哪个目录，哪个文件，滚动多少像素。只有将页面元素结构规划好，并用计算的方式去拿到各个元素，才能从根本上去做懒加载。

最后再说说性能优化

我最近对前端的性能优化真的特别有兴趣，csr,ssr,懒加载,cdn等等都有在看。希望能和更多人交流。