前端

服务端

计算机基础

网络浏览器或互联网浏览器是一种软件应用，用于检索、展示和浏览世界广域网上的信息资源。

Browser

浏览器缓存策略主要是用于提高网页加载速度，减少服务器压力以及节省带宽。以下是几种主要的浏览器缓存策略：

1. **强缓存（Strong Cache）**
   - `Expires`：这是HTTP/1.0中使用的头信息，用来指定资源到期的时间。如果请求的时间小于Expires的时间，浏览器会直接使用缓存中的资源，而不会向服务器发起请求。
   - `Cache-Control`：在HTTP/1.1中引入，比Expires更灵活。常用的指令包括`max-age`（资源最大有效时间）、`no-cache`（每次都要向服务器确认）、`no-store`（完全不缓存），等等。若设置了`max-age`，且缓存时间未过期，则浏览器会直接使用本地缓存。

2. **协商缓存（Negotiation Cache）**
   - `Last-Modified`和`If-Modified-Since`：服务器在响应中加入`Last-Modified`标头指明资源最后修改时间，浏览器再请求时通过`If-Modified-Since`将这个值发送给服务器，由服务器判断资源是否有更新。
   - `ETag`和`If-None-Match`：ETag是资源的唯一标识符，当资源有变动时ETag也会变。浏览器存储资源的ETag，并在下次请求时通过`If-None-Match`发送给服务器，以检查资源是否有更新。
   
   若在协商缓存中服务器确认内容没有更新，则服务器会返回304状态码，浏览器就会使用本地缓存；如果内容更新了，则会返回200状态码和新的资源内容。

3. **预缓存（Pre-Caching）**
   - Service Workers：通过Service Workers可以拦截网络请求，并动态地缓存或者恢复资源。这允许创建有效的离线体验，并且可以精细控制缓存策略。

4. **内存和硬盘缓存**
   浏览器通常将资源缓存在内存或硬盘中：
   - 内存缓存：缓存存储在内存中，访问速度快，但只在浏览器会话期间有效。
   - 硬盘缓存：缓存存储在硬盘上，访问速度慢一些，但即使关闭浏览器后依然可以使用。

举个例子，假设您访问了一个前端的网站，网站的CSS文件设置了强缓存，`Cache-Control`设置为`max-age=3600`，这意味着在接下来的一个小时内，如果您再次访问该网站，浏览器就会直接使用本地缓存的CSS文件，而不需要再次请求服务器，这样就能加快页面的加载速度。

而对于网站的新闻部分，可能会使用协商缓存，每次访问时通过ETag或者Last-Modified信息检查内容是否有更新，以确保用户总是看到最新的内容，同时在内容没有更新的情况下减少不必要的资源传输。

浏览器有哪些缓存策略？

### 同源策略

同源策略是一种对浏览器发出请求的安全策略。根据这种策略，一个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这样的跨域，区域子域和顶级字段相同。


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

如果我们要在JavaScript中去除URL中的 `#` 号以及后面的部分，我们可以使用 `window.location` 对象，具体是 `window.location.href` 属性，再结合 `String` 对象的 `split` 方法。请看以下例子：  

```javascript
// 假设当前URL为： https://www.example.com/page.html#section1

// 使用 JavaScript 获取当前URL并去除 # 及之后的部分
function removeHashFromUrl() {
  var currentUrl = window.location.href;
  var urlWithoutHash = currentUrl.split('#')[0];
  window.location.href = urlWithoutHash;  // 如果需要导航到去除hash的URL
  return urlWithoutHash; // 如果只是需要获取新的URL而不导航
}

var newUrl = removeHashFromUrl();
console.log(newUrl); // 输出：https://www.example.com/page.html
```

如果我们是在后端处理URL字符串，比如在Node.js环境或者其他不涉及浏览器的上下文中，我们可以简单地使用字符串处理方法。这里是用Node.js中的JavaScript例子：

```javascript
// 假设有一个URL字符串
var url = "https://www.example.com/page.html#section1";

// 去除URL中的 # 及之后的部分
function removeHashFromUrl(url) {
  return url.split('#')[0];
}

var newUrl = removeHashFromUrl(url);
console.log(newUrl); // 输出：https://www.example.com/page.html
```

