update

Author: YuChengKai

Browser/browser-ch.md

@@ -459,7 +459,13 @@ self.addEventListener("fetch", e => {
 
 ![](https://user-gold-cdn.xitu.io/2018/4/11/162b2ab2ec70ac5b?w=900&h=352&f=png&s=49983)
 
-浏览器显示内容是一块块显示的，而不是等待 Redner Tree 全部生成后才显示。所以对于优化首屏加载速度来说，应该尽快提供首屏需要的 CSS 文件。
+在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。
+
+当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM。
+
+![](https://user-gold-cdn.xitu.io/2018/7/8/1647838a3b408372?w=1676&h=688&f=png&s=154480)
+
+![](https://user-gold-cdn.xitu.io/2018/7/8/16478388e773b16a?w=1504&h=760&f=png&s=123231)
 
 ## Load 和 DOMContentLoaded 区别
 

Browser/browser-en.md

@@ -461,7 +461,14 @@ The machanism of the browser engine usually has the following steps:
 
 ![](https://user-gold-cdn.xitu.io/2018/4/11/162b2ab2ec70ac5b?w=900&h=352&f=png&s=49983)
 
-The browser display the content by blocks. It won't wait until all the Render Tree finished. So, if wou want to load you first screen as soon as possiable, you'd better make the css data of the first page ready at first.
+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, reduce excessive cascading, the more specific CSS selector, the slower the execution.
+
+When the HTML is parsed the script tag, the DOM is paused and will restart from the paused position. In other words, if you want to render the first screen faster, 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.
+
+![](https://user-gold-cdn.xitu.io/2018/7/8/1647838a3b408372?w=1676&h=688&f=png&s=154480)
+
+![](https://user-gold-cdn.xitu.io/2018/7/8/16478388e773b16a?w=1504&h=760&f=png&s=123231)
+
 
 ## Difference between Load & DOMContentLoaded
 

Performance/performance-ch.md

@@ -131,8 +131,6 @@ Cache-control: max-age=30
 
 懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。
 
-## 关键路径优化
-
 # 文件优化
 
 ## 图片优化