文章 | 新的开始

requestAnimationFrame

更好的逐帧动画函数 — requestAnimationFrame 简介
 从setTimeout谈JavaScript运行机制
 requestAnimationFrame 动画接口
 你需要知道的requestAnimationFrame
js动画—–setTimeout、setInterval、requestAnimationFrame
谈谈requestAnimationFrame的动画循环

requestAnimationFrame

SCSS

SASS基础教程

javascript运行机制

浏览器的渲染线程与JavaScript引擎线程是互斥的,这容易理解,因为JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.
浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件也是异步事件.
JavaScript 运行机制详解：再谈Event Loop
Javascript定时器学习笔记
 理解 JavaScript 的 async/await
async 函数的含义和用法

commonjs是同步的，为服务端设计的，不适用前端，所以有了使用define([依赖项列表],function(依赖项列表){})定义的 amd
通用模块定义(Universal Module Definition) ，即我们通常说的 UMD ，就是用来解决这个特殊问题的。本质上，UMD 是一套用来识别当前环境支持的模块风格的 if/else 语句。

// UMD 风格编写的 sum 模块
//sum.umd.js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['add', 'reduce'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('add'), require('reduce'));
    } else {
        // Browser globals (root is window)
        root.sum = factory(root.add, root.reduce);
    }
}(this, function (add, reduce) {
    //  private methods

    //    exposed public methods
    return function(arr) {
      return reduce(arr, add);
    }
}));

在当前的JavaScript模块系统中，你必须执行代码，来找出什么是导入和什么是导出。这是 ECMAScript 6 与这些模块系统（注：指 CMD，AMD）决裂的主要原因：通过将模块系统构建到JavaScript语言中，您可以在语法上强制执行静态模块结构。让我们先来看看这意味着什么，带来什么好处。

模块的静态结构，意味着您可以在编译时确定导入和导出（静态） – 你只需要看看源代码，你不必执行它，webpack的打包优化也依赖这一点。下面是两个 CommonJS 模块的例子，告诉你为什么 CommonJS 模块在编译时确定导入和导出是不可能的。在第一示例中，你必须运行代码才可以找出它导入的是什么：