在Python中处理URL也很简单，我们可以使用内置的 `urlparse`库，这样可以更加优雅地处理复杂的URL。这是一个Python例子：

```python
from urllib.parse import urlparse

# 假设有一个URL字符串
url = "https://www.example.com/page.html#section1"

# 去除URL中的 # 及之后的部分
parsed_url = urlparse(url)
new_url = parsed_url.scheme + "://" + parsed_url.netloc + parsed_url.path
print(new_url) # 输出：https://www.example.com/page.html
```

以上提供了去除URL中 `#` 号的几种方法，具体使用哪种取决于具体的应用场景以及开发环境。在前端JavaScript开发中，我们通常可能会涉及到浏览器的 `window.location` 对象，而在服务器端或者其他一些脚本处理中，则可能会使用字符串处理函数或者URL解析库。


如何去除 url 中的#号？

浏览器的缓存机制主要是为了提高网页的加载速度，减少服务器的负载，并优化用户的浏览体验。浏览器缓存可以分为以下几种类型： 

1. **强缓存（HTTP Cache Control）**
   强缓存不会向服务器发送请求，直接从缓存中读取资源。这是通过设置HTTP响应头中的 `Cache-Control`和 `Expires`实现的。

   - `Cache-Control`: 这个响应头可以设置多个值，比如：
     - `max-age=xxx`：表示资源在xxx秒后过期。
     - `no-store`：不允许缓存，每次都要向服务器请求。
     - `no-cache`：资源不会被缓存，每次都会发请求到服务器验证资源是否有更新。
   - `Expires`: 这是一个绝对时间，表示资源的过期时间。
2. **协商缓存（Validation Cache）**
   当强缓存失效后，浏览器会向服务器发送请求，询问资源是否有更新。这是通过 `Last-Modified/If-Modified-Since`和 `ETag/If-None-Match`这两对HTTP头实现的。

   - `Last-Modified/If-Modified-Since`: 服务器响应时通过 `Last-Modified`标识资源最后修改时间，浏览器下次请求时带上 `If-Modified-Since`，服务器比较后如果没有变化则返回304状态码，浏览器继续使用缓存。
   - `ETag/If-None-Match`: `ETag`是资源的一个唯一标识，类似于指纹。浏览器在请求时带上 `If-None-Match`，服务器对比ETag，如果没有变化则返回304状态码，浏览器继续使用缓存。
3. **Web Storage（本地存储）**
   包括 `localStorage`和 `sessionStorage`，它们提供了在客户端存储键值对数据的能力。`localStorage`数据在浏览器关闭后依然存在，而 `sessionStorage`的数据在页面会话结束时被清除。
4. **IndexedDB**
   是一种在浏览器中保存大量结构化数据的方式，可以创建、读取、遍历和搜索数据库中的记录。IndexedDB操作基于事件响应，与Web Storage相比，它可以提供更复杂的数据操作功能。
5. **Service Workers**
   Service workers可以拦截请求，并可以使用缓存API来管理请求的响应。开发者可以编写自己的缓存策略，例如，当网络不可用时，可以从缓存中提供备份内容。

举个例子，假设用户第一次访问一个网页，浏览器会下载所有资源，并按照HTTP头信息决定哪些资源应当被缓存。当用户再次访问这个网页时，如果相关资源具备有效的强缓存设置，浏览器会直接从缓存中加载资源，不经过服务器请求，这样可以极大提高页面加载速度。如果强缓存过期，浏览器会使用协商缓存机制与服务器通信，确认资源是否更新，从而决定是重新下载资源，还是继续使用缓存版本。


详细说明浏览器的缓存机制

当浏览器渲染页面时，会经历以下几个主要步骤：

### 1. 处理HTML - 构建DOM树
浏览器首先解析HTML文档以构建DOM（文档对象模型）树。DOM树是页面结构的表示，其中每个HTML标签都是树中的一个节点。

**例子：**
如果有一个简单的HTML文档如下：
```html
<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是一个段落。</p>
</body>
</html>
```
浏览器会创建一个DOM树，包含html、head、title、body、h1和p等节点。

