前端面试：页面打开样式错乱，刷新就好了？

悟空瞎说
2 阅读14分钟

在前端开发中，“页面首次打开样式错乱，刷新一下就恢复正常”是非常常见的问题，也是面试中高频考察的场景题——面试官通过这个问题，不仅能考察你对CSS渲染、浏览器机制的掌握，更能判断你排查问题、解决问题的实战能力。

一、面试题题干（高频原题，贴合真实场景）

请描述：在前端开发中，遇到“页面首次打开时样式错乱（如布局错位、字体大小异常、元素重叠、样式不生效），刷新页面后样式恢复正常”的问题，可能的原因有哪些？请逐一分析原因，并给出对应的解决方案，结合代码示例说明如何根治，避免再次出现。

（题干解析：这道题是前端中高级面试的高频场景题，考察点覆盖CSS渲染机制、DOM加载顺序、资源加载、框架特性等多个知识点，没有固定答案，但能快速区分“只会用”和“懂原理”的开发者。面试官会根据你的回答，逐步追问深层原因和实战细节，重点考察问题排查能力。）

二、核心原因解析（面试标准回答，分点清晰）

结论先行：页面首次打开样式错乱、刷新后恢复，核心原因是「样式加载/执行时机与DOM渲染时机不匹配」，或「浏览器渲染机制异常」，刷新页面后，资源加载、DOM渲染的顺序恢复正常，样式也就随之正常。以下是5个最常见的原因，按出现频率排序，附详细解析和代码示例。

1. 最常见：CSS加载晚于DOM渲染（导致“无样式闪烁”后错乱）

这是最普遍的原因，尤其是在项目中引入外部CSS文件（如CDN加载的样式库、自定义CSS文件）时，浏览器会先解析HTML、渲染DOM，再加载CSS文件，导致首次渲染时没有样式，出现布局错乱；刷新后，CSS文件已被浏览器缓存，会和DOM同步加载渲染，样式恢复正常。

典型场景：页面首次打开时，元素无排版、字体默认、布局错乱，几秒后（CSS加载完成）可能会恢复，但部分场景下不会自动恢复，刷新后才正常。

代码反例（错误写法）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>样式错乱示例</title>
  <script src="https://cdn.example.com/jquery.js"></script>
  <!-- 错误：CSS放在JS后面，JS加载会阻塞CSS加载，导致CSS加载延迟 -->
  <link rel="stylesheet" href="https://cdn.example.com/bootstrap.css">
</head>
<body>
  <div class="container">页面内容</div>
</body>
</html>

原因拆解：浏览器解析HTML时，会按顺序加载资源，JS文件的加载和执行会阻塞后续资源（包括CSS）的加载（JS阻塞特性），导致CSS加载晚于DOM渲染，首次渲染时DOM没有样式，出现错乱；刷新后，JS和CSS都被缓存，加载速度加快，CSS能和DOM同步渲染，样式正常。

2. 次常见：DOM渲染时，样式依赖的资源未就绪（如字体、图片）

当页面样式依赖外部资源（如自定义字体、背景图片、图标）时，这些资源加载延迟，会导致DOM渲染时无法获取正确的样式参数，出现样式错乱；刷新后，资源被缓存，能及时加载，样式恢复正常。

典型场景：字体显示异常（首次显示默认字体，刷新后显示自定义字体）、背景图片错位（首次无背景，刷新后正常）、图标显示异常（首次显示乱码，刷新后显示正常）。

代码示例（问题场景）：

/* 自定义字体，加载延迟导致首次渲染异常 */
@font-face {
  font-family: "MyFont";
  src: url("https://cdn.example.com/myfont.ttf") format("truetype");
}
body {
  font-family: "MyFont", sans-serif; /* 字体未加载时，会显示默认sans-serif，导致字体大小、行高错乱 */
}

/* 背景图片加载延迟，导致布局错位 */
.banner {
  background: url("https://cdn.example.com/banner.jpg") no-repeat;
  height: 300px; /* 图片未加载时，若未设置背景色，会出现空白，刷新后图片加载完成，布局恢复 */
}

