前端

服务端

计算机基础

> 为什么存在 1px 问题

移动端的1px问题主要是由于设备的物理像素和逻辑像素的不同所致。在高清显示屏（即设备独立像素比例devicePixelRatio大于1）的设备上，一个CSS像素可能会对应多个设备像素。这就导致了CSS的1px边框在高清屏上显示得比预期更粗。


> 1px

以下是一些主要的解决1px问题的方案：

1. **视口缩放（Viewport Scale）**

   视口缩放的原理是将页面的视口设置为设备宽度的一半或一部分，然后布局以这个新的视口宽度为基准进行。由于视口被缩小，一个CSS像素也就对应了更少的设备像素。

   ```html
   <meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5,user-scalable=no">
   ```
2. **使用Media Query**

   可以使用CSS的Media Query配合devicePixelRatio设定不同dpr下的边框样式，这样可以确保在不同dpr的设备上边框都看起来只有1px。

   ```css
   @media only screen and (-webkit-device-pixel-ratio: 2) {
     .border {
       border-width: 0.5px;
     }
   }
   ```
3. **使用伪元素 + transform: scaleY(.5)/scaleX(.5)**

   利用伪元素，将元素的边框做一次.5的缩放，使得高清屏下1px边框变细。

   ```css
   .border:after {
     content: '';
     position: absolute;
     bottom: 0;
     background: #000;
     width: 100%;
     height: 1px;
     transform: scaleY(.5);
     -webkit-transform: scaleY(.5);
   }
   ```
4. **使用SVG**

   可以使用SVG矢量图形来实现1px边框。由于SVG是矢量图形，在任何分辨率的屏幕上都会很清晰。

   ```html
   <svg width="100%" height="1" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <line x1="0" y1="0" x2="100%" y2="0" stroke="black" stroke-width=".5"/>
   </svg>
   ```
5. **边框图片（Border Image）**

   `border-image` 属性可以让你使用图像作为边框，你可以自由定义图像如何填充和拉伸。

以上只是其中的一些常用解决方案，每种方法都有其适用范围和局限。在实际开发过程中，需要根据具体的应用情况选择最合适的方案。


为什么有移动端 1px 的问题以及有什么方案可以解决移动端 1px 的问题？


CSS 选择器用于决定某个HTML元素上应用哪些样式。

以下是一些常用的CSS选择器：

**1. 元素选择器**

基于HTML元素的名称选择元素。例如，选择所有的 `<p>` 元素：

```css
p {
    color: red;
}
```

**2. id 选择器**

使用HTML元素的 `id` 属性选择特定元素。id 选择器在CSS中使用 #" 符号定义。例如,选择 `id="intro"`的元素：

```css
#intro {
    color: blue;
}
```

**3. 类选择器**

使用HTML元素的 `class` 属性选择特定元素。类选择器在CSS中使用 `.` 符号定义。例如,选择 `class="highlight"`的所有元素：

```css
.highlight {
    background-color: yellow;
}
```

**4. 属性选择器**

可以选择带有指定属性的HTML元素。例如，选择所有带有 `target` 属性的 `<a>` 元素：

```css
a[target] {
    background-color: pink;
}
```

**5. 伪类选择器**

用于选择HTML元素的特定状态。例如，选择鼠标悬停在上面的 `<a>` 元素：

```css
a:hover {
    color: green;
}
```

**6. 伪元素选择器**

用于选择元素的某一部分。例如，选择每个 `<p>` 元素的第一行：

```css
p::first-line {
    color: orange;
}
```

**7. 组合选择器**

有时候，我们需要选择满足多项条件的元素，这时候就可以使用组合选择器。常见的组合选择器如下：

- 后代选择器（空格）

```css
div p {
    color: brown;
}
```

- 子代选择器（>）

```css
div > p {
    color: purple;
}
```

- 相邻兄弟选择器（+）

```css
div + p {
    color: gray;
}
```

- 一般兄弟选择器（~）

```css
div ~ p {
    color: teal;
}
```


CSS 选择器有哪些

联系：它们都能让元素不可见

区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。

display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点由于继承了 hidden 而消失，通过设置 visibility: visible，可以让子孙节点显示。

修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。

读屏器不会读取 display: none;元素内容；会读取 visibility: hidden;元素内容。



display: none;与visibility: hidden;的区别

`link`和 `@import`都是用于在HTML文档中链接和导入CSS样式的方法，但它们之间存在一些关键区别：

### 表现形式

* `link`是HTML标签，这种方式通过HTML的 `<link>`元素来提供链接；
* `@import`是CSS提供的方式，可以在一个CSS样式表中导入其他样式表；

### 加载方式