### 2. 处理CSS - 构建CSSOM树
浏览器会解析CSS，包括外部的CSS文件和页面内部的样式。解析完成后，浏览器会创建CSSOM（CSS对象模型）树。CSSOM树反映了所有CSS规则以及它们的层叠和继承关系。

**例子：**
对于上述HTML，可能有一个CSS文件如下：
```css
body { font-family: Arial, sans-serif; }
h1 { color: blue; }
```
对应的CSSOM树会包含body和h1的样式规则。

### 3. 结合DOM和CSSOM - 构建渲染树
接下来，浏览器会结合DOM树和CSSOM树来创建渲染树。渲染树只包含需要显示的节点和它们的样式信息。这意味着例如`<script>`和`<style>`标签等不会被包含在渲染树中。

### 4. 布局 - 计算每个节点的位置
一旦渲染树构建完成，浏览器将进行布局（也被称为回流），计算出渲染树中每个节点的确切位置和大小。这个过程会考虑视口大小、元素的大小、元素之间的关系等因素。

### 5. 绘制 - 像素化页面内容
布局完成后，浏览器会进入绘制（或绘图）阶段，它会遍历渲染树，并使用UI后端层将每个节点绘制到屏幕上。这个过程涉及将样式信息转化为实际的像素。

### 6. 合成 - 层的合成和显示
某些复杂的视觉效果如3D变换或阴影，可能会使得元素被分到不同的层。浏览器会管理这些层，最后将它们合成到一起，显示在屏幕上。

在整个渲染过程中，如果DOM或CSSOM被脚本更新，会触发重新布局（回流）和重绘，这可能会影响渲染性能。为了获得最佳性能，开发者应该尽量减少这些操作的频率和范围。

以上就是浏览器渲染页面的详细过程。这个过程需要高效地处理和合作，才能尽快地将内容呈现给用户。

浏览器渲染页面的详细过程

删除一个cookie的值可以通过多种方式实现，具体取决于您使用的编程语言和环境。以下是一些通用的方法和例子：

### 在JavaScript中删除一个Cookie：

要在客户端JavaScript中删除一个cookie，您可以将cookie的过期时间设置为过去的一个时间点。这样做会告诉浏览器此cookie已经过期，于是浏览器会删除它。

```javascript
function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
```

使用这个函数，您只需要传入您希望删除的cookie的名称即可。

### 在HTTP响应中删除一个Cookie：

如果您是在服务器端工作，比如使用Node.js的Express框架，您可以通过设置响应头来告诉浏览器删除一个cookie。

```javascript
res.clearCookie('cookieName');
```

这行代码会设置一个响应头来清除名称为 `cookieName`的cookie。

### 在PHP中删除一个Cookie：

在PHP中，您可以通过设置一个负的过期时间来删除一个cookie。

```php
setcookie("cookieName", "", time() - 3600);
```

上面的代码将 `cookieName`的过期时间设置为一个小时前，这会导致它被删除。

### 在Python的Flask框架中删除一个Cookie：

如果您在使用Flask框架，可以利用响应对象来删除cookie。

```python
from flask import make_response

@app.route('/delete-cookie')
def delete_cookie():
    response = make_response('Cookie has been deleted')
    response.set_cookie('cookieName', '', expires=0)
    return response
```

这段代码创建了一个响应对象，并使用 `set_cookie`方法将 `cookieName`的值设置为空字符串，并且将过期时间设置为0，这样浏览器会删除这个cookie。

### 总结：

通常删除cookie的方法是将其过期时间设置为过去的某个时间点，这样浏览器就会认为cookie已经过期，自动将其删除。不同的编程语言和框架有各自的函数或方法来实现这一点。重要的是要确保您发送正确的HTTP头信息，以便浏览器知道要删除的cookie。


如何删除一个cookie值？

同源政策（Same-origin policy）是一种重要的安全措施，它被设计为Web浏览器中的一个关键安全特性。它的目的是为了保护用户的在线安全，防止恶意网站访问或操纵另一个网站的敏感数据。同源限制确保了一个源（origin）中加载的文档或脚本只能与同一源的资源进行交互，而不能与其他源的资源进行交互。这里的源是指协议，端口和主机名的组合。

以下是同源政策的必要性以及它如何提高网络安全的几个方面：