3. 框架场景：Vue/React 组件渲染时机问题（高频考点）

在Vue、React等框架开发中，这种问题更常见，核心原因是「组件渲染时机早于数据获取/样式初始化」，导致渲染时使用了默认值或未初始化的样式，刷新后数据和样式初始化完成，恢复正常。

Vue场景示例（问题代码）：

<template>
  <div class="user-card" :style="{ width: cardWidth + 'px' }">
    {{ user.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      cardWidth: 0 // 初始值为0，导致首次渲染时宽度为0，样式错乱
    };
  },
  mounted() {
    // 异步获取数据，数据获取完成后设置cardWidth
    setTimeout(() => {
      this.user = { name: "前端面试干货" };
      this.cardWidth = 300; // 数据获取延迟，首次渲染已完成，导致样式错乱
    }, 100);
  }
};
</script>

原因拆解：Vue组件mounted钩子执行时，DOM已渲染完成，此时异步获取数据、设置样式，会导致首次渲染时使用初始值（cardWidth: 0），出现宽度异常；刷新后，数据可能被缓存，获取速度加快，能在渲染前完成初始化，样式正常。

React场景类似：若在useEffect中异步获取数据，再设置样式相关状态，首次渲染时状态未更新，会出现样式错乱，刷新后缓存生效，状态及时更新。

4. 浏览器缓存/渲染机制异常（易被忽略，多设备/多浏览器差异化问题核心）

这种情况相对少见，但却是「仅部分浏览器/手机出现样式错乱」的核心原因，也是面试中体现差异化问题处理能力的加分点，主要有两种场景，尤其和“是否加载最新资源”直接相关：

（1）CSS缓存异常（多设备差异核心）：不同浏览器、不同手机的缓存策略不同（如Chrome、Safari、国产浏览器的缓存机制存在差异，部分手机浏览器会强制缓存静态资源），导致修改后的CSS文件，在部分设备上仍加载旧版本缓存，首次打开时样式错乱；而刷新后，部分浏览器会强制重新校验资源有效性，加载最新CSS，样式恢复正常。这里的核心痛点的是：需保证每次打开都加载最新资源，但不同设备缓存策略差异导致无法统一生效。

（2）浏览器渲染优化差异：不同浏览器（如Chrome和Safari）、不同手机的渲染引擎（如Blink、WebKit）对“重排/重绘优化”的实现不同，部分设备的渲染优化机制会导致首次渲染时样式渲染不完整（如元素未及时定位、样式未完全应用），刷新后渲染流程重新执行，优化机制未触发，样式恢复正常；同时，若资源未加载最新版本，渲染优化差异会加剧样式错乱问题。

这种情况相对少见，但也是面试中容易加分的点，主要有两种场景：

（1）CSS缓存异常：浏览器缓存了旧版本的CSS文件（如修改了CSS但未更新文件名/版本号），首次打开时加载旧CSS，导致样式错乱；刷新时，浏览器强制重新加载CSS（或缓存已更新），加载最新样式，恢复正常。

（2）浏览器渲染优化导致的错乱：浏览器为了提升渲染性能，会启用“重排/重绘优化”，首次渲染时可能出现渲染不完整（如元素未及时定位），刷新后渲染流程重新执行，优化机制未触发，样式恢复正常。

5. 样式优先级/执行顺序问题（隐藏坑）

当页面中有多个CSS文件、内联样式、动态样式（如JS动态添加style）时，若样式执行顺序异常，会导致首次渲染时样式覆盖错误，出现错乱；刷新后，样式执行顺序恢复正常（如动态样式提前执行），样式恢复。

典型场景：JS动态添加的样式，首次渲染时未执行完成，导致样式未生效；刷新后，JS执行顺序提前，样式正常。

代码示例（问题场景）：

// JS动态添加样式，执行时机晚于DOM渲染
window.onload = function() {
  const box = document.querySelector(".box");
  box.style.width = "300px"; // 首次渲染时，onload执行晚，box宽度未设置，样式错乱
};

// HTML
<div class="box">动态样式示例</div>

三、实战解决方案（根治问题，面试重点）

