Skip to content

Commit 8d0264e

Browse files
committed
feat: 迁移图片
1 parent dcb0c31 commit 8d0264e

23 files changed

+128
-128
lines changed

Browser/browser-ch.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -436,15 +436,15 @@ self.addEventListener("fetch", e => {
436436
});
437437
```
438438

439-
打开页面,可以在开发者工具中的 `Application` 看到 Service Worker 已经启动了![](https://user-gold-cdn.xitu.io/2018/3/28/1626b1e8eba68e1c?w=1770&h=722&f=png&s=192277)
439+
打开页面,可以在开发者工具中的 `Application` 看到 Service Worker 已经启动了![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042724.png)
440440

441441
在 Cache 中也可以发现我们所需的文件已被缓存
442442

443-
![](https://user-gold-cdn.xitu.io/2018/3/28/1626b20dfc4fcd26?w=1118&h=728&f=png&s=85610)
443+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042727.png)
444444

445445
当我们重新刷新页面可以发现我们缓存的数据是从 Service Worker 中读取的
446446

447-
![](https://user-gold-cdn.xitu.io/2018/3/28/1626b20e4f8f3257?w=2818&h=298&f=png&s=74833)
447+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042730.png)
448448

449449

450450

@@ -458,15 +458,15 @@ self.addEventListener("fetch", e => {
458458
4. 根据渲染树来布局,计算每个节点的位置。
459459
5. 调用 GPU 绘制,合成图层,显示在屏幕上。
460460

461-
![](https://user-gold-cdn.xitu.io/2018/4/11/162b2ab2ec70ac5b?w=900&h=352&f=png&s=49983)
461+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042733.png)
462462

463463
在构建 CSSOM 树时,会阻塞渲染,直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程,所以应该尽量保证层级扁平,减少过度层叠,越是具体的 CSS 选择器,执行速度越慢。
464464

465465
当 HTML 解析到 script 标签时,会暂停构建 DOM,完成后才会从暂停的地方重新开始。也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行,只有当解析完样式表才会执行 JS,所以也可以认为这种情况下,CSS 也会暂停构建 DOM。
466466

467-
![](https://user-gold-cdn.xitu.io/2018/7/8/1647838a3b408372?w=1676&h=688&f=png&s=154480)
467+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042734.png)
468468

469-
![](https://user-gold-cdn.xitu.io/2018/7/8/16478388e773b16a?w=1504&h=760&f=png&s=123231)
469+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042735.png)
470470

471471
## Load 和 DOMContentLoaded 区别
472472

@@ -562,4 +562,4 @@ DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不
562562

563563
- 将频繁运行的动画变为图层,图层能够阻止该节点回流影响别的元素。比如对于 `video` 标签,浏览器会自动将该节点变为图层。
564564

565-
![](https://user-gold-cdn.xitu.io/2018/3/29/1626fb6f33a6f9d7?w=1588&h=768&f=png&s=263260)
565+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042737.png)

Browser/browser-en.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -439,15 +439,15 @@ self.addEventListener("fetch", e => {
439439

440440
Open the page, we can see that the Service Worker has started in the `Application` pane of devTools:
441441

442-
![](https://user-gold-cdn.xitu.io/2018/3/28/1626b1e8eba68e1c?w=1770&h=722&f=png&s=192277)
442+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042738.png)
443443

444444
In the Cache pane, we can also find that the files we need have been cached:
445445

446-
![](https://user-gold-cdn.xitu.io/2018/3/28/1626b20dfc4fcd26?w=1118&h=728&f=png&s=85610)
446+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042740.png)
447447

448448
Refreshing the page, we can see that our cached data is read from the Service Worker:
449449

450-
![](https://user-gold-cdn.xitu.io/2018/3/28/1626b20e4f8f3257?w=2818&h=298&f=png&s=74833)
450+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042741.png)
451451

452452
# Rendering mechanism
453453

@@ -463,15 +463,15 @@ The mechanism of the browser engine usually has the following steps:
463463

464464
5. Paint elements by GPU, composite layers and display on the screen.
465465

466-
![](https://user-gold-cdn.xitu.io/2018/4/11/162b2ab2ec70ac5b?w=900&h=352&f=png&s=49983)
466+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042742.png)
467467

468468
When building the CSSOM tree, the rendering is blocked until the CSSOM tree is built. And building the CSSOM tree is a very cost-intensive process, so you should try to ensure that the level is flat and reduce excessive cascading. The more specific the CSS selector is, the slower the execution.
469469

470470
When the HTML is parsing the script tag, the DOM is paused and will restart from the paused position. In other words, the faster you want to render the first screen, the less you should load the JS file on the first screen. And CSS will also affect the execution of JS. JS will only be executed when the stylesheet is parsed. Therefore, it can be considered that CSS will also suspend the DOM in this case.
471471

472-
![](https://user-gold-cdn.xitu.io/2018/7/8/1647838a3b408372?w=1676&h=688&f=png&s=154480)
472+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042743.png)
473473

474-
![](https://user-gold-cdn.xitu.io/2018/7/8/16478388e773b16a?w=1504&h=760&f=png&s=123231)
474+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042744.png)
475475

476476

477477
## Difference between Load & DOMContentLoaded
@@ -586,4 +586,4 @@ for(let i = 0; i < 1000; i++) {
586586

587587
- As we know that the layer will prevent the changed node from affecting others, so it is good practice to create a new layer for animations with high frequency.
588588

589-
![](https://user-gold-cdn.xitu.io/2018/3/29/1626fb6f33a6f9d7?w=1588&h=768&f=png&s=263260)
589+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-42745.png)

DataStruct/dataStruct-en.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ A stack is the basic data structure that can be logically thought of as a linear
4141

4242
Insertion and deletion of items at the top of the stack and the operation should obey the rules LIFO(Last In First Out).
4343

44-
![](https://user-gold-cdn.xitu.io/2018/5/20/1637b785d2d68735?w=640&h=460&f=png&s=6932)
44+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043117.png)
4545

4646
## Implementation
4747

@@ -106,7 +106,7 @@ var isValid = function (s) {
106106

107107
A queue is a linear data structure. The insertion takes place at one end while the deletion occurs the other one. And the operation should obey the rules FIFO(First In First Out).
108108

109-
![](https://user-gold-cdn.xitu.io/2018/5/20/1637cba2a6155793?w=640&h=419&f=png&s=15737)
109+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043118.png)
110110

111111
## implementation
112112

@@ -207,7 +207,7 @@ class SqQueue {
207207

208208
The linked list is a linear data structure and born to be recursive structure. It can fully use the memory of the computer and manage the memory dynamically and flexibly. But Nodes in the linked list must be read in order from the beginning which can be random in the array, and it uses more memory than the array because of the storage used by their pointers.
209209

210-
![](https://user-gold-cdn.xitu.io/2018/5/22/16388487759b1152?w=1060&h=178&f=png&s=20820)
210+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043120.png)
211211

212212
## Implementation
213213

@@ -291,15 +291,15 @@ Binary Tree is a common one of the many structures of the tree. And it is born t
291291

292292
Binary tree start at a root node and each node consists of two child-nodes at most: left node and right node. The nodes in the bottom are usually called leaf nodes, and when the leaf nodes is full, we call the Full Binary Tree.
293293

294-
![](https://user-gold-cdn.xitu.io/2018/5/22/163884f74c9f4e4d?w=320&h=267&f=png&s=11622)
294+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-43121.png)
295295

296296
## Binary Search Tree
297297

298298
Binary Search Tree (BST) is one of the binary trees, so it has all the features of the binary tree. But different with the binary tree, the value in any node is larger than the values in all nodes in that node's left subtree and smaller than the values in all nodes in that node's right subtree.
299299

300300
This storage method is very suitable for data search. As shown below, when you need to find 6, because the value you need to find is larger than the value of the root node, you only need to find it in the right subtree of the root node, which greatly improves the search efficiency.
301301

302-
![](https://user-gold-cdn.xitu.io/2018/5/22/1638850ba7458208?w=596&h=485&f=png&s=36796)
302+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043122.png)
303303

304304
### Implementation
305305

@@ -576,7 +576,7 @@ Since improved from the BST, some codes in AVL are repeated, which we will not a
576576

577577
Four cases are in the node insertion of AVL tree.
578578

579-
![](https://user-gold-cdn.xitu.io/2018/7/14/164990f7d3ac14cf?w=799&h=836&f=png&s=67489)
579+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043123.png)
580580

581581
As for l-l(left-left), the new node T1 is in the left side of the node X. The tree cannot keep balance by now, so there need to rotate. After rotating, the tree should still obey the rules the mid is bigger than the left and less than the right according to the features of the BST.
582582

@@ -720,7 +720,7 @@ Simply, this data structure is used to search string easily, with the following
720720
- all nodes do not store a character, and only the path store, this is different from other tree structures.
721721
- the character in the path from the root to the random node can combine to the strings corresponding to the node
722722

723-
![](https://user-gold-cdn.xitu.io/2018/6/9/163e1d2f6cec3348?w=640&h=600&f=png&s=48344)
723+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043124.png)
724724

725725
## Implementation
726726

@@ -802,7 +802,7 @@ Two important operations are in this structure,
802802
- Find: find the member of the set to which the element belongs, and it can be used to determine whether the two elements belong to the same set
803803
- Union: combine two sets to a new set
804804

805-
![](https://user-gold-cdn.xitu.io/2018/6/9/163e45b56fd25172?w=421&h=209&f=png&s=26545)
805+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043126.png)
806806

807807
## Implementation
808808

@@ -878,7 +878,7 @@ The key of `shiftUp` is to compare with the parent node bubbly and exchange the
878878

879879
As for `shiftDown`, first exchange root and the tail node, and then delete the tail. After that, Compare with the parent node and both child-nodes circularly, if the child-node is larger, assign the parent node with the larger node.
880880

881-
![](https://user-gold-cdn.xitu.io/2018/6/15/164009e58a5a21f8?w=537&h=394&f=png&s=77222)
881+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-43127.png)
882882

883883
```js
884884
class MaxHeap {

DataStruct/dataStruct-zh.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141

4242
栈的特点是只能在某一端添加或删除数据,遵循先进后出的原则
4343

44-
![](https://user-gold-cdn.xitu.io/2018/5/20/1637b785d2d68735?w=640&h=460&f=png&s=6932)
44+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043108.png)
4545

4646
## 实现
4747

@@ -106,7 +106,7 @@ var isValid = function (s) {
106106

107107
队列一个线性结构,特点是在某一端添加数据,在另一端删除数据,遵循先进先出的原则。
108108

109-
![](https://user-gold-cdn.xitu.io/2018/5/20/1637cba2a6155793?w=640&h=419&f=png&s=15737)
109+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043109.png)
110110

111111
## 实现
112112

@@ -209,7 +209,7 @@ class SqQueue {
209209

210210
链表是一个线性结构,同时也是一个天然的递归结构。链表结构可以充分利用计算机内存空间,实现灵活的内存动态管理。但是链表失去了数组随机读取的优点,同时链表由于增加了结点的指针域,空间开销比较大。
211211

212-
![](https://user-gold-cdn.xitu.io/2018/5/22/16388487759b1152?w=1060&h=178&f=png&s=20820)
212+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043110.png)
213213

214214
## 实现
215215

@@ -293,15 +293,15 @@ class LinkList {
293293

294294
二叉树拥有一个根节点,每个节点至多拥有两个子节点,分别为:左节点和右节点。树的最底部节点称之为叶节点,当一颗树的叶数量数量为满时,该树可以称之为满二叉树。
295295

296-
![](https://user-gold-cdn.xitu.io/2018/5/22/163884f74c9f4e4d?w=320&h=267&f=png&s=11622)
296+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043111.png)
297297

298298
## 二分搜索树
299299

300300
二分搜索树也是二叉树,拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大,比右子树的值小。
301301

302302
这种存储方式很适合于数据搜索。如下图所示,当需要查找 6 的时候,因为需要查找的值比根节点的值大,所以只需要在根节点的右子树上寻找,大大提高了搜索效率。
303303

304-
![](https://user-gold-cdn.xitu.io/2018/5/22/1638850ba7458208?w=596&h=485&f=png&s=36796)
304+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-43112.png)
305305

306306
### 实现
307307

@@ -581,7 +581,7 @@ AVL 树改进了二分搜索树,在 AVL 树中任意节点的左右子树的
581581

582582
对于 AVL 树来说,添加节点会有四种情况
583583

584-
![](https://user-gold-cdn.xitu.io/2018/6/23/1642cc145a0cfb26?w=800&h=566&f=png&s=73573)
584+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043112.png)
585585

586586
对于左左情况来说,新增加的节点位于节点 2 的左侧,这时树已经不平衡,需要旋转。因为搜索树的特性,节点比左节点大,比右节点小,所以旋转以后也要实现这个特性。
587587

@@ -723,7 +723,7 @@ class AVL {
723723
- 节点不存储字符,只有路径才存储,这点和其他的树结构不同
724724
- 从根节点开始到任意一个节点,将沿途经过的字符连接起来就是该节点对应的字符串
725725

726-
![](https://user-gold-cdn.xitu.io/2018/6/9/163e1d2f6cec3348?w=640&h=600&f=png&s=48344)
726+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043113.png)
727727

728728
## 实现
729729

@@ -805,7 +805,7 @@ class Trie {
805805
- Find:确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。
806806
- Union:将两个子集合并成同一个集合。
807807

808-
![](https://user-gold-cdn.xitu.io/2018/6/9/163e45b56fd25172?w=421&h=209&f=png&s=26545)
808+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043114.png)
809809

810810
## 实现
811811

@@ -881,7 +881,7 @@ class DisjointSet {
881881

882882
`shiftDown` 的核心思路是先将根节点和末尾交换位置,然后移除末尾元素。接下来循环判断父节点和两个子节点的大小,如果子节点大,就把最大的子节点和父节点交换。
883883

884-
![](https://user-gold-cdn.xitu.io/2018/6/15/164009e58a5a21f8?w=537&h=394&f=png&s=77222)
884+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-043116.png)
885885

886886
```js
887887
class MaxHeap {

Framework/framework-br.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -258,11 +258,11 @@ As rotas no front-end é atualmente simples de implementar. A essência é escut
258258

259259
`www.test.com/#/` é a hash URL. Quando o valor depois do hash `#` muda, nenhuma request será enviada ao servidor. Você pode escutar as mudanças na URL através do evento `hashchange`, e então pular para a página correspondente.
260260

261-
![](https://user-gold-cdn.xitu.io/2018/7/13/1649266be7ec2fb7?w=981&h=546&f=png&s=36646)
261+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042507.png)
262262

263263
O modo history é uma nova funcionalidade do HTML5, do qual é muito mais lindo que o Hash URL.
264264

265-
![](https://user-gold-cdn.xitu.io/2018/7/13/164926dc15df79d3?w=1244&h=546&f=png&s=49647)
265+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042508.png)
266266

267267
# Virtual Dom
268268

Framework/framework-en.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -260,11 +260,11 @@ The front-end routing is actually very simple to implement. The essence is to li
260260

261261
`www.test.com/#/` is the hash URL. When the hash value after `#` changes, no request will be sent to server. You can listen to the URL change through the `hashchange` event, and then jump to the corresponding page.
262262

263-
![](https://user-gold-cdn.xitu.io/2018/7/13/1649266be7ec2fb7?w=981&h=546&f=png&s=36646)
263+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042510.png)
264264

265265
History mode is a new feature of HTML5, which is more beautiful than Hash URL.
266266

267-
![](https://user-gold-cdn.xitu.io/2018/7/13/164926dc15df79d3?w=1244&h=546&f=png&s=49647)
267+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042511.png)
268268

269269
# Virtual Dom
270270

Framework/framework-zh.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -253,11 +253,11 @@ p.a // -> Get 'a' = 2
253253

254254
`www.test.com/#/` 就是 Hash URL,当 `#` 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 `hashchange` 事件来监听到 URL 的变化,从而进行跳转页面。
255255

256-
![](https://user-gold-cdn.xitu.io/2018/7/11/164888109d57995f?w=942&h=493&f=png&s=39581)
256+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042512.png)
257257

258258
History 模式是 HTML5 新推出的功能,比之 Hash URL 更加美观
259259

260-
![](https://user-gold-cdn.xitu.io/2018/7/11/164888478584a217?w=1244&h=585&f=png&s=59637)
260+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042514.png)
261261

262262
# Virtual Dom
263263

Framework/react-br.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ O Fiber foi introduzido no lançamento da V16. O mecanismo afeta alguma das cham
1515

1616
Nas versões anteriores, se eu tiver um componente composto complexo e então mudar o `state` na camada mais alta do componente, a pilha de chamada poderia ser grande.
1717

18-
![](https://user-gold-cdn.xitu.io/2018/6/25/164358b0310f476c?w=685&h=739&f=png&s=61462)
18+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042529.png)
1919

2020
Se a pilha de chamada for muito longa, e complicadas operações estiverem no meio, isso pode causar um bloqueio a thread principal por um longe tempo, resultando em uma experiência ruim para o usuário. Fiber nasceu para resolver esse problema.
2121

2222
Fiber é na essência uma pilha virtual de quadros, e o novo agendador espontaneamente agenda esses quadros de acordo
2323
com sua prioridade, desse modo, mudando a renderização síncrona anterior para renderização assíncrona, e segmentando a atualização sem afetar a experiência.
2424

25-
![](https://user-gold-cdn.xitu.io/2018/6/25/164358f89595d56f?w=1119&h=600&f=png&s=330885)
25+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042530.png)
2626

2727
React tem seu proprio conjunto de lógica sobre como priorizar. Para coisas que requerem alta performance em tempo-real, tal como animação, que significa isso deve ser renderizado uma vez dentro de 16 ms para garantir que não está emperrando, React pausa o update a cada 16 ms (dentro de 16 ms) e retorna para continuar renderizando a animação.
2828

Framework/react-en.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ The Fiber mechanism was introduced in the V16 release. The mechanism affects som
1515

1616
In previous versions, if you had a very complex composite component and then changed the `state` of the topmost component, the call stack might be long.
1717

18-
![](https://user-gold-cdn.xitu.io/2018/6/25/164358b0310f476c?w=685&h=739&f=png&s=61462)
18+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042525.png)
1919

2020
If the call stack is too long, and complicated operations are performed in the middle, it may cause the main thread to be blocked for a long time, resulting in a bad user experience. Fiber is born to solve this problem.
2121

2222
Fiber is essentially a virtual stack frame, and the new scheduler freely schedules these frames according to their priority, thereby changing the previous synchronous rendering to asynchronous rendering, and segmenting the update without affecting the experience.
2323

24-
![](https://user-gold-cdn.xitu.io/2018/6/25/164358f89595d56f?w=1119&h=600&f=png&s=330885)
24+
![](https://yck-1254263422.cos.ap-shanghai.myqcloud.com/blog/2019-06-01-042526.png)
2525

2626
React has its own set of logic on how to prioritize. For things that require high real-time performance, such as animation, which means it must be rendered once within 16 ms to ensure that it is not stuck, React pauses the update every 16 ms (within 16ms) and returns to continue rendering the animation.
2727

0 commit comments

Comments
 (0)