[第二期]无限滚动加载的通用组件

[leecade]

无限滚动组件

基本要求

1. 要求实现三种列表样式，详见设计图部分
2. 可无限加载新内容，页面不会卡死

后端要求

1. 实现数据分页，数据 mock 一份即可

2. 可自己搭建服务，自选框架，比如 koa2，不强制使用 fe

3. 有 api 和静态资源分类的概念

4. 列表数据格式可参考

   [{	
   	id: "hahahahahha",
   	index: 0,
   	title: "我是标题，要短",
   	desc: "我是描述，我很长。",
   	// pic: "http://xxx.xx.x/xxxxx.avi",
   	pic: "http://xxx.xx.x/xxxxx.png",
   	date: 
   },{
   	// ...
   }]
   

前端要求

1. 实现滚动加载机制，思考 scroll 事件 与 intersection observer 两种实现方式的区别，和各自优缺点，择一进行实现
2. 重点关注页面滚动性能，页面不卡顿，保持滚动帧率 60fps
3. 理解优化方案
4. 适配多移动终端

设计图

1. 文字列表
   

2. 普通的图文列表
   

3. 带 css3 动画、特效、蒙层、变换 的列表
   

技能

1. 原生 js 编写
2. 前端调试技巧
3. 基于 vscode 的 node 调试工具
4. 自我学习，知识检索能力

[leecade]

Refs:

http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-performance-and-the-new-flickr-home-page/

https://www.html5rocks.com/en/tutorials/speed/scrolling/

https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

https://www.html5rocks.com/en/tutorials/speed/layers/

https://docs.google.com/presentation/d/1WsFzuaf595k4WL1nQK0kpkj3rYOP-Bm20jpHAB4YUGI/preview#slide=id.p

http://jankfree.org/

http://scrollerjs.com/talks/velocity2014

https://csstriggers.com/

https://www.smashingmagazine.com/2013/06/pinterest-paint-performance-case-study/

https://ariya.io/2013/08/javascript-kinetic-scrolling-part-1
http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html

http://bdadam.com/blog/panning-and-scrolling-background-images-using-the-canvas-element.html

http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/