1. **防止跨站点请求伪造（CSRF）**：
   跨站点请求伪造是一种网络攻击，攻击者通过伪装成受信任用户的请求来利用用户已经认证的身份。如果没有同源限制，攻击者可以轻易地从自己的网站发起请求到另一个网站，并潜在地进行未经授权的操作。

   例如，用户登录到他们的银行网站，并在另一个标签页中访问了一个恶意网站。如果没有同源政策，恶意网站可以发起请求到银行网站，并可能执行一些不良操作，例如转账，而这些操作是在用户的权限下进行的。
2. **保护用户隐私**：
   同源政策防止了一个网站的脚本访问另一个网站的数据，这样可以保护用户个人信息不被未授权的第三方获取。例如，如果你访问了一个电子邮件提供商的网页，同源政策将防止其他网站的脚本读取你的邮件内容。
3. **阻止DOM操作**：
   如果没有同源限制，恶意脚本可以操纵其他网站的DOM（文档对象模型），从而可能篡改页面内容、捕获敏感信息或者在不知情的情况下在用户界面上执行操作。
4. **限制网络攻击范围**：
   通过限制脚本只能与同一源的资源交互，同源政策有助于减少网络攻击面，因为攻击者不能简单地通过自己控制的网站操纵其他网站的资源。
5. **隔离潜在恶意文件**：
   当网站加载第三方插件或广告时，同源政策防止这些第三方资源访问宿主网站的数据，因此即使这些资源被恶意利用，它们也不能直接访问宿主网站的敏感信息。
6. **控制Web API和资源的访问**：
   一些现代Web API，如Web Storage、IndexedDB等，受同源政策的保护，只有在同源环境下才能被访问。这样可以确保只有在合适的安全上下文中才能访问和操作用户数据。
7. **促进安全的跨源通信**：
   同源政策实施了严格的限制，但同时，Web也提供了如CORS（跨源资源共享）这样的机制来安全地允许跨源访问，其中需要明确服务器端的许可和合适的客户端处理。


浏览器为什么要有同源限制？

在谷歌Chrome浏览器中，当您打开一个新的网页时，Chrome通常会启动几个进程。这是因为Chrome采用了多进程架构来提升性能和安全性。具体需要启动的进程数量可能会根据您的浏览器设置、扩展插件、打开的标签页数量以及Chrome的版本不同而有所变化。以下是Chrome打开一个新页面时可能会启动的主要进程类型：

1. **浏览器进程（Browser Process）**：这是主要的控制进程，管理Chrome用户界面的所有方面，包括地址栏、书签、前进和后退按钮等。它也负责文件的下载和安全策略。

2. **渲染进程（Renderer Process）**：每个标签页通常有自己的渲染进程（在默认情况下）。渲染进程负责一个网页的渲染，包括HTML、CSS、JavaScript的执行等。这种隔离机制可以确保如果一个网页崩溃，它不会影响到其他标签页。

3. **插件进程（Plugin Process）**：如果页面使用了插件（如Adobe Flash Player，虽然现在已经逐渐弃用），每个插件可能有其自己的进程。

4. **GPU进程（GPU Process）**：Chrome有一个专门的GPU进程，用来处理GPU加速的任务，例如3D CSS效果、WebGL内容等。

5. **扩展进程（Extension Process）**：如果您安装了Chrome扩展，每一个活动的扩展通常都会有自己的进程。

例如，假设您打开了一个新的Chrome窗口，并在其中打开了一个包含多媒体内容且有多个扩展活动的复杂网页，那么您可能至少会看到如下的几个进程：
- 一个浏览器进程
- 一个渲染进程
- 多个扩展进程（根据活动的扩展数量）
- 一个GPU进程

所以在这个假设中，打开这个页面至少需要4种类型的进程，具体进程数取决于活动扩展的数量。

此外，从Chrome 67版本开始，Chrome推出了一种名为“Site Isolation”的安全特性，这会导致更多的进程生成，因为它会为来自不同站点的渲染器分别创建不同的进程，以加强站点之间的隔离。这意味着即使是单个标签页也可能因为加载了来自不同域的iframe而产生多个渲染进程。

Browser面试题手册