针对以上5种常见原因，给出对应的根治方案，结合代码示例，体现实战能力，面试时直接套用即可，加分效果明显。

1. 解决“CSS加载晚于DOM渲染”：调整资源加载顺序+优化加载方式

核心思路：让CSS优先加载，避免JS阻塞CSS加载，确保CSS在DOM渲染前加载完成。

解决方案（代码示例）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>样式错乱解决方案</title>
  <!-- 1. CSS放在head头部，优先加载，确保DOM渲染前加载完成 -->
  <link rel="stylesheet" href="https://cdn.example.com/bootstrap.css">
  <!-- 2. JS放在body底部，或用defer/async属性，避免阻塞CSS加载 -->
  <script src="https://cdn.example.com/jquery.js" defer></script>
  <!-- defer：JS延迟执行，不阻塞HTML解析和CSS加载，DOM加载完成后执行 -->
</head>
<body>
  <div class="container">页面内容</div>
  <!-- 备选：JS放在body底部，确保DOM和CSS加载完成后执行 -->
  <script src="https://cdn.example.com/index.js"></script>
</body>
</html>

补充优化：对于CDN加载的CSS，可添加preload属性，强制浏览器优先加载CSS：

<link rel="preload" href="https://cdn.example.com/bootstrap.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- 降级处理：若preload不支持，直接加载CSS -->
<noscript><link rel="stylesheet" href="https://cdn.example.com/bootstrap.css"></noscript>

2. 解决“样式依赖资源未就绪”：预加载资源+设置默认样式

核心思路：提前加载依赖资源，同时设置默认样式，避免资源加载延迟导致的样式错乱。

解决方案（代码示例）：

/* 1. 预加载自定义字体，避免字体加载延迟 */
@font-face {
  font-family: "MyFont";
  src: url("https://cdn.example.com/myfont.ttf") format("truetype");
  font-display: swap; /* 关键：字体未加载时，显示默认字体，加载完成后替换，避免错乱 */
}
body {
  font-family: "MyFont", sans-serif;
  /* 设置默认字体大小、行高，避免加载延迟时排版错乱 */
  font-size: 16px;
  line-height: 1.5;
}

/* 2. 背景图片预加载+默认样式 */
.banner {
  background: #f5f5f5 url("https://cdn.example.com/banner.jpg") no-repeat;
  height: 300px;
  /* 预加载背景图片 */
  background-size: cover;
}

/* 3. 图标资源预加载（如Font Awesome） */
<link rel="preload" href="https://cdn.example.com/font-awesome.css" as="style">

3. 解决“框架组件渲染时机问题”：调整渲染时机+初始化默认值

Vue场景解决方案（代码示例）：

<template>
  <!-- 方案1：v-if控制渲染，数据就绪后再渲染组件 -->
  <div v-if="cardWidth" class="user-card" :style="{ width: cardWidth + 'px' }">
    {{ user.name }}
  </div>
  <!-- 方案2：设置加载中状态，避免空白错乱 -->
  <div v-else class="loading">加载中...</div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      cardWidth: 0
    };
  },
  async mounted() {
    // 方案3：异步数据提前获取，用await确保数据就绪后再渲染
    await this.getUserData();
    this.cardWidth = 300;
  },
  methods: {
    getUserData() {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.user = { name: "前端面试干货" };
          resolve();
        }, 100);
      });
    }
  }
};
</script>

React场景解决方案：使用useEffect依赖项，确保数据获取完成后再更新状态，或用条件渲染控制组件显示。

4. 解决“浏览器缓存/渲染异常”：跨设备统一缓存策略+强制加载最新资源（针对性解决多设备差异）

结合你提出的“仅部分浏览器/手机出现问题、需保证每次打开加载最新资源”的核心需求，重点解决「不同设备缓存策略差异」导致的旧资源加载问题，同时处理渲染优化差异，具体方案如下：

（1）解决CSS缓存异常（核心：强制所有设备每次打开加载最新资源，规避跨设备缓存差异）：仅靠版本号/哈希值可能无法覆盖所有设备（部分手机浏览器会忽略版本号，强制缓存），需结合多种方式，确保跨设备统一加载最新资源：

