前端？

什么是前端？这里的前端主要是指web相关的前端，如果你还是以HTML CSS JavaScript 为技术栈。

资料

• 学习 Web 开发的最佳实践
• https://developers.google.com/web/fundamentals

HTML CSS JavaScript分别是干嘛用的？

要开发一个页面，我们的思路可以顺着

1. HTML决定页面上应该有什么东西，比如标题、文章内容、图片、音、视频......不同的标签代表不同的内容。
   涉及到 sementic 语义化，有利于SEO；
2. 长什么样子：CSS；
3. 能干什么：通过JavaScript，为页面添加交互；

浏览器渲染流程

• 创建对象模型

PG

编译解释动态静态强类型弱类型=》纬度不一样

JavaScript

类型

Primitive

• 7个；
• 对应的包装类；
• typeof的结果；
• 如何准确检测类型，比如null

变量提升

(() => {
    // var showNmae 是声明式规则如同变量
    // 函数式一等公民 提升 声明 赋值 一致
    var print;

    print = function() {
        console.log("来自函数定义");
    }

    print();
    print = function() {
        console.log("来自函数声明赋值");
    }
})();


(() => {
    // var showNmae 是声明式规则如同变量
    // 函数式一等公民 提升 声明 赋值 一致
    print();
    var print = function() {
        console.log("来自函数声明赋值");
    }

    function print() {
        console.log("来自函数定义");
    }
})();

(() => {
    /*已经是尾递归了,JS 尾递归未必有优化，得看引擎的具体实现，目前chrome 调用栈会爆 Stack Overflow*/
    function runStack(n, result) {
        return n < 1 ? result : runStack(n - 2, result);
    }
    console.log("runStack(50000)", runStack(25172, 100));
})();

尾递归不起作用还跟引擎有关系

全局执行上下文、函数执行上下文和 eval 执行上下文与此对应的this也有三种。作用域链和 this 是两套不同的系统，this是自带的变量集合。面向对象中，this指向当前类实例是国际惯例，JavaScript中的this就比较扯。

---

• 变量没有数据类型
• 值才有数据类型
  • 基本类型是值引用,放栈
  • 对象类型是址引用,放堆

执行函数=》函数作用域=》执行上下文=》栈空间=》编译=》变量提升=》变量环境+词法环境+可执行代码=》遇到函数=》快速词法扫描=》内部对外部变量有引用=》在栈空间中添加clourse变量，将引用的变量从栈中放入clourse中=》执行完成需要垃圾回收=》因为外部存在引用=》回收不能=》闭包。

垃圾回收

栈空间：当前执行状态的指针（称为 ESP）
堆空间：垃圾回收理论=》代际假说=》The Generational Hypothesis
不是命短，就是命长=》Scavenge（打扫）=》副垃圾回收器=》
新生代=》大小=》复制=》空闲区、对象区=》对象区满=》垃圾清理=》两次都还活着=》命长=》主垃圾回收器=》老生代=》标记清除法 Mark-sweep=》有碎片=》标记 - 整理（Mark-Compact）=》全停费时间=》增量标记 Incremental Marking（分片）

两害相权取其轻，两利相权取其重

JavaScript运行原理

编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）

解释器Ignition
编译器TurboFan

分词=》token、解析=》AST、字节码、机器码

JIT HotSpot

事件循环

JS本身没有事件循环系统，是宿主环境提供（浏览器 nodejs）；

延迟队列。

/*在Promise中延时的实现是一个微任务=》Promise是微任务，在resolve的时候就异步了*/
function resolve(value) {
          setTimeout(()=>{
              onResolve_(value)
            },0)
    }

任务队列=》完成一个任务就询问延迟队列是否有需要执行的任务。
setTimeout是添加回调到延迟队列，clearTimer是从延迟队列中移除。
setTimeout的延迟时间不被信任，0 嵌套层数5,4ms，非当前tab1000ms，最大32。

• async 函数返回的是一个 Promise 对象

(async () => {
    async function foo() { console.log('foo') }
    async function bar() {
        console.log('bar start');
        await foo();
        console.log('bar end');
    }
    console.log('script start')
    new Promise(function (resolve) {
        console.log('promise executor');
        resolve();
    }).then(() => { console.log('micro 1-1') }).then(() => { console.log('micro 1-2') }).then(() => { console.log('micro 1-3') }).then(() => { console.log('micro 1-4') }).then(() => { console.log('micro 1-5') }).then(() => { console.log('micro 1-6') })
    setTimeout(() => {
        console.log('setTimeout macro');
    }, 0);
    bar();
    new Promise(function (resolve) {
        console.log('promise executor');
        resolve();
    }).then(() => { console.log('micro 2-1') }).then(() => { console.log('micro 2-2') }).then(() => { console.log('micro 2-3') }).then(() => { console.log('micro 2-4') }).then(() => { console.log('micro 2-5') }).then(() => { console.log('micro 2-6') })
    console.log('script end sync');
})();