前端基础知识

1. CSS 中两个 .class1 .class2 从哪个开始解析

在 CSS 中，选择器 .class1 .class2 表示所有 class 为 class1 的元素中的 class 为 class2 的子元素。浏览器解析这个选择器时，从右向左解析。也就是说，浏览器首先找到所有 class 为 class2 的元素，然后检查这些元素的父级元素是否有 class1，从而应用样式。

.class1 .class2 {

color: red;

}

1

2

3

2. Flex 布局相关的问题

Flexbox 是一种一维布局模型，可以在一个方向上高效地分配空间并对齐内容。以下是一些常见的 Flex 布局属性：

display: flex: 将容器变为 flex 容器。

flex-direction: 定义主轴方向。取值有 row（默认）、row-reverse、column、column-reverse。

justify-content: 定义主轴上的对齐方式。取值有 flex-start、flex-end、center、space-between、space-around、space-evenly。

align-items: 定义交叉轴上的对齐方式。取值有 stretch（默认）、flex-start、flex-end、center、baseline。

flex-wrap: 定义是否换行。取值有 nowrap（默认）、wrap、wrap-reverse。

3. JS 的事件循环

JavaScript 是单线程的，使用事件循环来处理异步操作。事件循环的基本步骤：

执行栈：同步代码逐行执行，函数调用形成执行栈。

任务队列：异步操作（如 setTimeout、Promise）完成后，将回调函数放入任务队列。

事件循环：不断检查执行栈是否为空，如果为空则从任务队列中取出第一个任务并执行。

console.log('start');

setTimeout(() => {

console.log('timeout');

}, 0);

console.log('end');

// 输出顺序: start -> end -> timeout

1

2

3

4

5

6

7

4. 写题：解析 URL，history 模式和 hash 模式的混在一起

function parseURL(url) {

const parser = document.createElement('a');

parser.href = url;

return {

protocol: parser.protocol,

hostname: parser.hostname,

port: parser.port,

pathname: parser.pathname,

search: parser.search,

hash: parser.hash,

host: parser.host

};

}

const url = 'https://www.example.com:8080/pathname/?search=test#hash';

console.log(parseURL(url));

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

5. 写题：解析时间

function formatDate(date) {

const yyyy = date.getFullYear();

const mm = String(date.getMonth() + 1).padStart(2, '0');

const dd = String(date.getDate()).padStart(2, '0');

const hh = String(date.getHours()).padStart(2, '0');

const min = String(date.getMinutes()).padStart(2, '0');

const ss = String(date.getSeconds()).padStart(2, '0');

return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`;

}

const date = new Date();

console.log(formatDate(date));

1

2

3

4

5

6

7

8

9

10

11

12

13

6. 缓存相关问题

强缓存和协商缓存是 HTTP 缓存机制中的两种缓存策略：

强缓存：不会向服务器发送请求，直接从缓存中读取资源。常见的头部字段有 Expires 和 Cache-Control。

协商缓存：会向服务器发送请求，服务器根据资源的状态决定是否使用缓存。常见的头部字段有 Last-Modified 和 ETag。

一般存储较静态且不频繁更新的数据，如静态资源（CSS、JS、图片等）。