<!-- 方案1：哈希值+版本号双重保障（最稳妥，适配所有设备） -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.[hash].css?v=1.0.1">
<!-- 哈希值：打包工具（webpack/vite）自动生成，文件内容修改则哈希值变化，强制浏览器加载新文件 -->
<!-- 版本号：兜底适配部分忽略哈希值的手机浏览器，双重保险 -->

<!-- 方案2：添加缓存控制请求头（后端配合，强制禁用静态资源缓存，确保每次加载最新） -->
<!-- 前端link标签添加crossorigin，配合后端设置响应头：Cache-Control: no-cache, no-store, must-revalidate -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.css" crossorigin>
<!-- no-cache：每次使用前需校验资源有效性；no-store：不缓存任何资源；must-revalidate：缓存过期后必须重新请求 -->

<!-- 方案3：动态拼接时间戳（应急方案，适配极端缓存场景） -->
<script>
  // 每次打开页面，动态添加CSS链接，拼接当前时间戳，确保URL唯一，避免缓存
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://cdn.example.com/bootstrap.css?t=${new Date().getTime()}`;
  document.head.appendChild(link);
</script>

补充说明：时间戳方案虽能强制加载最新资源，但会完全禁用缓存，增加服务器压力，建议仅在紧急修复、多设备缓存异常无法解决时使用；生产环境优先用“哈希值+版本号+缓存请求头”组合，既保证加载最新资源，又能在资源未修改时利用缓存，提升加载速度。

（2）解决跨设备渲染优化差异：不同浏览器/手机的渲染引擎差异，需通过“统一渲染标准+强制重绘”规避，确保样式在所有设备上渲染一致：

// 强制重绘，解决不同渲染引擎导致的渲染不完整问题（适配所有设备）
const forceRedraw = (element) => {
  // 兼容不同浏览器，触发重排重绘
  element.style.display = 'none';
  void element.offsetHeight; // 触发重排，void确保兼容性
  element.style.display = '';
};

// 页面加载完成后，对易错乱元素执行强制重绘，适配不同设备
document.addEventListener('DOMContentLoaded', () => {
  const disorderElements = document.querySelectorAll('.container, .banner, .user-card');
  disorderElements.forEach(el => forceRedraw(el));
});

// 补充：添加CSS重置，统一不同浏览器默认样式，减少渲染差异
/* CSS重置代码（放在所有CSS最前面） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 适配不同设备默认字体 */
}

（1）解决CSS缓存异常：给CSS文件添加版本号或哈希值，确保修改后浏览器加载最新版本：

<!-- 给CSS添加版本号，修改后更新版本号 -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.css?v=1.0.1">
<!-- 或用哈希值，打包工具（如webpack）可自动生成 -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.[hash].css">

（2）解决渲染优化异常：在样式错乱的元素上，添加强制重绘的逻辑（仅在必要时使用）：

// 强制重绘，解决渲染不完整问题
const forceRedraw = (element) => {
  element.style.display = 'none';
  element.offsetHeight; // 触发重排
  element.style.display = '';
};

// 在DOM加载完成后执行
window.addEventListener('load', () => {
  const box = document.querySelector('.box');
  forceRedraw(box);
});

5. 解决“样式优先级/执行顺序问题”：规范样式顺序+提前执行动态样式

（1）规范样式顺序：内联样式 > 内部样式 > 外部样式，避免样式覆盖异常；同一层级的样式，按“后定义覆盖前定义”的原则，合理排序。

（2）提前执行动态样式：将动态样式代码放在DOM元素之前，或用DOMContentLoaded事件，确保样式在DOM渲染前执行：

// 用DOMContentLoaded，DOM加载完成后立即执行样式设置，避免延迟
document.addEventListener('DOMContentLoaded', () => {
  const box = document.querySelector(".box");
  box.style.width = "300px";
});

四、面试官高频追问（拉开差距，直接应对）

这部分是面试的核心加分项，面试官会从“原因延伸→实战细节→底层原理”逐步追问，以下是6个最高频的追问，附标准回答，帮你轻松应对。

追问1：除了上述原因，还有哪些场景会导致“打开错乱、刷新正常”？

