📢 快来学习啦！

这篇是关于 浏览器 的总结~

浏览器基础知识

浏览器的主要组件

用户界面包括地址栏、后退/前进按钮、书签目录等。这些是除了浏览器主窗口显示请求页面外，其它现实的各个部分都属于用户界面。
浏览器引擎在⽤户界⾯和呈现引擎之间传送指令。
渲染引擎负责显示请求的内容。例如，如果请求内容为 HTML，它负责解析 HTML 及 CSS，并显示解析后的结果。
网络用于完成网络调用，如 HTTP 请求。它具有平台无关的接口，并为所有平台提供底层实现，可在不同平台上工作。
⽤户界⾯后端⽤于绘制基本的窗⼝⼩部件，⽐如组合框和窗⼝。其公开了与平台⽆关的通⽤接⼝，⽽在底层使⽤操作系统的⽤户界⾯⽅法。
JS解释器用于解释执行 JavaScript 代码。
数据存储属于持久层，浏览器需要在硬盘中保存类似 cookie 的各种数据。HTML5 定义了 Web Database 技术，这是一种轻量级且完整的客户端存储技术。

浏览器的工作原理

输入网址用户在浏览器地址栏输入网址，这是访问网站的第一步。
解析网址：浏览器将用户输入的网址（URL）解析成服务器可以识别的 IP 地址。这一过程需要依赖 DNS（域名系统）来完成，DNS 服务器会将域名转换成相应的 IP 地址。
建立连接并发送请求：解析得到 IP 地址后，浏览器通过 HTTP（超文本传输协议）或其他协议（如 HTTPS ）与服务器建立连接，并发送请求。这个请求通常包括要获取的网页资源的相关信息。
服务器处理请求：服务器接收到浏览器发送的请求后，会查找并处理相应的资源。这通常涉及检索存储的网页文件，如 HTML、CSS、JavaScript 文件以及可能包含的图片、视频等其他媒体资源。
返回响应：服务器处理完请求后，会通过HTTP响应将数据（即网页内容）发送回浏览器。响应中包含了状态码，表示请求是否成功，以及所请求的网页数据。
渲染网页：浏览器接收到服务器返回的响应后，开始解析 HTML 文件并构建 DOM 树（文档对象模型），同时还会加载和解析 CSS 文件以及执行 JavaScript 代码。根据这些信息，浏览器会渲染出网页的可见部分，并显示在屏幕上。
交互与更新：一旦网页被加载和渲染，用户就可以与之交互。当用户点击页面上的链接、按钮或其他交互元素时，浏览器会根据 JavaScript 的指令来更新网页内容或向服务器发送新的请求以获取更多数据。
缓存与历史记录：浏览器在工作过程中还会管理缓存，存储已经下载的资源，以便在后续请求中能够快速加载。同时，浏览器也会记录用户的浏览历史，使用户能够轻松地在不同页面之间导航。

浏览器的同源策略

同源策略是浏览器的一个安全策略，它限制了一个源的文档或者脚本与另一个源的资源进行交互。这是一种隔离潜在恶意文件的重要安全机制。同源指的是协议、域名和端口三者必须一致。

浏览器跨域

跨域是指从一个域名的网页去请求另一个域名的资源。这主要是由于浏览器的同源策略限制，即浏览器为了提高网站的安全性对 JavaScript 施加的限制，使得浏览器不能执行其他网站的脚本。同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

跨域的解决方案：

JSONP

原理：利用HTML里 <script> 元素标签的 src 没有跨域限制动态创建 script 标签，将 src 作为服务器地址，服务器返回一个 callback 函数。这个函数是在前端定义的，后端会把接口需要响应的数据注入在函数的参数里。
注意事项：只支持 GET 请求，且存在安全风险。

CORS（跨域资源共享）