* `link`在页面一开始加载时就会同时加载CSS文件；
* `@import`则是在页面加载完之后再加载CSS，因此如果CSS文件较多、较大时，可能会导致页面加载不同步，影响网页性能；

### 兼容性

* `link`是XHTML标签，无论是早期的HTML版本还是现在的XHTML，都支持 `link`标签；
* `@import`是在CSS2.1才出现的，所以早期的浏览器不支持 `@import`方式；

### 使用条件

* `link`可以定义RSS、链接到打印版的CSS等，更具有扩展性；
* `@import`只能加载CSS

以上就是 `link`和 `@import`的主要区别。


link与@import的区别

**GIF**

8 位像素，256 色

无损压缩

支持简单动画

支持 boolean 透明

适合简单动画


**JPEG**

颜色限于 256

有损压缩

可控制压缩质量

不支持透明

适合照片


**PNG**

有 PNG8 和 truecolor PNG

PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画

适合图标、背景、按钮


PNG,GIF,JPG 的区别及如何选

HTML表单（form）是可以执行跨域请求的。

在Web开发中，跨域请求指的是从一个源（domain、协议、端口）发起的请求试图获取另一个源上的资源。通常，出于安全考虑，浏览器会实施同源策略（Same-Origin Policy），这意味着如果使用XMLHttpRequest或Fetch API来发起Ajax请求，那么请求通常会受到限制，除非目标服务器明确允许跨源资源共享（CORS，Cross-Origin Resource Sharing）。

但是，HTML表单不受同源策略的限制，因此可以向任何URL发起POST或GET请求，即使这个URL指向的是另一个域。当表单提交时，浏览器会将用户输入的数据作为请求参数发送到表单的 `action`属性所指定的URL。不过，使用表单进行跨域提交时，浏览器会导航到响应页面，也就是说用户的当前页面会被新页面替换。

下面是一个简单的表单跨域请求的例子：

```html
<form action="https://example.com/api/submit" method="POST">
  <input type="text" name="username" value="User">
  <input type="text" name="password" value="Pass">
  <input type="submit" value="Submit">
</form>
```

在此示例中，表单数据将提交给位于 `example.com`域的服务器，即使表单所在的HTML页面可能托管在不同的域上。当用户点击提交按钮时，浏览器会将表单数据作为POST请求的一部分发送到 `example.com`。

需要注意的是，即使表单可以跨域提交，服务端仍然需要处理来自不同源的请求。此外，跨域表单提交不会提供Ajax那样的客户端JavaScript接口来访问响应内容，除非服务器在响应中包含适当的CORS头部信息。


Form 表单可以执行跨域请求吗？

FormData主要有两个用途：




**表单序列化**

将form表单元素的name与value进行组合，实现表单数据的序列化




**异步上传文件** 

使用步骤：

1. 创建formData对象 const formData = new FormData()

2. 初始化： new FormData(form元素)



FormData 对象操作方法

1. get(key)与getAll(key)来获取相对应的值
2. append(key,value)在数据末尾追加数据

3. set(key, value)来设置修改数据
4. has(key)来判断是否存在对应的key值delete(key)可以删除数据


介绍下表单提交，和 formData 有什么关系

> 什么是 Web 语义化

**Web 语义化**

是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 css 命名的语义化。

**HTML 标签的语义化**

通过使用包含语义的标签（如 h1-h6）恰当地表示文档结构 。

**CSS 命名的语义化** 

为 html 标签添加有意义的 class，id 补充未表达的语义，如通过添加符合规则的 class 描述信息。

> Web 语义化的好处

需要语义化的主要理由有以下几点：

1. 去掉样式后页面呈现清晰的结构
2. 盲人使用读屏器更好地阅读
3. 搜索引擎更好地理解页面，有利于收录
4. 便团队项目的可持续运作及维护


什么是 web 语义化,有什么好处

JavaScript 的执行过程大致可以分为以下几个阶段：

### 1. 解析（Parsing）

在这一阶段，JavaScript 引擎会读取源代码，并将其解析成抽象语法树（AST）。抽象语法树是一种深层次的、结构化的代码表达方式，能够以树形结构表现代码中的每个语句、表达式等元素。解析过程中，如果遇到语法错误，会抛出错误，停止进一步执行。

### 2. 编译（Compilation）

JavaScript 引擎（如V8）通常会将解析后的代码进行即时编译（JIT）。编译器会先生成字节码，这是一种低级的、比源代码更接近机器语言的代码。随后根据程序的执行情况，编译器可能会把热点代码（经常执行的代码）编译成优化的机器码，提高执行效率。

### 3. 执行（Execution）

编译后得到的字节码或机器码被送到 JavaScript 引擎的执行环境中执行。在执行过程中，会进入下面的子阶段：

