前端基础知识

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