Godiswill

# HTTP Cache [原文链接](https://github.com/Godiswill/blog/issues/2) ## 什么是 HTTP Cache - 我们知道通过网络获取资源缓慢且耗时，需要三次握手等协议与远程服务器建立通信，对于大点的数据需要多次往返通信大大增加了时间开销，并且当今流量依旧没有理想的快速与便宜。对于开发者来说，长久缓存复用重复不变的资源是性能优化的重要组成部分。 - HTTP 缓存机制就是，配置服务器响应头来告诉浏览器是否应该缓存资源、是否强制校验缓存、缓存多长时间；浏览器非首次请求根据响应头是否应该取缓存、缓存过期发送请求头验证缓存是否可用还是重新获取资源的过程。下面我们就来结合简单的 node 服务器代码(文末)来介绍其中原理。 ## 关键字 | 响应头 | (常用)值 | 说明 | | :-------- | :--------| :-- |...

# 事件循环--JSConf 分享整理 [原文链接](https://github.com/Godiswill/blog/issues/17) 对于浏览器而言，有多个线程协同合作，如下图。具体细节可以参考[一帧剖析](https://github.com/Godiswill/blog/issues/14)。  对于常说的JS单线程引擎也就是指的 `Main Therad`。  注意以上主线程的每一块未必都会执行，需要看实际情况。 先把 `Parse HTML` -> `Composite` 的过程称为渲染管道流 `Rendering pipeline`。 浏览器内部有一个不停的轮询机制，检查任务队列中是否有任务，有的话就取出交给 `JS引擎` 去执行。 例如： ```javascript const foo = () => console.log("First");...

# git clone 下载提速 ```bash git clone https://github.com/facebook/react.git ``` 发现克隆仓库时，特别慢，`10kb/s` 徘徊。后来用 `best trace` 追踪以下域名。 ```bash github.com assets-cdn.github.com github.global.ssl.fastly.net ``` 结果发现 `github.global.ssl.fastly.net` 的 `IP` 与在 [IPAddress](https://www.ipaddress.com/) 查出的 `IP` 不一致。说明 `DNS` 被东方的神秘力量污染了。...

# 一帧剖析 [原文链接](https://github.com/Godiswill/blog/issues/14) 翻译自：[The Anatomy of a Frame ](https://aerotwist.com/blog/the-anatomy-of-a-frame/) 经常被开发者问及像素渲染管道流的细节问题，它每一步是怎样触发的，何时触发的、为什么会触发。 这篇文章就是为了解答这些疑惑的，你将了解到像素是如何渲染到屏幕的。 注意：以下讲解基于 `Blink` 内核的 `Chrome` 浏览器。例如像`layout` 或 `style calcs` 等步骤运作在浏览器主线程中，这在大部分浏览器厂商中达成共识，但以下整体架构未必被其他厂商采纳。 ## 一图胜千言 - 像素到渲染到屏幕的全过程  ## 流程 在这张图里涉及到太多的内容，可以大致分为两个大的部分。 (以下文字需要反复对照这张图，为了方便，作者很贴心的给了图片地址[The Anatomy...

# 一图理解原型链 [原文链接](https://github.com/Godiswill/blog/issues/10) 以下代码为例，看看用构造函数生成一个对象后，实例 `f1` 对象是如何与构造函数 `Foo`、`Function`、`Object` 串联起来的。 ```javascript function Foo() {} const f1 = new Foo(); ``` .png) 注意：`__proto__` 不是JS标准规范，`__proto__` 是实例的属性，`prototype` 是构造函数的属性, `constructor` 是原型上的属性。 - `f1` 对象是构造函数 `Foo` 的实例，所以...

