update: 目录调整

.gitignore

@@ -0,0 +1,3 @@
+.vscode
+.DS_Store
+images

00-前端工具/whistle网络抓包.md → 00-前端工具/网络抓包和代理工具：Whistle.md

@@ -1,13 +1,52 @@
 
 
-## 手机设置代理
+## Whistle 官网
+
+- Whistle 官网：<https://wproxy.org/whistle/>
+
+- Whistle 的 GitHub：<https://github.com/avwo/whistle>
+
+
+## Whistle 安装启动
+
+### 1、Whistle 安装
+
+
+（1）通过 npm 安装 Whistle
+
+
+### 2、启动 whistle
+
+```bash
+w2 start
+```
+
+然后在浏览器输入`http://127.0.0.1:8899/` 即可打开代理配置的页面。
+
+
+### 3、配置代理
+
+**chrome浏览器配置代理**：
+
+暂略。
+
+**Firefox浏览器配置代理**：
+
+![](../img/20200420_1357.png)
+
+
+### 4、安装证书并添加信任：
+
+![](../img/20200420_0922.png)
+
+
+### 手机设置代理
 
 连接好指定的wifi后，点击那个wifi里的设置，将「代理」那一项，设置为手动，然后输入ip（电脑上的ip）、端口号（8899）。然后就可以通过电脑上的whistle工具，查看手机的网页请求。
 
 注意，要保证手机和电脑在同一个网络下。
 
 
-
 ## 捕获和拦截https请求
 
 
@@ -20,15 +59,13 @@ whistle安装证书后，可以拦截 https 请求。但是，我现在又不想
 上图中，把红框部分，去掉勾选，就不捕获https了。谢谢azh童鞋。
 
 
-
 参考链接：
 
 - [Android 手机如何设置http代理？](https://www.zhihu.com/question/21474174)
 
 - [使用 Whistle 对 iOS HTTPS 进行抓包](http://zhuscat.com/2017/09/20/https-proxy-on-ios/)
 
 
-
 ## 移动端调试神器:eruda
 
 
@@ -42,7 +79,6 @@ whistle安装证书后，可以拦截 https 请求。但是，我现在又不想
 http://xxx.com htmlAppend://{eruda.html}
 ```
 
-
 (2)新建一个values，里面的内容是：
 
 ```html
@@ -55,3 +91,4 @@ http://xxx.com htmlAppend://{eruda.html}
 
 然后就OK了。
 
+

13-前端性能优化/03-渲染优化.md

@@ -0,0 +1,169 @@
+
+
+## 浏览器的渲染机制
+
+我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。
+
+掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。
+
+有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前后端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。
+
+关于浏览器的渲染机制，可以看本教程的另外一篇文章：
+
+> 《前端面试/面试必看/浏览器渲染机制.md》
+
+
+
+关键渲染路径举例：
+
+
+
+![image-20210323184157879](images/image-20210323184157879.png)
+
+
+
+![image-20210323184551245](images/image-20210323184551245.png)
+
+
+
+
+
+
+## 避免布局抖动（layout thrashing）
+
+1、尽量避免 重排：
+
+比如说，如果想改变一个元素的位置，很多人可能会使用相对布局的left、top属性，但是这个属性会引起重排。我们可以使用 `transfrom:translate`让元素做位移，这个属性既不会触发重排，也不会触发 重绘，只会触发 conmposite。
+
+再比如说，vue、react这样的框架，采用了虚拟DOM，它会把涉及到DOM修改的操作积攒起来，然后统一计算，批量处理，最后应用到真正的DOM上。
+
+2、读写分离。建议先批量读（获取位置等信息），然后再批量做写操作（修改位置）。
+
+补充：
+
+如果你的页面经常需要做重排、重绘，就很容易导致“页面抖动”。
+
+很多时候，我们知道原理和解决方案。但是在工程化实践的时候，往往时间很紧，没有时间去做这些事情。我们希望有一些拿来就可以用的、而且经过测试没有问题的工具，来帮我们解决问题。
+
+FastDom是用于做防抖的一个比较流行的解决方案。
+
+
+
+## 减少重绘（repaint）
+
+
+
+
+
+## 防抖（Debounce）：降低事件的触发频率
+
+我们可以针对**高频事件**做防抖。
+
+**高频事件处理函数**：有很多事件的触发频率非常高，甚至超过了屏幕的刷新率（60帧/秒）。比如页面滚动、鼠标移动、移动端的touch事件。
+
+如果我们不对这些事件做处理，就会频繁导致浏览器做重排、重绘，影响性能，导致页面卡顿，也就是“抖动”。因此需要对这些高频事件处理函数做防抖处理，降低它们的触发频率。
+
+比如说滚动事件：我其实并不关心滚动中间的过程，我只关心最终滚动到了哪里。
+
+requestAnimationFrame 这个api可以做防抖。
+
+
+
+
+
+参考文章：
+
+- 防抖与节流：https://juejin.cn/post/6885250789825052679
+
+
+
+
+
+
+
+## 代码优化
+
+
+
+### JS的开销
+
+静态资源有很多种：js、图片、css、字体等。这些资源都有可能会很大，但是JS的开销仍然是最昂贵的，因为JS除了加载资源之外，还需要经历**解析&编译**、**执行的**过程。
+
+
+
+
+
+
+
+### 如何缩短JS的解析事件
+
+
+
+
+
+### Web loading is a Journey
+
+![img](images/1*vSGOCrLV9MiLhpmPid1CHQ.png)
+
+
+
+### V8引擎
+
+
+
+
+
+
+
+## 补充
+
+
+
+- 首屏尽快打开，剩下的内容延迟加载，减少初次加载的资源量。首屏的内容是可以确定的。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+