原理：一种现代Web标准，允许服务器通过设置特定 HTTP 响应头来明确指定哪些源可以访问其资源。
示例头部： Access-Control-Allow-Origin: "web.xxx.com"（可以指定地址） Access-Control-Allow-Origin: "*"（允许任何地址访问，但安全性不高）
注意事项：需要后端配合设置。

代理服务器（如Nginx、Vite/Webpack的proxy代理）

原理：通过在本地或服务器上设置代理服务器，将跨域请求转发到目标服务器，再由代理服务器将响应返回给前端。
注意事项：在服务器端进行跨域配置，例如使用 Nginx 进行反向代理，或在服务器代码中设置 CORS 相关头部。

cookies、sessionStorage和localStorage的区别

cookies、sessionStorage 和 localStorage 都是用于在客户端存储数据的机制，但它们在使用方式和特性上有所不同。

cookies 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。cookies 大小有限制且数量不可太多，同时可以设置过期时间。
sessionStorage是 HTML5 新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage 也是 HTML5 新增的本地存储 API，数据不是由服务器发送回来的，而是关联在客户端本地磁盘上的，即使关闭浏览器，数据也不会消失，除非主动删除数据。
三者中仅 cookies 会在请求时被发送到服务器。

浏览器的兼容性问题

浏览器的兼容性问题是指由于不同的浏览器（如Chrome、Firefox、Safari、Edge、Internet Explorer等）对于Web标准的支持程度和解析方式存在差异，导致相同的 HTML、CSS 或 JavaScript代码在不同浏览器下可能呈现出不同的表现或功能的行为。这些问题可能包括布局错乱、样式丢失、JavaScript功能失效等。解决兼容性问题对于确保网站或Web应用在多种浏览器环境下都能正常工作至关重要。

解决方案

HTML兼容性问题
- 使用符合 W3C 标准的 HTML 标签和属性，避免使用已被废弃的元素。
CSS兼容性问题
- 针对特定浏览器的CSS特性（如CSS3动画、渐变等）需要加上厂商前缀（-webkit-, -moz-, -ms-, -o-）。
- 使用 CSS reset库，如 Normalize.css，来确保不同浏览器下的默认样式一致。
- 使用自动化工具如 autoprefixer 来自动添加必要的CSS前缀。
JavaScript兼容性问题
- 新的 JavaScript 特性（如箭头函数、Promise等）在旧版浏览器中可能不支持，可以使用Babel等转译工具将其转换为旧版本兼容的代码。
响应式设计与视口问题
- 确保使用正确的 Meta 标签来控制页面在移动设备上的缩放和布局。
- 使用 CSS媒体查询来针对不同屏幕尺寸和分辨率提供适配样式。

浏览器的性能优化

浏览器性能优化是提升用户体验的关键，尤其是在加载速度、响应能力和流畅度方面。以下是一些关键的浏览器性能优化策略：

1. 减少HTTP请求

通过合并文件、使用 CSS精灵、使用缓存等方法来减少 HTTP 请求的数量。

2. 压缩和合并资源文件

使用压缩工具（如Gzip）来压缩 HTML、CSS 和 JavaScript 文件，并使用合并工具将这些文件合并成一个文件，以减少HTTP请求的数量。
服务器端开启 GZIP 压缩，进一步减少文件传输大小。
设置合理的 HTTP 缓存策略，如 ETag、Last-Modified 或 Cache-Control，让浏览器缓存静态资源。

3. 异步加载与懒加载

使用异步加载技术（如动态脚本加载、延迟加载等）来加载 JavaScript，避免阻塞页面渲染。
使用懒加载技术（如图片懒加载）等待图片或部分内容在滚动到可视区域时再加载，减少初始加载时间。

4. 优化图片

使用 WebP 等高效格式代替 JPEG/PNG ，减小图片大小。
上传与使用场景匹配的图片尺寸，避免浏览器缩放。

5. 优化CSS和JavaScript

避免使用 CSS表达式,它们会持续计算，影响性能。
合理安排 DOM 操作，尽量减少页面布局的重新计算，减少重绘和重排。

