Wei
原文：[Prefetch & preconnect-dns priority](https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/) 作者： JUSTIN AVERY --- 如果你想要浏览器在你访问某个域名前先执行 DNS 解析，那么你使用 preconnect 和 prefetch-dns 都是可以的，这将会节省关键渲染路径的时间。本文主要分析这两者的区别，结论无法一句话概括。 ## 概念 举个例子，当我们访问 https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/ 这个页面时，最开始发生的事情是浏览器需要知道 responsivedesign.is 在哪 —— 就是我们所知道的 DNS 握手，如果你观察 [网络的瀑布图](https://www.webpagetest.org/result/170308_CQ_141X/1/details/#waterfall_view_step1)， 你将会发现请求最开始的部分是水绿色的，这代表着 DNS 解析。...
## 关键路径 ### 浏览器加载流程 浏览器在渲染页面时需要将 HTML 标记转化成 DOM 对象  CSS 则会被转化成 CSSOM 对象  DOM 和 CSSOM 是独立的树形结构， 当 DOM 树和 CSSOM 树都构建完成的时候，他们就会合并在一起构建 render tree，因为要在页面上渲染不仅需要这个页面的结构，也需要知道整个页面的样式，所以 render tree 是 DOM...
1. Parcel 不能直接 console 出 process.env 的所有内容，https://github.com/parcel-bundler/parcel/issues/2299#issuecomment-439768971 2. 下载历史版本的 Chrome： - https://www.chromium.org/getting-involved/download-chromium - https://raw.githubusercontent.com/Bugazelle/chromium-all-old-stable-versions/master/chromium.stable.json - https://www.slimjet.com/chrome/google-chrome-old-version.php
## 一些疑点 ### request 中的 cache-control vs. response 中的 cache-control cache-control 作为一个 general header，在 request 和 response 中都可以存在？那么如果假设我们在某 HTML 的 meta 中写了 ```html ``` 但是和这个 HTML 的 response 中由服务器设定的 cache-control...
1. 有的时候 VSCode 的 TS langserver 会卡死，或者在修改了 tsconfig 后需要重启确保修改生效，可以通过 VSCode 提供的 command `TypeScript: Restart TS server` 重启即可（要在 TS/TSX 的文件中唤起控制台才会有对应的 command）。 2. 如果 tsconfig 中没有制定 include / exclude / files 的话，会默认包含进所有的...
1. React 订阅了 Context.Provieder 的 Consumer 会忽略 shouldComponentUpdate 这个生命周期直接强制更新（类似 forceUpdate），官方文档： > All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from...
## 前言 ES2015+ 有各种新特性（语法糖），尽管有很多特性尚未纳入标准或浏览器还没有原生支持，但是 Babel 的出现让前端可以不用担心兼容性问题而使用处于各种 stage 的 ES2015+ 语法。其实 class 关键字目前只是实现类的语法糖，但是可以帮助我们屏蔽掉每次实现类时的样本代码，逻辑更加清晰，并且阻止我们踩可能存在的坑，本篇文章从 ES5 的类实现到 ES6 中class 的 Babel 转码来分析类的实现与继承。 ## 类 在 JavaScript 中，我们希望一个类能有以下特性： 1. 实例的属性是绑定在每个实例上的 2. 方法是绑定在这个类的 prototype 上的...
## 说明 **本文所分析的Redux版本为3.7.2** 分析直接写在了注释里，放在了GitHub上 —> [仓库地址](https://github.com/fi3ework/redux-analysis) 分析代码时通过查看Github blame，参考了Redux的issue及PR来分析各个函数的意图而不仅是从代码层面分析函数的作用，并且分析了很多细节层面上写法的原因，比如： 1. `dispatch: (...args) => dispatch(…args)` 为什么不只传递一个 `action` ? 2. `listener` 的调用为什么从 `forEach` 改成了 `for` ? 3. 为什么在 `reducer` 的调用过程中不允许 `dispatch(action)` ? ......
Please read: [sw-yx](https://github.com/sw-yx) / [**react-typescript-cheatsheet**](https://github.com/sw-yx/react-typescript-cheatsheet) 中文版的于一年前翻译，从今天看来当时的翻译有很多的错误，所以已经被废弃掉了。swyx 和合作者们在这一年中更新了很多非常酷的新内容，并且使用的是最新版的 TypeScript。所以尽管一开始可能阅读英文会有一点困难，不过还是高度推荐阅读英文原版教程。 The Chinese version was translated a year ago and with a lot of errors from today so it has been deprecated. swyx...