短视频网站优化及 Cloudflare 初体验笔记

1. 首页加载速度优化。

弃用 https://github.com/naver/egjs-infinitegrid,改用 css 原生的 columns 实现瀑布流。

这个 infinitegrid 乍一用还挺不错的,瀑布流布局、无限加载,完全符合我的需求。但是它的默认行为是阻塞式的,即在所有项(我的是图片)加载完成后再一次性渲染。虽然其文档上有提到异步加载方式,我简单尝试了下,没成功。

columns 默认会打断(break)元素。比如我的元素是这样的:

1
2
3
4
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
阅读更多