# Lazy Load on Web

JS: const xxx = import("/** Webpack Dynamic Importer */ axios");

Images: Dorminant Color Placeholder(K-means clustering)

参考： https://gist.github.com/samuelclay/918751

Low Quality Image Placeholder （LQIP） 常见于1000px等高质量图片网站以及Medium

CSS ？ 暂无解决方案，CSS动态添加对引擎和页面优化来说都是很困难的一项。

Video 基本没有自动加载的，都是点击播放开始加载。

Font 首屏闪烁、首屏无样式 FOUT/FOIT Ref: https://www.zachleat.com/web/comprehensive-webfonts/ CSS3 FontFace 现在是Draft A diagram describing the relationship between the font loading strategies 一些Demo：https://www.zachleat.com/web-fonts/demos/foft.html

另外一些思考： https://hackr.io/news/javascript/networkidlecallback-detecting-network-idle-time-on-the-browser-using-service-workers Network Idle Callback在没有正式API之前，实现都是通过监听DOMContentLoad这个函数，但是这个函数又有不定期的trigger。 对于具体的场景还是有不一样，还有一些的workaround是通过注册Web Worker，这个会自动在网络空闲的时候请求。 src： https://github.com/pastelsky/network-idle-callback/blob/master/index.js