前端

服务端

计算机基础

CSS中的`display`属性非常关键，主责决定一个元素如何被展示在页面上。以下是几个常见的`display`属性值以及它们的作用：

1. `none`：此值使元素不显示，并从文档布局中完全移除，就好像它从未存在一样，不占据任何空间。

 **例子**：当你想隐藏一些内容，而不影响页面布局时，可以使用`display: none;`。

 ```css
 .hidden-element {
 display: none;
 }
 ```

2. `block`：它将元素显示为块级元素，这意味着元素会新起一行显示，并且尽可能占满父元素的宽度。

 **例子**：默认的`<div>`、``、`<h1>`到`<h6>`等都是块级元素。

 ```css
 .block-element {
 display: block;
 }
 ```

3. `inline`：元素不会新起一行，其宽度仅由内容决定，多个`inline`元素可以在同一行显示。

 **例子**：``、`<a>`、``等元素默认是内联元素。

 ```css
 .inline-element {
 display: inline;
 }
 ```

4. `inline-block`：结合了`inline`和`block`的特点，让元素既可以在同一行显示，同时又可以设置宽高。

 **例子**：适用于需要在同一行显示的按钮或菜单项，而且还需要设定尺寸。

 ```css
 .menu-item {
 display: inline-block;
 }
 ```

5. `flex`：将元素设置为弹性容器，其子元素会成为弹性项目。这个值允许使用`flexbox`布局，可以提供更复杂的布局结构和对齐方式。

 **例子**：可以创建一个水平或垂直的导航栏，其中的项可以均匀地分布空间或对齐。

 ```css
 .flex-container {
 display: flex;
 }
 ```

6. `grid`：启用网格布局，其中的子元素可以放置在定义的行和列网格中。

 **例子**：当你要创建一个复杂的页面布局，例如一个有多列和明确对齐方式的仪表盘界面。

 ```css
 .grid-container {
 display: grid;
 }
 ```

7. `table`：类似于HTML的`<table>`，将元素表现为表格相关的元素，如`<table>`,`<tr>`, `<td>`等。

 **例子**：当你需要使用CSS而不是HTML标签来创建表格布局时。

 ```css
 .table-like {
 display: table;
 }
 ```

这些只是`display`属性中的几个值，实际上还有很多其他值，如`list-item`、`table-row`、`table-cell`等，它们可以用于更专门的布局需求。不同的`display`设置对布局、文档流和元素间的关系有着直接的影响。

display有哪些值？说明他们的作用？

在Chrome浏览器中，可以使用开发者工具（DevTools）中的网络(Network)面板来查看网页加载过程中的各个阶段的具体时长。这些阶段包括重定向（Redirects）、缓存检查（AppCache）、DNS查询（DNS Lookup）、TCP握手（TCP Handshake）、发送请求（Request sent）、等待服务器响应（Waiting (TTFB)）、接收数据（Content Download）等。通过分析这些时长，我们可以针对性地优化网页的加载性能。

以下是基于Chrome Timing信息来进行性能优化的几个步骤和建议：

1. **减少重定向（Redirects）**

 - 优化点：每个重定向都会增加额外的网络延迟。为了减少这种延迟，最好是减少或消除不必要的重定向。
 - 例子：如果你的网站从 `http://example.com`自动重定向到 `https://example.com`，这个重定向是必要的。但是，如果用户输入 `http://example.com/page`又重定向到 `https://example.com/page`，然后又因为尾斜杠缺失而重定向到 `https://example.com/page/`，这些额外的重定向就可以进行优化。
2. **优化DNS查找（DNS Lookup）**

 - 优化点：DNS查找的时间可以通过使用DNS预解析技术来减少。
 - 例子：在HTML中使用 `<link rel="dns-prefetch" href="//example.com">`可以提前解析域名，减少用户在访问该域名时的解析时间。