- **创建执行上下文（Execution Context）**：首先会创建全局执行上下文，随后每当调用一个函数时，就会为该函数创建一个新的执行上下文。执行上下文包括变量对象、作用域链和 `this` 引用等信息。
- **变量提升（Hoisting）**：在执行代码前，函数声明和变量（声明）会被提升到它们各自的执行上下文的顶部。变量会初始化为 `undefined`，而函数则会完整地提升。
- **执行代码（Running Code）**：按照执行上下文中的代码逐行执行，进行变量赋值、函数调用等。
- **垃圾回收（Garbage Collection）**：在执行过程中，引擎会进行内存管理，自动释放那些不再被需要的内存空间。

### 4. 优化（Optimization）

在代码执行的过程中，某些代码可能会被执行多次，引擎会尝试对这些频繁执行的代码进行优化。例如，在V8引擎中，有一个称为“TurboFan”的优化编译器，它可以根据代码执行的特点对代码进行优化，提高性能。如果优化假设失败了（即出现了“去优化” deoptimization），引擎还可以将代码回退到一个较少优化的版本。

### 5. 回收（Deoptimization & Garbage Collection）

对于那些不再需要的数据和优化，JavaScript 引擎会进行去优化和垃圾回收，以保证内存的高效使用。

**例子：**
假设我们有这样一个简单的 JavaScript 函数：

```javascript
function sum(a, b) {
  return a + b;
}

let result = sum(5, 3);
```

首先，该函数会被解析成 AST。然后，它可能会被编译成字节码，当我们调用 `sum(5, 3)` 时，会创建一个新的执行上下文，包含 `a` 和 `b` 的参数以及任何局部变量。在这个上下文中，`a` 和 `b` 被赋予了值 `5` 和 `3`，函数执行，并返回结果 `8`。这个过程中可能还包括了对 `sum` 函数的优化，如果函数被频繁调用。最后，当执行上下文离开作用域，如果没有其他引用指向其中的数据，垃圾回收器最终会清理掉这些对象。


JavaScript 执行过程分为哪些阶段？

JavaScript 区分微任务（microtasks）和宏任务（macrotasks）主要是为了有效地管理异步操作的执行时机和顺序。这两种类型的任务允许 JavaScript 引擎维持一个控制异步操作何时何地执行的精细化调度机制。

### 宏任务 (Macrotasks)
宏任务通常是浏览器的主要任务，包括但不限于：
- `setTimeout`
- `setInterval`
- I/O 操作
- UI 渲染
- 事件处理（如点击、滚动事件）
  
每次执行栈为空时，事件循环都会从任务队列中取出一个宏任务执行。

### 微任务 (Microtasks)
微任务通常是需要快速响应的任务，执行时机在每个宏任务之后，以及JavaScript执行环境准备好以后。微任务包括：
- `Promise` 回调（例如`.then`、`.catch`和`.finally`）
- `MutationObserver` 的回调
- `queueMicrotask`函数

### 执行顺序
在每个宏任务执行完毕后，在执行下一个宏任务之前，JavaScript 引擎会处理所有队列中的微任务。这意味着微任务总是在当前宏任务结束和下一个宏任务开始之间执行，并在新的UI渲染前完成。这样可以确保异步操作的快速响应，同时因为微任务的延迟更小，所以适合高优先级的任务。

### 为什么区分
区分微任务和宏任务的原因包括：

1. **性能优化：** 通过微任务，JavaScript 可以在不影响用户界面渲染的情况下，快速执行简单的操作，如承诺的解决。这提高了应用程序的响应速度和性能。
  
2. **控制异步操作顺序：** 微任务和宏任务的区分允许开发者控制异步操作的执行顺序。例如，一个由`Promise`产生的微任务可以确保其在下次UI渲染之前解决，而`setTimeout`可能会推迟到下一个宏任务。
  
3. **避免阻塞：** 对于需要快速执行的代码，使用微任务可以避免阻塞宏任务队列，这有助于避免长时间运行的任务阻塞UI更新。

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

```javascript
console.log('宏任务开始');

setTimeout(() => {
  console.log('宏任务');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务');
});

console.log('宏任务结束');
```

执行顺序会是这样的：
1. 打印"宏任务开始"
2. 宏任务结束时，设置了一个`setTimeout`
3. 打印"宏任务结束"
4. 当前宏任务已结束，开始执行微任务队列中所有任务
5. 打印"微任务"
6. 微任务队列为空，开始下一个宏任务
7. 打印"宏任务"

通过这个例子，我们可以看到微任务总是在当前执行栈清空后立即执行，而宏任务的执行则可能会因为任务队列中的其他宏任务而延迟。这种机制允许JavaScript有效地处理异步事件，同时保持对执行顺序的细粒度控制。

面试题手册