发现了一个系列的文章: js是如何工作的, 写的特别棒, 特别清晰.
中文链接: https://segmentfault.com/a/1190000018059329
建议直接看英文原版, 中文会严重的看不懂: https://medium.freecodecamp.org/how-to-improve-your-javascript-skills-by-writing-your-own-web-development-framework-eed2226f190

  • 第一篇, 讲了内存堆和运行栈. js的基础构造还是很经典的.

  • 第二篇, 讲了v8的编译原理, 最后再尾部告诉我们这些其实都不用了, v8升级了.

  • 第三篇, 很有趣讲内存调度, 内存泄漏. 其实闭包泄漏那个例子, 我一开始也没看懂, 后来开了chrome的调试器跟进去看:

      var theThing = null;
    var replaceThing = function() {
        var originalThing = theThing;
        var unused = function() {
            if (originalThing) // a reference to 'originalThing'
                console.log("hi");
        };
        theThing = {
            longStr: new Array(1000000).join('*'),
            someMethod: function() {
                console.log("message"); 
            }
        };
    };
    setInterval(replaceThing, 1000);
    • 这里的问题是, 由于有unsued的(引用了originalthing)存在, 导致, 出现了一个给somemethod使用的scopese(闭包的环境上下文)存在,
    • 这个scopese里面保留了originalthings, 而这个originalthings其实是一个指向前一个thething的引用,
    • 导致, 每一次执行replacething时, 都有一个引用指向之前的thething, 这就形成了一个链.
    • 这里间隔单很详细: https://blog.meteor.com/an-interesting-kind-of-javascript-memory-leak-8b47d2e7f156

  • 第四篇, 讲了异步调用, 很清晰.

  • 第五篇, websocket和http2.

  • 第六篇, webassembly和source map, web worker

  • 第七篇, web worker, 举了一个例子, 拼写检查….. 不禁让我想到, 如果我要处理文本正则替换, 是否worker更合理?

  • 第八篇, service worker渐进式web的重要组成部分. 前一个论题的自然延伸.

  • 第九篇, 推送通知, 此时需要promise api的到用户的许可. 前一个论题的自然延伸.

  • 第十篇, mutationobserver, 或许可以用来做redo和undo.

  • 第十一篇, 渲染引擎和性能优化. flexbox很快.

  • 第十二篇, 通过网络层优化性能和安全. 了解一下, 不过大部分针对的还是http1, 我的建议是, 使用http/2或者http/3.

  • 第十三篇, css和js动画原理和性能. css可以运行再合成线程. 疑问是, 文字炸裂的粒子效应怎么做?

  • 第十四篇, 抽象语法树ast, 这章相当干货, 介绍了懒解析, 如果某个函数需要立即调用, 那么就要用括号包起来, 闭包的写法很有用啊.

var xxx =function xxx(){ //这里函数名不是必须的, 但是, 利于调试.
  
}
  • 第十五篇, 类和继承 babel ts,
//这里解析了babel代码, 比较有趣, 他就是转化为闭包.
  • 第十六篇, 存储 indexedDB, 作者的忠告: 使用之前一定看文档, 千万不要直接用, 因为这货有一定的特殊性.
  • 第十七篇, shodow dom和自定义组件. 探讨web components
  • 第十八篇, webrtc, 用web做实时通信的技术. 穿透nat, 目标是建立点对点的连接.
  • 第十九篇, web框架和react, 开篇讲proxy, 这一篇中文没法看, 翻译漏了很多内容. 英文走起. 一开始讲了proxy设计模式, 为了阅读这一章, 我去知乎和mdn看了proxy相关内容.