From 3a2d47ef844af50ee76293bc32bdadebe1e27445 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 11 Mar 2021 15:39:08 +0800 Subject: [PATCH] update --- 10-Node.js和数据库/03-Node.js开发环境安装.md | 13 ++++++- 13-前端面试/01-面试必看/09-浏览器渲染机制.md | 36 ++++++++------------ 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/10-Node.js和数据库/03-Node.js开发环境安装.md b/10-Node.js和数据库/03-Node.js开发环境安装.md index fa040a6..0b1b7ef 100644 --- a/10-Node.js和数据库/03-Node.js开发环境安装.md +++ b/10-Node.js和数据库/03-Node.js开发环境安装.md @@ -96,7 +96,6 @@ proxy （4）输入 `node -v`，查看正在使用的 node 版本。 -- **参考链接**：[安装 npm，nvm，node](https://segmentfault.com/a/1190000011114680) 如果 Node 安装失败，可以参考上面这个链接。 @@ -113,6 +112,18 @@ nvm install 8.10.0 关于 NVM 的常用命令，详见下一段。 +补充： + +如果 Node 安装失败，可以在上方的 `settings.txt`文件中，新增如下两行，修改镜像源： + +``` +node_mirror: https://npm.taobao.org/mirrors/node/ +npm_mirror: https://npm.taobao.org/mirrors/npm/ +``` + +- 参考链接：[安装 npm，nvm，node](https://segmentfault.com/a/1190000011114680) + + ### Mac 系统安装 Node.js **1、安装 NVM**： diff --git a/13-前端面试/01-面试必看/09-浏览器渲染机制.md b/13-前端面试/01-面试必看/09-浏览器渲染机制.md index 49ebb04..1cc4ed5 100644 --- a/13-前端面试/01-面试必看/09-浏览器渲染机制.md +++ b/13-前端面试/01-面试必看/09-浏览器渲染机制.md @@ -7,21 +7,13 @@ - 什么是DOCTYPE及作用 -- 浏览器渲染过程 +- 浏览器渲染过程。面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。 -面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。 - - -- Reflow：重排 - -面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。 +- Reflow：重排。面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。 - Repaint：重绘 -- Layout：布局 - -这里的Layout指的是浏览器的Layout。 - +- Layout：布局。这里的Layout指的是浏览器的Layout。 ## 什么是DOCTYPE及作用 @@ -84,21 +76,21 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 > 上方图片的来源：[Google 官方 | 渲染树构建、布局及绘制](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn) -**渲染树**包含了网页中有哪些节点、各个节点的CSS样式（大小、颜色等）、以及他们的从属关系。 +**渲染树**包含了网页中有哪些节点、节点的从属关系、以及节点的CSS样式（大小、颜色等）。 我们写完前端代码之后，计算机通过解释器把代码文本翻译成机器能理解的数据结构。比如说，html标签是由一对一对的尖括号表述的，可以被浏览器解析为有含义的标记。这些标记被翻译成节点对象，存放到链型数据结构中。这些节点被称之为**DOM对象**，这个链型数据结构就是**渲染树**。 ### 渲染过程（重要） -浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。来看看下面这张图。 +浏览器的渲染过程非常复杂，面试时找重点说就行，不然太耗时间。如何快速简洁地描述清楚，是关键。来看看下面这张图。 ![](http://img.smyhvae.com/20180310_1257.png) -这里解释一下几个概念，方便大家理解： +渲染过程中，涉及到以下几个概念： -- DOM树（DOM Tree）：浏览器将HTML标签解析成树形的数据结构。DOM树包含了有哪些节点，以及节点之间的嵌套关系。 +- DOM树（DOM Tree）：浏览器将HTML标签解析成树形的数据结构。DOM树包含了有哪些节点，以及节点之间的从属关系（嵌套关系）。 -- CSSOM（CSS Rule Tree）：浏览器将CSS解析成树形的数据结构。CSSOM包含了节点的样式。 +- CSSOM（CSS Rule Tree）：浏览器将CSS解析成树形的数据结构。CSSOM包含了节点的CSS样式（大小、颜色等）。 - 渲染树（Render Tree）: DOM 树与 CSSOM 树合并后形成渲染树。渲染树只包含渲染网页所需的节点（但并不知道位置）。 @@ -106,7 +98,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 - 绘制（Painting）：按照算出来的规则，通过显卡，把内容画出来。 -- conmposite：合成。浏览器在绘制的时候，不会把所有的内容都画在同一个层上。需要最终把这些层合成到一起，显示在屏幕上。 +- composite：合成。浏览器在绘制的时候，一开始不会把所有的内容都画在同一层上。需要把这些层合成到一起，最终显示在屏幕上。 参考链接： @@ -126,7 +118,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 （1）通过JS、CSS代码来**触发**页面上的视觉变化。 -（2）Style：浏览器要重新对样式进行计算。 +（2）Style：浏览器对样式进行计算。 （3）layout：同上一段。 @@ -142,7 +134,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 -## Reflow：重排（回流） +## 重排（回流）：Reflow ### 定义 @@ -180,16 +172,16 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 **面试总结：** -首先要答出 Reflow 定义；其次，什么时候触发，至少要答出两条。更进一步，面试官可能还会问你**怎么避免reflow**，这个自己去查查吧。 +首先要答出 Reflow 定义；其次，什么时候触发，至少要答出两条。更进一步，面试官可能还会问你**怎么避免reflow**，这个可以自己去查查。 -## Repaint：重绘 +## 重绘：Repaint ### 定义 -**Repaint重绘制**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。 +**重绘制 Repaint**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。 说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。