Jason

HTTP/S/2 & WebSocket 阅读笔记

6

#### 阅读范围： - 《图解 HTTP》 - 《Web 性能权威指南》 - [关于三次握手和四次挥手，面试官想听到怎样的回答？](https://www.zhihu.com/question/271701044/answer/398114686) - [“三次握手，四次挥手”你真的懂吗？](https://zhuanlan.zhihu.com/p/53374516) - [深度解密HTTP通信细节](https://mp.weixin.qq.com/s/NUW0sLBMTglnIbN7OHkdoQ)

理解 RxJS

2

### 基础概念了解 在理解 RxJS 之前，先了解一下 Observable 的相关核心概念： - Observable 是声明式的，即定义一个`订阅者（subscriber）`函数，Observable 实例可以发布多个任意类型的值，适用于事件处理、异步编程和处理多个值。 - subscriber 是一个订阅函数，创建一个 Observable 的实例并传入一个方法做法参数，当这个方法中的异步任务执行完成则执行 observe 对象的方法（也就是事件的发布）。 - Observe 是用于接收 Observable 发布的数据流，是一个数据对象，作为数据的消费者处理数据或响应事件。它有三个回调函数，其中 next 是必须的。 来一个例子加深一下对上面概念的理解： ```JS // declare a...

JavaScript运行机制 & Event Loop

5

### 参考文章 - [HTML系列：macrotask和microtask](https://zhuanlan.zhihu.com/p/24460769?utm_source=wechat_session&utm_medium=social&utm_oi=37470674616320) - [Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) - [一次弄懂Event Loop](https://juejin.im/post/5c3d8956e51d4511dc72c200) - [带你彻底弄懂Event Loop](https://juejin.im/post/5b8f76675188255c7c653811)

Rudex 和 mobx 相关总结

1

 与其把Mobx当作数据管理的库，Mobx更像是一个通过数据驱动UI更新的引擎。 [解读Mobx及与redux的对比](https://zhuanlan.zhihu.com/p/36294638)

浏览器渲染及性能优化

4

### 浏览器的渲染过程 webkit 内核渲染过程图：  gecko 内核渲染过程图：  不同的浏览器内核有着不一样的渲染过程，细节不一致但大致的浏览器渲染的流程如下： - HTML 解析文件，生成 DOM Tree，解析 CSS 文件生成 CSSOM Tree - 将 DOM Tree和 CSSOM Tree 结合，生成 Render Tree(渲染树) - 根据 Render...

实现 new 操作符

2

实例代码： ```JS function Person(name){ this.name = name; } Person.prototype.getName = function() { return this.name; } var p1 = new Person('Dan'); console.log(p1); // Person {name: "Dan"} console.log(p1.__proto__ === Person.prototype); // true...

前端工程化相关

5

### 1. 用 husky 和 lint-staged 构建 Git commit 代码检查工作流 husky 安装后，可以很方便的在 package.json 配置 git hook 脚本。 - 待提交的代码 git add 添加到暂存区； - 执行 git commit； - husky 注册在 git...

从零扒一扒 promise

1

## 从零扒一扒 promise 在开发过程中，很多时候都在熟练的使用 Promise/A+ 规范，然而有时在使用的时候发现并不是很了解它的底层实现，下面扒一扒它的实现。 > 本文基于 AngularJs $q ### Promises/A+规范 > Promise 是 JS 异步编程中的重要概念，异步抽象处理对象，是目前比较流行 Javascript 异步编程解决方案之一。 **术语** - 解决 (fulfill): 指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以...

> 参考原文：[Private Variables in JavaScript](https://marcusnoble.co.uk/2018-02-04-private-variables-in-javascript/) > **本文非直译，如有理解不对的地方，请指正。** 近年来 Javascript 不断有新特性或语法加进来，不过还是始终保持一切皆对象的原则，基于运行时的概念，Javascript 并没有所谓的公共、私有属性的概念。 自 ES6 以后，虽然 Javascript 有了**类**，但不像 C、Java 那样有专门的修饰符来控制变量的访问权限，Javascript 所有的属性都需要在函数中定义。以下文章内容将介绍如何实现私有变量。 ### 约定命名规则的方式 最简单粗暴的方式就是在团队中约定命名规范，通常是以下划线作为属性名称的前缀(e.g. _count)。其本质上并没有阻止变量的访问权限，仅仅是开发之间默认的规则，即不能乱引用和修改我的变量。 ### WeakMap WeakMap 虽然不会阻止对数据的访问，但是它能将私有变量和用户的**可操作**对象分开，示例代码如下： ```JS const map...

本文将深入理解一下渲染引擎在渲染页面的时候具体都发生了什么事情。 渲染引擎会触碰到 Web 性能的方方面面，欲了解更多请关注 [the Performance section of Web Fundamentals](https://developers.google.com/web/fundamentals/performance/why-performance-matters)。 ### 渲染进程处理页面内容 渲染引擎负责 Tab 页面内发生的所有事情，主线程处理了大部分用户加载到的代码，如若使用了 web worker 或 service worker，与之相关的代码将会由 worker thread 处理。 渲染进程的主要任务是将 HTML，CSS，以及 JavaScript 转变为我们可以进程交互的网页内容。 ...