标准回答：还有3种易被忽略的场景，体现实战经验：

  1. 路由懒加载导致的样式错乱：Vue/React路由懒加载时，组件和对应的CSS加载延迟，首次进入路由时样式错乱，刷新后缓存生效，加载正常；解决方案：将路由对应的CSS提前加载，或用懒加载的loading状态过渡。

  2. 浏览器缩放比例异常：用户浏览器缩放比例不是100%，首次打开时页面渲染异常，刷新后浏览器重新适配缩放比例，样式恢复；解决方案：在CSS中添加zoom: 1; 或用rem/em单位，适配不同缩放比例。

  3. 第三方插件/广告加载干扰：页面中引入的第三方插件（如统计插件、广告插件）加载延迟，干扰页面样式渲染，首次打开错乱，刷新后插件加载完成，样式恢复；解决方案：延迟加载第三方插件，或给插件容器设置固定样式，避免干扰。

追问2：如何排查“页面打开样式错乱”的问题？给出具体的排查步骤（实战重点）

标准回答：排查核心是“定位样式错乱的时机和原因”，具体步骤分4步，可直接套用：

  1. 复现场景：确认错乱只在首次打开出现，刷新后正常，排除代码逻辑错误（若刷新也错乱，可能是样式本身错误）；

  2. 查看资源加载：打开浏览器F12→Network面板，查看CSS、字体、图片等资源的加载状态，确认是否有加载延迟、加载失败（红色状态），对比首次打开和刷新后的加载时序；

  3. 查看DOM和样式：在Elements面板，查看错乱元素的样式（Computed标签），确认是否有样式未生效、样式被覆盖，对比首次打开和刷新后的样式差异；

  4. 排除法验证：依次注释CSS加载代码、动态样式代码、第三方插件，逐步排查哪个环节导致的错乱，定位具体原因后针对性解决。

追问3：CSS加载和DOM渲染的底层机制是什么？为什么CSS加载晚于DOM渲染会导致样式错乱？

标准回答：这是考察底层原理的追问，核心回答如下：

浏览器渲染流程：解析HTML→生成DOM树→解析CSS→生成CSSOM树→DOM树和CSSOM树合并生成渲染树→布局（重排）→绘制（重绘）→显示页面。

关键逻辑：DOM树和CSSOM树必须合并成渲染树后，才能进行布局和绘制；如果CSS加载晚于DOM渲染（即DOM树已生成，CSSOM树未生成），浏览器会先渲染“无样式的DOM”（仅解析HTML，不应用CSS），导致样式错乱；当CSS加载完成后，生成CSSOM树，重新合并渲染树，进行重排和重绘，部分场景下会自动恢复，但部分场景下（如布局错位）不会，需要刷新页面，重新执行完整的渲染流程。

追问4：Vue中，为什么用v-if能解决组件渲染时机导致的样式错乱？和v-show有什么区别？

标准回答：核心区别在于“是否渲染DOM”：

  1. v-if的原理：v-if是“条件渲染”，当条件为false时，组件不会被渲染到DOM中；当条件为true时，才会渲染DOM，确保数据和样式就绪后，再生成DOM元素，避免首次渲染时使用未初始化的值，从而解决样式错乱。

  2. v-show的原理：v-show是“显示/隐藏控制”，无论条件是否为true，组件都会被渲染到DOM中，只是通过display: none控制显示/隐藏；如果数据未就绪，组件已渲染，仍会出现样式错乱，因此v-show无法解决这类问题。

补充加分：实际开发中，若组件需要频繁显示/隐藏，用v-show（性能更好）；若组件只需要在数据就绪后显示一次，用v-if（解决样式错乱）。

追问5：如何避免CSS缓存导致的样式错乱？除了加版本号，还有其他方法吗？（结合多设备/多浏览器场景，重点解决“每次打开加载最新资源”）

