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、图片等）。
