前端

服务端

计算机基础

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。



### 同源策略

同源策略是一种对浏览器发出请求的安全策略。根据这种策略，一个Web页面只能从同一来源（协议，域名和端口都必须相同）获取数据。

### 跨域问题. 

当一个Web页面尝试从不同的源访问资源时，就会出现跨域问题。例如，一个在 www.example1.com 上托管的脚本尝试访问 www.example2.com 上的资源，这就违反了同源策略，所以浏览器会阻止这个请求并产生跨域错误。

### 解决跨域问题的手段

以下是一些常见的解决跨域问题的方法：

1. **CORS（跨源资源共享）**：CORS是一种让服务器允许来自特定源访问资源的机制。服务器通过设置特定的HTTP头部告诉浏览器哪些Web页面可以访问这些资源。
2. **JSONP（JSON with Padding）**：JSONP是一种通常用于解决跨域数据获取问题的方式。不过，这种方式局限于GET请求，并且安全性较差。
3. **代理服务器**：可以使用服务器端的代理转发请求，因为在服务器端不受同源策略限制。
4. **postMessage API**：使用HTML5引入的 window.postMessage 方法，可以安全地实现跨源通信。
5. **WebSocket协议**：WebSocket是一种建立在TCP协议之上的全双工通信协议，不受同源策略影响。
6. **WebSockets**：WebSockets API 是另一种通信协议，它不受同源策略的影响，可以用于任何地方的通信。
7. **Document.domain+iframe**：基于 document.domain 的跨域方法只适合主域相同的情况，也就是abc.example.com到www.example.com这样的跨域，区域子域和顶级字段相同。


什么是同源策略？什么是跨域问题？有什么手段可以解决跨域问题？

> 强制类型转换

**强制类型转换** 是指开发者显式地将一种数据类型转换为另一种数据类型。

强制类型转换的例子：

1. **Number转换为String**：使用 `toString()`方法来转换数字为字符串。例如：`(123).toString()`，结果为 `"123"`。
2. **String转换为Number**：使用 `Number()`函数将字符串转换为数字。例如：`Number("123")`，结果为 `123`。
3. **非布尔值转换为布尔值**：使用 `Boolean()`函数将非布尔值转换为布尔值。例如：`Boolean(1)`，结果为 `true`。

> **隐式类型转换**

**隐式类型转换**，又被称为**隐式类型强制转换**，是指JavaScript引擎在处理表达式时自动完成的类型转换。

隐式类型转换的两个例子：

1. **加法运算符**：当通过加法运算符加入字符串和非字符串（数字，布尔值等）时，非字符串将被转换为字符串。例如：`"5" + 3`，结果为 `"53"`。
2. **相等性比较**：如果比较的值具有不同的类型，JavaScript会尝试通过诸如转换字符串为数字，或转换布尔值为数字等方式，来进行比较。例如：`"5" == 5`，结果为 `true`。


列举 3 种强制类型转换和 2 种隐式类型转换

Web前端安全攻击主要有以下几种常见的方式：

1. **XSS攻击（跨站脚本攻击）**：攻击者通过在目标网站上注入恶意的HTML代码，当用户浏览该网站时就会运行这些恶意代码。

   **防御措施**：输入验证与过滤、输出编码、使用CSP（内容安全策略）防止不安全的动态脚本执行。
2. **CSRF攻击（跨站请求伪造）**：攻击者诱导用户点击链接，使用用户的登录凭证发送恶意请求。

   **防御措施**：使用CSRF token，验证每个请求。
3. **点击劫持**：攻击者将透明的恶意网站覆盖在真实网站上，诱导用户在不知情的情况下进行恶意操作。

   **防御措施**：使用X-FRAME-OPTIONS来防止网页被iframe调用。
4. **DoS攻击（拒绝服务攻击）**：恶意请求过多使得服务无法处理正常的请求。

   **防御措施**：限制访问频率、使用CDN（内容分发网络）等方式分散流量。
5. **SQL注入攻击**：攻击者通过输入特殊的SQL查询语句，来获取数据库的敏感信息。

   **防御措施**：使用预处理语句（Prepared Statements）或参数化的SQL命令，拒绝直接执行动态生成的SQL语句。
6. **上传恶意文件**：攻击者通过上传恶意文件，例如包含病毒或者后门的文件，来破坏服务器或者网页。

   **防御措施**：限制可上传文件类型，扫描上传的文件以防止上传恶意软件，对上传文件名严格过滤等。


Web前端安全攻击手段有哪些？以及应该如何做相应的防御措施？

> 为什么存在 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)可以删除数据


前端面试题手册