Wei
## 背景 由于某些原因，我们团队负责在 GitLab 上做二次开发，简单理解就是在 GitLab 上挂个 DOM 渲染用 React 写的一些组件，组件库选择了 antd，尴尬的是引入之后发现，GitLab 自身是带一套全局样式的，而 antd 又带了一套全局样式，导致 GitLab 的部分样式被覆盖，如图： a 标签颜色被 antd 覆盖：  checkbox 细微的样式错乱及大小改变：  ## 原因 antd 的全局样式也不是一天两天的问题了，在社区中已经有很多讨论（[#4331](https://github.com/ant-design/ant-design/issues/4331) [#9363](https://github.com/ant-design/ant-design/issues/9363)...
## 前言 本文整理自：[Google Developers](https://developers.google.cn/web/fundamentals/performance/rendering/) 及 [高性能 JavaScript](https://book.douban.com/subject/5362856/)，再加上了一些个人对其中提到的知识点的理解与补充。前端性能优化涉及很多方面，本文仅针对高性能渲染进行分析。 ## 单个帧的渲染流程 —— 像素管道 目前，大多数设备的刷新率都是 60 FPS，如果浏览器在交互的过程中能够时刻保持在 60FPS 左右，用户就不会感到卡顿，否则，就会影响用户的体验。 下图为浏览器运行的单个帧的渲染流水线，称为像素管道，如果其中的一个或多个环节执行时间过长就会导致卡顿。像素管道是作为开发者能够掌握的对帧性能有影响的部分，其他部分由浏览器掌握，我们无法控制。我们的目标就是就是尽快完成这些环节，以达到 60 FPS 的目标。  - JavaScript。通常来说，阻塞的发起都是来自于 JS ，这不是说不用 JS，而是要正确的使用 JS 。首先，JS 线程的运行本身就是阻塞 UI...
> **原文地址：http://javascript.info/onload-ondomcontentloaded** HTML页面的生命周期有以下三个重要事件： - `DOMContentLoaded` —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 `` 和样式表等外部资源可能并没有下载完毕。 - `load` —— 浏览器已经加载了所有的资源（图像，样式表等）。 - `beforeunload/unload` —— 当用户离开页面的时候触发。 每个事件都有特定的用途 - `DOMContentLoaded` —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。 -...
## 前言 react-router 目前作为 react 最流行的路由管理库，已经成为了某种意义上的官方路由库（不过下一代的路由库 reach-router 已经蓄势待发了），并且更新到了 v4 版本，完成了一切皆组件的升级。本文将对 react-router v4（以下简称 rr4） 的源码进行分析，来理解 rr4 是如何帮助我们管理路由状态的。 ## 路由 在分析源码之前，先来对路由有一个认识。在 SPA 盛行之前，还不存在前端层面的路由概念，每个 URL 对应一个页面，所有的跳转或者链接都通过 `` 标签来完成，随着 SPA 的逐渐兴盛及 HTML5 的普及，hash 路由及基于...
## 概念 HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。 ## 名词解释 ### 公钥（yuè）私钥（yuè） > **公开密钥加密**（英语：**Public-key cryptography**），也称为**非对称加密**（英语：**asymmetric cryptography**），是[密码学](https://zh.wikipedia.org/wiki/%E5%AF%86%E7%A2%BC%E5%AD%B8)的一种[算法](https://zh.wikipedia.org/wiki/%E6%BC%94%E7%AE%97%E6%B3%95)，它需要两个[密钥](https://zh.wikipedia.org/wiki/%E5%AF%86%E9%92%A5)，一个是公开密钥，另一个是私有密钥；一个用作加密的时候，另一个则用作解密。使用其中一个密钥把[明文](https://zh.wikipedia.org/wiki/%E6%98%8E%E6%96%87)加密后所得的[密文](https://zh.wikipedia.org/wiki/%E5%AF%86%E6%96%87)，只能用相对应的另一个密钥才能解密得到原本的明文；甚至连最初用来加密的密钥也不能用作解密。由于加密和解密需要两个不同的密钥，故被称为非对称加密；不同于加密和解密都使用同一个密钥的[对称加密](https://zh.wikipedia.org/wiki/%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86)。虽然两个密钥在数学上相关，但如果知道了其中一个，并不能凭此计算出另外一个；因此其中一个可以公开，称为公钥，任意向外发布；不公开的密钥为私钥，必须由用户自行严格秘密保管，绝不通过任何途径向任何人提供，也不会透露给要通信的另一方，即使他被信任。 以上是来自维基百科的公钥私钥的定义，HTTPS 是基于非对称加密的，公钥和私钥是整个 HTTPS 的基础。简单来说，公钥是公开的（要不叫公钥），比如小 A 想给我发送加密信息就要他我的公钥，让他用我的公钥对信息进行加密，这个信息只有我的私钥能打开。所以私钥是绝对不能泄漏的，那么私钥只能用来解开公钥吗？并不是，公钥私钥都可以加密和用对方来解密，私钥用来签发数字签名，我用独一无二的私钥签发了一个数字签名，你们都有我的公钥，只有我签发的数字签名能用我的公钥解开，才能证明这个签名发自我。 知乎上有个回答特别精辟： > 不要去硬记。 你只要想：既然是加密，那肯定是不希望别人知道我的消息，所以只有我才能解密，所以可得出**公钥负责加密，私钥负责解密**；同理，既然是签名，那肯定是不希望有人冒充我发消息，只有我才能发布这个签名，所以可得出**私钥负责签名，公钥负责验证**。 ### Diffie–Hellman > **迪菲-赫尔曼密钥交换**（英语：Diffie–Hellman key exchange，缩写为D-H） 是一种[安全协议](https://zh.wikipedia.org/wiki/%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE)。它可以让双方在完全没有对方任何预先信息的条件下通过不安全[信道](https://zh.wikipedia.org/wiki/%E4%BF%A1%E9%81%93)创建起一个[密钥](https://zh.wikipedia.org/wiki/%E5%AF%86%E9%92%A5)。这个密钥可以在后续的通讯中作为[对称密钥](https://zh.wikipedia.org/wiki/%E5%AF%B9%E7%A7%B0%E5%AF%86%E9%92%A5)来[加密](https://zh.wikipedia.org/wiki/%E5%8A%A0%E5%AF%86)通讯内容。 笔者本人并没很仔细理解这个算法的原理，但是作为前端在实际应用中只需要知道这个加密算法的作用就好了，中间就是黑箱。简单来说这个算法的作用就是：Alice...
## 前言 我们都知道 JavaScript 是一门单线程语言，这意味着同一事件只能执行一个任务，结束了才能去执行下一个。如果前面的任务没有执行完，后面的任务就会一直等待。试想，有一个耗时很长的网络请求，如果所有任务都需要等待这个请求完成才能继续，显然是不合理的并且我们在浏览器中也没有体验过这种情况（除非你要同步请求 Ajax），究其原因，是 JavaScript 借助异步机制来实现了任务的调度。 > 程序中现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。 我们先看一个面试题： ```js try { setTimeout(() => { throw new Error("Error - from try statement"); }, 0); } catch (e) {...
## 前言 在 [上一篇文章](https://github.com/fi3ework/blog/issues/21) 中介绍了前端路由的实现及 react-router-v4（以下简称 rr4） 的源码分析，目前阶段 rr4 已经基本垄断了 react 生态圈的路由，虽然 v4 版本成功完成了一切皆组件的蜕变，但其实它本身还有诸多问题，比如 keep-alive。 keep-alive 的叫法取自 vue-keep-alive，在 vue 中，可以将某组件暂存于内存，然后跳转到其他页面再从内存中将这个组件拿出来。换算到路由中，我们可以想象这样一个情景 —— 有一个商品列表页，每个商品点进去都跳转到对应的商品详情页面，用户每次浏览完一个商品详情之后回退，列表页会重新渲染，那么如果用户已经往下划了几屏之后回退，那么每次返回后都要先滑到上次浏览的位置，这种体验可以说是灾难性的。 现在的浏览器非常贴心的实现了 Scroll Restoration（后退时恢复滚动位置），这在非 SPA 页面有非常好的体验效果，但是在 SPA 中，会有以下问题： 1....
原文： [Resource Hints – What is Preload, Prefetch, and Preconnect?](https://www.keycdn.com/blog/resource-hints/) 作者：BRIAN JACKSON  今天我们将研究一下能显著提升页面性能的方法 —— **资源提示与指令**。你也许听说过 preload，prefetch 和 preconnect，可是我们想研究的更深一点，搞清他们之间的区别并且充分的利用它们。它们带来的好处包括允许前端开发人员来优化资源的加载，减少往返路径并且在浏览页面时可以更快的加载到资源。 ## Preload Preload 是一个新的控制特定资源如何被加载的新的 Web 标准，这是已经在 2016 年 1 月废弃的 subresource...
## 题目 实现一个 LazyMan，可以按照以下方式调用： - `LazyMan("Hank")` 输出： > Hi! This is Hank! - `LazyMan("Hank").sleep(10).eat("dinner")` 输出： > Hi! This is Hank! 等待10秒.. > Wake up after 10 > > Eat dinner...
## 前言 最近翻出了之前分析的 applyMiddleware 发现自己又看不懂了😳，重新看了一遍源代码，梳理了洋葱模型的实现方法，在这里分享一下。 ## applyMiddleware源码解析 applyMiddleware 函数虽短但却是 Redux 最精髓的地方，成功的让 Redux 在保持“自身函数式纯洁”的前提下，在 action 传递的过程中插入了提供了副作用的空间。 这个 middleware 的洋葱模型思想是从 koa 的中间件拿过来的，用图来表示最直观。 上图之前先上一段用来示例的代码（via [中间件的洋葱模型](https://github.com/kenberkeley/redux-simple-tutorial/blob/master/middleware-onion-model.md?1524474265778)），我们会围绕这段代码理解 applyMiddleware 的洋葱模型机制： ```js function M1(store) { return function(next)...