6. 使用性能分析工具

利用 Performance 面板分析页面加载和运行时性能，找出瓶颈。
运行 Lighthouse 审计，获取关于性能、可访问性、SEO 等方面的建议。

浏览器的安全性

熟悉常见的Web安全威胁，如跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、点击劫持等。了解浏览器提供的安全特性，如同源策略、内容安全策略（CSP）、HTTPS等，并学会如何在实际项目中应用这些特性来提高安全性。

token 相关

token 定义

在计算机安全和网络领域，Token 通常指的是用于验证用户身份和授权访问特定资源的临时凭证。它作为一种安全机制，用户在成功登录后，服务器会颁发一个 Token 给客户端，客户端之后的每一次请求都需要附带这个 Token，服务器通过验证 Token 的有效性来确认用户身份并决定是否允许访问请求的资源。这有助于实现无状态认证，提高系统的安全性与效率。

token 的生成

Token 的生成通常由服务器端完成，可以使用任何编程语言来实现。生成 Token 的过程需要考虑安全性和随机性，以确保 Token 的唯一性和不可预测性。

token 的存储

Token 通常存储在客户端的本地存储中，如 Cookie、Local Storage 或 Session Storage。服务器端可以通过验证 Token 的有效性来确认用户身份，并决定是否允许访问请求的资源。

token 的使用

客户端在每次请求时，需要将 Token 作为请求头的一部分发送给服务器。服务器通过验证 Token 的有效性来确认用户身份并决定是否允许访问请求的资源。

token 无感刷新

是一种优化用户体验的技术，为了避免用户在 Token 过期后因频繁重新登录而导致的体验中断。

定义

Token无感刷新是一种在用户与应用程序交互过程中，自动刷新 Token 以延长其有效期的机制。这个过程在后端自动完成，用户无需感知到 Token 的刷新，从而保持流畅的用户体验。

实现原理

Token有效期：服务器为每个Token设置一个有效期，例如30分钟或1小时。在这个有效期内，用户可以使用Token访问受保护的资源。
定期检查：前端应用会在用户活动期间定期检查Token的有效期。这通常通过轮询或心跳机制实现，即在一定时间间隔后发送请求到服务器，检查Token是否仍然有效。
刷新Token：
- 如果服务器返回 Token 已失效的信息，前端应用会立即发起一个新的请求到认证服务器，使用 RefreshToken 来获取新的访问 Token。
- RefreshToken 是一个长期有效的Token，用于在 AccessToken 过期时获取新的AccessToken。它通常存储在浏览器的 LocalStorage 中，以确保在用户关闭和重新打开浏览器时仍然可用。
无缝切换：在获取到新 Token 后，前端应用会立即更新本地存储的 Token，并使用新 Token继续之前的操作，从而实现了无缝的用户体验。

实现步骤

获取 AccessToken 和 RefreshToken：在认证成功之后，后端将生成的 AccessToken 和 RefreshToken 发送给客户端，并保存到本地缓存。
设置请求拦截器：前端应用使用 axios 等库设置请求拦截器，在请求中携带 AccessToken。
拦截响应：当服务器返回 Token 已失效的状态码时，前端应用拦截该响应，并调用刷新 Token 的接口。
更新Token：前端应用使用 RefreshToken 获取新的 AccessToken，并更新本地存储的Token。
重新执行请求：使用新的 AccessToken 重新执行之前的请求。

注意事项

安全性：确保 RefreshToken 的安全性至关重要，因为它可以用于获取新的 AccessToken。通常，RefreshToken 会存储在浏览器的 LocalStorage中，但需要注意防止跨站脚本攻击（XSS）等安全威胁。
有效期：合理设置 Token 的有效期是关键。过短的有效期可能导致频繁的无感刷新，而过长的有效期则可能增加安全风险。
错误处理：在 Token 无感刷新的过程中，需要妥善处理各种错误情况，如网络错误、服务器错误等，以确保用户体验的流畅性。