3. **优化TCP握手（TCP Handshake）**

 - 优化点：TCP握手次数的减少，通常意味着减少了服务器连接。可以通过使用HTTP/2来同时发送多个请求，或通过保持连接来减少握手次数。
 - 例子：启用HTTP/2可以让多个请求在同一个TCP连接上并行传输，减少了握手的需要。
4. **减少请求发送时间（Request sent）**

 - 优化点：请求发送时间可以通过减小请求大小来优化，例如减少Cookie的大小。
 - 例子：如果服务器和客户端之间传输的Cookie过大，可以考虑减少Cookie的使用，或者将一些不需要每次都发送的数据存储在客户端的localStorage中。
5. **降低首字节时间（TTFB）**

 - 优化点：服务器响应速度的提升可以通过优化服务器的性能或增加后端响应速度来实现。
 - 例子：对于慢查询进行优化，使用缓存来存储频繁请求的数据，或者提升服务器硬件性能。
6. **优化内容下载时间（Content Download）**

 - 优化点：内容下载时间可以通过减少资源大小或优化服务器的带宽利用率来缩短。
 - 例子：压缩图片和文本文件，使用Gzip或Brotli对文本内容进行压缩，确保服务器有足够的带宽来处理高峰期的流量。
7. **使用浏览器缓存策略**

 - 优化点：通过合理配置缓存策略，可以减少重复资源的下载。
 - 例子：为静态资源设置合理的缓存时间（例如CSS, JS, 图片文件），利用ETag或者Last-Modified头来验证资源是否需要更新。

如何根据 chrom e的 timing 指标优化网站性能？

### 什么是 Virtual DOM？

Virtual DOM（虚拟DOM）是一个编程概念，其中UI的表示形式保留在内存中，并通过称为Reconciliation的过程与“实际”的DOM同步。这个过程涉及创建整个UI的轻量级复制品。

以 JavaScript 对象的形式存在的 Virtual DOM 是实际 DOM 的一个轻量级副本。在 Virtual DOM 上进行的任何操作首先会在虚拟层面上完成，而不是直接在实际 DOM 上进行，这样可以提高性能和效率。

#### Virtual DOM 的工作流程如下：

1. 当应用的状态变化时，React会创建一个新的Virtual DOM树。
2. 新的Virtual DOM树与上一次渲染的Virtual DOM树进行比较。
3. React通过这个比较过程来确定实际DOM需要更新的最小部分。
4. 最后，React只更新那些需要变化的部分，而不是重新渲染整个页面。

### React 为什么使用 Virtual DOM?

React 使用 Virtual DOM 的主要原因是为了提高应用的性能和响应速度。实际的 DOM 操作很慢，因为它们涉及到浏览器的大量重排(repaints)和重绘(reflows)。通过减少直接对实际 DOM的操作，React 通过Virtual DOM可以提高效率，从而提高应用性能。

#### 使用 Virtual DOM 的优势包括：

- **更快的性能**：Virtual DOM的操作比实际DOM的操作更快，因为内存中的操作比直接操作浏览器中的实际DOM要快得多。
- **无需手动DOM操作**：开发者不需要直接操作DOM，减少了DOM操作的复杂性和代码量。
- **跨平台**：Virtual DOM为渲染提供了一个抽象层，这意味着React的原理可以应用于Web以外的其他平台，如React Native。
- **批量更新**：React可以聚合多个DOM的变化，并且一次性进行更新，这减少了不必要的渲染和DOM操作次数。
- **错误处理和组件化**：在React的组件化模型中，每个组件都管理自己的状态和DOM，这使得错误处理和应用的维护更容易。

#### 例子：

假设你有一个列表，你添加了一个新的列表项：

1. 在不使用 Virtual DOM 的情况下，可能需要重新渲染整个列表。
2. 使用 Virtual DOM，React会创建一个新的 Virtual DOM 树，并且只会将新的列表项添加到实际的DOM中，而不会触及列表的其他部分。

这样，React使用Virtual DOM可以显著提高大型和动态Web应用的性能。