标准回答：结合你提到的“仅部分浏览器/手机出现问题”，核心是「跨设备缓存策略差异」导致旧资源加载，除了添加版本号/哈希值，需采用“多重保障方案”，确保所有设备每次打开都加载最新资源，具体有3种常用方法，按优先级排序：

  1. 哈希值+版本号双重兜底：这是生产环境最推荐的方案，适配所有浏览器和手机设备。通过webpack、vite等打包工具，给CSS文件生成唯一哈希值（文件内容修改，哈希值自动变化），同时拼接版本号，即使部分手机浏览器忽略哈希值，版本号也能触发资源重新加载，确保每次打开加载最新资源。示例：。

  2. 后端配合设置缓存控制请求头：前端link标签添加crossorigin属性，后端给CSS资源设置响应头 Cache-Control: no-cache, no-store, must-revalidate，强制所有浏览器每次请求都校验资源有效性，不缓存旧资源，从根源上保证每次打开加载最新版本，彻底解决跨设备缓存差异问题。

  3. 动态拼接时间戳（应急方案）：若无法修改后端请求头，可通过JS动态生成CSS链接，拼接当前时间戳（如?t=${new Date().getTime()}），使每次请求的URL唯一，浏览器会认为是新资源，强制重新加载。但该方案会完全禁用缓存，增加服务器压力，仅建议在紧急修复、多设备缓存异常无法解决时使用。

补充加分：实际开发中，还需结合CSS重置（统一不同浏览器默认样式）、CDN节点刷新（确保不同地区、不同设备能获取到最新资源），进一步规避多设备差异导致的样式错乱，同时兼顾加载性能和资源新鲜度。

标准回答：除了添加版本号/哈希值，还有3种常用方法：

  1. 禁用CSS缓存（仅开发环境使用）：在CSS请求头中添加Cache-Control: no-cache，强制浏览器每次都重新加载CSS，避免开发时缓存干扰；

  2. 使用CDN的缓存策略：配置CDN的缓存规则，设置CSS文件的缓存时间，同时在修改CSS后，更新CDN的缓存（如刷新CDN节点）；

  3. 拆分CSS文件：将频繁修改的CSS和稳定的CSS拆分，频繁修改的CSS不设置缓存，稳定的CSS设置长期缓存，减少缓存异常的影响。

追问6：页面打开样式错乱，刷新后恢复，和“页面刷新后样式错乱”有什么区别？各自的排查重点是什么？

标准回答：两者的核心区别的是「问题出现的时机和原因」，排查重点不同：

  1. 打开错乱、刷新正常：核心原因是「资源加载/渲染时机不匹配」，排查重点是资源加载时序（CSS、字体、JS）、组件渲染时机、浏览器缓存；

  2. 刷新后错乱、打开正常：核心原因是「代码逻辑错误或刷新后状态丢失」，排查重点是样式优先级、动态样式执行逻辑、刷新后数据初始化（如localStorage/sessionStorage数据丢失）、浏览器缓存（加载了旧代码）。

五、实战避坑总结（面试收尾模板）

总结一下：页面首次打开样式错乱、刷新后恢复，核心是「样式加载/执行时机与DOM渲染时机不匹配」，最常见的原因是CSS加载延迟、样式依赖资源未就绪、框架组件渲染时机异常。

根治方案的核心思路是：确保CSS优先加载、预加载依赖资源、控制组件渲染时机、规范样式顺序；重点针对「多设备/多浏览器差异」，通过“哈希值+版本号+缓存请求头”的多重保障，强制所有设备每次打开都加载最新资源，同时配合CSS重置、强制重绘，解决不同渲染引擎导致的差异；排查问题时，需在不同浏览器、不同手机上复现场景，通过浏览器开发者工具（如Chrome设备模拟器、Safari开发者工具）定位缓存差异和渲染差异，用排除法找到具体原因。

面试时，回答这类问题要遵循“结论→原因→解决方案→追问延伸”的逻辑，既要讲清基础原因，也要体现实战排查能力和底层原理认知，才能拿到高分。

实际开发中，只要规范资源加载顺序、做好样式初始化和依赖资源预加载，就能有效避免这类问题，提升页面的稳定性和用户体验。

最后，觉得有用的话，欢迎点赞、收藏，关注我，持续分享前端面试干货和实战技巧！

avatar
文章
阅读
粉丝