day7 如何通过模块化、异步和观察做到动态加载？

时间的角度上如何处理异步事件中的时间状态？
信任(trustable)和承诺(promise)
假设两个函数A B，如果A先响应，就没办法获取B信息；如果B先响应，就没办法获取A信息。这两个函数就形成了竞争关系。

var user;

getUser( userId, function onUser(userProfile){
    var orders = user ? user.orders : null;
    user = userProfile;
    if (orders) {
        user.orders = orders;
    }
} );

getOrders( userId, function onOrders(userOrders){
    if (!user) {
        user = {};
    }
    user.orders = userOrders;
} );

时间就是状态在同步操作中不需要考虑时间；而在异步中时间就是状态，也是最难管理的状态。
在Javascript里，解决异步问题的工具叫做承诺(promise)。
如何处理循环事件中的时间状态？
在函数式和响应式编程中，除了网络事件，还有更多的例子是通过去掉时间，比如循环或是用户事件，都可以用类似同步的方式来处理异步事件。
勤奋的生产者：消费者希望在生产者发生变化的时候，能随之映射出变化，这时候如果我们生产者很勤奋，实时地在生产，消费者也可以实时地来消费。
懒惰的生产者：把生产者当做一个被观察对象。每当它发生变化时，就随之做出反应，这就是“函数式中的异步模式”和“响应式中观察者模式”的结合。

如何处理用户事件中的时间状态？
页面上内容的动态加载时使用到的一些方法。
页面模块从加载到执行的4个步骤：1、加载，2、解析，3、编译，4、执行。

动态导入：一类是可视式加载，一类是交互式加载。
可视式加载：(懒加载 Lazy loading)
经常用在长页面当中，就是不需要一上来就加载整个页面，而是在用户滑到了某个部分的时候，再加载相关的内容。
交互式加载：就是当用户和页面进行交互时，比如点击了某个按钮，可能产生的加载。
初始化的加载中，关注的通常是首次渲染时间（FCP，First Contentful Paint）和最大内容渲染时间（LCP，Largest Contentful Paint），也就是页面首次加载的时候。

在使用动态导入前，一般应该先考虑预加载（pre-load）或预获取（pre-fetch）。
它们两个的区别是，前者是在页面开始加载时就提前开始加载后面需要用到的元素；后者是在页面的主要功能都加载完成后，再提前加载后面需要用到的素材。

一种是浏览器渲染：在客户端渲染（CSR，client side rendering）模式下，我们是先下载 HTML、JS 和 CSS，包括数据，所有的内容都下载完成，然后再开始渲染。
一种是服务器端渲染：SSR 服务器端渲染（SSR，server side rendering）模式下，我们是先让用户能看到一个完整的页面，但是无法交互。只有等相关数据从服务器端加载和 hydrate 后，比如说一个按钮加上了的相关事件处理之后，才能交互。
这个方案看上去比 CSR 会好一些，但它也不是没有问题的。比如说，我们作为用户使用一些应用有时候，也会遇到类似的问题，就是我们在加载和 hydrate 前点击某个按钮的时候，就会发现某个组件没反应。