前端绝对路径和相对路径

在前端开发中，链接网络资源是一个十分常见的操作。在编写代码时，使用路径来访问样式文件、图像以及其他资源是必不可少的。路径可以分类为绝对路径和相对路径。本文将从多个角度分析前端绝对路径和相对路径的区别，以及在使用中需要注意的问题。

一、什么是绝对路径和相对路径？

绝对路径是一种完整的 URL 地址，通常指向互联网上的资源。绝对路径始终指向同一资源，不管在哪里使用。例如：https://www.baidu.com。

相对路径是一种路径，由当前文档路径和相对 URL 组成。相对路径相对于当前文档地址，因此在不同的上下文中，相对路径可能会指向不同的资源。例如：../images/pic.png。

二、绝对路径和相对路径的差异

1.链接资源的起点不同

绝对路径是参考网站根目录来确定网站内容存放的位置。相对路径是参考当前页面所在的位置，而不是整个网站的位置来确定相对路径指向的文件。

2.书写方式不同

绝对路径需要写出完整的 URL 地址，包括 HTTP 协议、域名、端口号和资源路径。相对路径只需要从当前文档开始书写，不需要指明域名和协议。

3.可移植性不同

当网站的域名或服务器更改时，绝对路径会失效，因为 URL 是固定的。因而绝对路径无法使用在开发部署或分享文件时。相对路径更具有可移植性，可以在多个环境中使用，只要文件间的关系不变。

三、如何使用绝对路径和相对路径

1.使用绝对路径

在使用绝对路径时，需要注意的是，每个互联网资源都需要拥有一个单独的 URL 地址，这样当资源变更时，可以确保引用该资源的整个站点中不存在死链接。建议使用 CDN 服务器来加载大型的公共库文档，例如 jQuery、Bootstrap 等。

2.使用相对路径

在使用相对路径时，需要注意相对路径的引用与文件组织结构有关。文件的目录结构层级越深，则引用的路径越长。如果在子目录中引用父级目录的文件时需要使用 "../" 表示当前文件夹的上一层文件夹。了解目录结构和文件的层次关系非常重要。

四、常见的错误

绝对路径和相对路径的常见错误主要包括以下几点：

1.资源路径错误：当样式和脚本文件中链接的资源路径错误时，会导致页面无法正常显示样式和创建 DOM 对象。

2.重复引用：当重复引用资源时，会消耗不必要的带宽和时间，并且可能会导致发生冲突或其他意想不到的问题。

3.目录结构错误：当使用相对路径时，如果未正确编写目录结构，会导致页面内的图片和样式加载不出来。这样不仅仅会影响页面的外观，还会影响 SEO 排名。