什么是 Virtual DOM？React 为什么使用 Virtual DOM?

在判断一个JavaScript文件是用于Node.js环境还是浏览器环境时，可以从以下几个方面进行分析： 

1. **模块系统**:
 * **Node.js**: 使用 `require`和 `module.exports`或者 `import/export`（在启用了ES模块的情况下）来处理模块。如果你看到这样的代码，很可能该文件是为Node.js环境编写的。例如:
 <pre><section class="markdown-code"><div class="markdown-code__head"><div class="markdown-code__head-language">javascript<svg width="16" height="16" viewBox="0 0 48 48" fill="none"><path d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path></svg></div></div><div><code class="language-javascript">const fs = require('fs');
 module.exports = function() { /* ... */ };</code></div></section></pre>
 * **浏览器**: 传统的浏览器环境使用 `<script>`标签来加载JavaScript文件，而现代浏览器支持ES模块，使用 `import/export`。如果文件中存在如 `document`或 `window`这样的全局对象，说明它是为浏览器环境编写的。例如:
 <pre><section class="markdown-code"><div class="markdown-code__head"><div class="markdown-code__head-language">javascript<svg width="16" height="16" viewBox="0 0 48 48" fill="none"><path d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path></svg></div></div><div><code class="language-javascript">document.getElementById('example');</code></div></section></pre>
2. **全局对象**:
 * **Node.js**: 具有特定的全局对象，如 `global`, `process`, `__dirname`和 `__filename`。如果代码中使用了这些对象，说明它是为Node.js环境设计的。
 * **浏览器**: 浏览器具有自己的全局对象，如 `window`, `document`, `navigator`等。这些通常不会在Node.js环境中出现。
3. **内置模块/包**:
 * **Node.js**: Node.js有一些内置模块，如 `fs`, `http`, `path`等，这些模块只存在于Node.js中。
 * **浏览器**: 浏览器则提供了如 `DOM API`, `WebAPIs`等，它们不是Node.js的一部分。
4. **API的使用**:
 * **Node.js**: Node.js有一些专有的API，例如与文件系统交互、创建服务端网络应用等。
 * **浏览器**: 浏览器则提供了DOM操作、事件监听、Web存储等API。
5. **注释和文档**:
 * **代码注释**: 有时候开发者会在文件顶部留下注释说明这段代码的用途。
 * **项目文档**: 查看包含该文件的项目的 `README.md`或其他文档文件，通常会有环境要求的说明。
6. **构建工具和配置文件**:
 * 项目中的构建工具配置文件（如 `webpack.config.js`, `Gruntfile.js`, `Gulpfile.js`等）会提供关于目标环境的线索。这些工具常用于浏览器环境中的JavaScript代码打包。
7. **文件扩展名**:
 * 尽管这不是一个强制规则，有时候Node.js模块会使用 `.mjs`来指明它是一个ES模块。而传统的浏览器脚本可能会使用 `.js`。

**示例**: 假设我们有以下代码：

<pre><section class="markdown-code"><div class="markdown-code__head"><div class="markdown-code__head-language">javascript<svg width="16" height="16" viewBox="0 0 48 48" fill="none"><path d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path></svg></div></div><div><code class="language-javascript">const http = require('http');

http.createServer((req, res) => {
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Hello World\n');
}).listen(3000, '127.0.0.1');

console.log('Server running at http://127.0.0.1:3000/');</code></div></section></pre>

这个例子中，代码使用了 `require`来加载Node.js的 `http`模块，创建了一个服务器，并打印了一个消息表明服务器正在运行。从这些信息中可以明确地看出这是一个为Node.js环境编写的JavaScript文件。

面试题手册

display有哪些值？说明他们的作用？

如何根据 chrom e的 timing 指标优化网站性能？

什么是 Virtual DOM？React 为什么使用 Virtual DOM?

如何判断一个 JS 文件是用于Node.js 还是普通浏览器？