前端 SEO

搜索引擎优化（Search Engine Optimization，SEO），是一种通过调整网站的设计、内容编码、结构和链接，以确保它们能够被搜索引擎有效地抓取、解析和排名，提高网站在搜索引擎中的排名和曝光度的技术。

SEO 技巧

标题和描述

使用<title>标签来定义页面的标题。
使用<meta name="description" content="...">标签来提供页面的描述。

关键字

尽量避免过度使用关键字，因为这可能会导致搜索引擎的惩罚。
将关键字自然地融入页面内容中。

URL结构

使用简洁、描述性的URL。
避免使用过多的参数和特殊字符。

内容优化

确保内容高质量、原创，并且与页面标题和描述相关。
使用标题（<h1>至<h6>）来组织内容。

图像优化

使用<img>标签的alt属性来描述图像内容。
压缩图像大小以减少加载时间。

链接优化

使用有意义的锚文本（anchor text）来描述链接。
避免使用过多的无意义链接，如“点击这里”。

站点地图（Sitemap）

创建一个XML站点地图，并提交给主要的搜索引擎。
定期更新站点地图，确保其包含最新的页面链接。

代码优化

确保页面内容与页面标题和描述相关。
使用<meta name="robots" content="...">标签来控制搜索引擎的抓取行为。

浏览器请求

在 Web 开发中，浏览器与服务器之间通过 HTTP（超文本传输协议）或 HTTPS（安全的 HTTP）进行通信。HTTP 协议定义了几种不同的请求方法，用于不同的操作。以下是一些常见的 HTTP 请求方法在 Vue 项目中结合 axios 使用的示例：

GET 请求

import axios from 'axios';

export default {
  name: 'ExampleComponent',
  data() {
    return {
      items: [],
    };
  },
  async mounted() {
    try {
      const response = await axios.get('/api/data');
      this.items = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
};

POST 请求

import axios from 'axios';

export default {
  methods: {
    async submitForm(data) {
      try {
        const response = await axios.post('/api/users', data);
        console.log('User created:', response.data);
      } catch (error) {
        console.error('Error creating user:', error);
      }
    },
  },
};

PUT 请求

import axios from 'axios';

export default {
  methods: {
    async updateItem(id, data) {
      try {
        const response = await axios.put(`/api/items/${id}`, data);
        console.log('Item updated:', response.data);
      } catch (error) {
        console.error('Error updating item:', error);
      }
    },
  },
};

DELETE 请求

<template>
  <button @click="deleteUser(itemId)">Delete</button>
</template>

<script>
import axios from 'axios';

export default {
  props: ['itemId'],
  methods: {
    async deleteUser(itemId) {
      try {
        await axios.delete(`/api/items/${itemId}`);
        console.log('Item deleted successfully');
      } catch (error) {
        console.error('Error deleting item:', error);
      }
    },
  },
};
</script>

常见的HTTP请求头和响应头

Accept：指定客户端能够接收的内容类型
Accept-Charset：指定客户端能够接受的字符编码集
Accept-Encoding：指定客户端能够接受的内容编码
Accept-Language：指定客户端能够接受的自然语言集
Authorization：指定客户端提供给服务器的认证信息
Cache-Control：指定请求和响应遵循的缓存机制
Connection：指定与目标资源之间的连接类型
Content-Length：指定请求消息正文的长度
Content-Type：指定请求消息正文的媒体类型
Cookie：包含请求消息的 Cookie 信息
Date：指定请求消息的发送日期和时间
Host：指定请求消息发送的互联网主机和端口号
Referer：包含一个 URL，用户从该 URL 代表的页面出发访问当前请求的页面
User-Agent：包含一个用户代理字符串，该字符串用来标识发起请求的用户代理软件信息

前端基础知识和必备技能 之 浏览器