# 块级格式化上下文BFC [原文链接](https://github.com/Godiswill/blog/issues/8) `BFC——block formatting context` 即块级格式化上下文，该区块是 `CSS` 盒模型布局的区域。 常规的普通流、浮动流、定位元素等交互就发生在该区域。 什么意思呢？ 也就是说常见的布局规则一般遵循在同一 `BFC` 中。 比如说元素设置浮动 `float: left`，就形成一个 `BFC`，它与其他元素就不再遵循普通流的规则。 在浮动元素内部的元素依然被包裹在该元素内部且随着它一起浮动。 常见造成元素 `BFC` 原因 1. 根元素(html) 1. 浮动元素（元素的 float 不是 none） 1....

# 实现继承的几种方式 [原文链接](https://github.com/Godiswill/blog/issues/9) 众所周知，JavaScript 并没有传统面向对象语言中类和类继承的概念。 JS一般使用 `new`，`instanceof`来确认对象之间的父子相似的关系。 最新`es6`出现的类也不过是构造函数的语法糖。 以下介绍下常见的继承方式及其优缺点。 ## 原型继承 原型继承的思路就是，把父类的一个实例赋值给子类的 `prototype`。 这样便能继承父类的自有属性和方法和父类原型链上的属性和方法。 ```javascript function Super() { this.arr = ['super']; } Super.prototype.getArr = function() { return this.arr; } Super.prototype.pushArr...

# JS面向对象 [原文链接](https://github.com/Godiswill/blog/issues/8) 面向对象就是描述一种代码组织的形式，用来构建真实世界物体或概念的建模方式。 它主要的概念包括封装、继承、多态等。 ## 封装 把一些数据或数据结构和操作数据结构的方法抽象在一个模板(类)中。 由类生成的实例对象暴露出一些数据和方法给外部使用。 现实中的物体或概念往往可以找出有一些共同的特征。 例如你可以简单的将有两个眼睛、一张嘴等器官且会说话动物的称为正常人类。 眼睛、嘴等器官就是人类的属性，而说话就是人类的功能之一。 往往需要给嘴等重要器官加访问控制权限，谁都不希望嘴被外部无故改成屁股吧，例如 public、protect、private等声明。 说话功能可能实现起来非常复杂，需要大脑神经、声带、口腔、嘴等器官一系列的配合， 这复杂的子功能和相互协调的实现无需暴露给外部，而仅仅暴露一个方法接收说话的内容。 JS原生并不支持public、protect、private，私有变量一般由闭包来实现。 ```javascript const people = (function() { const words = 'hello world'; // 私有（private）变量...

# rollup 打包实践 [原文链接](https://github.com/Godiswill/blog/issues/6) ### 简介 `rollup` 是一款像 `webpack` 一样的JS代码打包工具。它特别适合类库的维护，有了它你可以把单个复杂庞大的类库拆分成多个文件模块编写，最终打包成符合`UMD`、`AMD`、`ESM`等格式的单个或多个文件。它可以利用最新的ES6+ `modules` 规范，`Tree-Shaking` 不需要的代码，这样你就可以放心的引入你喜欢类库中的某个方法，而不必担心引入整个类库。 ### Vue 官方使用   ### JS 模块化演进 - JS历史：没有模块化机制 ```javaScript // 全局变量污染、命名冲突 var global = '全局变量';...

# 布局边界 Layout Boundaries [原文链接](https://github.com/Godiswill/blog/issues/4) 翻译原文：[Introducing 'layout boundaries'](http://wilsonpage.co.uk/introducing-layout-boundaries/) `Layout` 是浏览器渲染管道处理过程之一，主要计算 DOM 元素的位置、大小等信息提供给之后的绘制流程。这一过程开销很大，特别是在低端移动设备上。 作为一个考虑周到的前端开发，保证 Layouts 开销最小化，确保 Apps 运行流畅是我们的责任之一。在某些情况下，layout 的开销无法避免。通过 JS 改变 DOM 结构，修改元素尺寸和读取 DOM 元素位置、大小等属性，都会触发 layout。 但不为人所知的是，layout 有影响范围。大多数时间，局部的 DOM 变动，layout 会引发整个文档重排，这意味着成百上千的节点会受影响。...