阅读视图

发现新文章，点击刷新页面。

如果要做优化，CSS提高性能的方法有哪些？

掘金前端

Giant100

2025年11月5日 11:28

写给小白的 CSS 性能优化指南：让你的页面飞起来

如果你刚开始学前端，可能会觉得 CSS 就是 “写样式”—— 把文字弄大、给按钮上色、排个版就行。但其实，CSS 不仅影响页面好不好看，还直接决定了页面 “跑” 得快不快。

想象一下：用户点进你的网页，半天加载不出来，或者滑动的时候卡顿掉帧，大概率会直接关掉。而很多时候，这些问题可能就藏在你写的 CSS 里。

今天就用大白话讲讲，怎么优化 CSS 让页面更流畅，哪怕是刚入门也能看懂～

为什么要优化 CSS？

简单说：CSS 会 “卡” 住页面渲染。

浏览器加载网页时，要先下载 HTML、CSS，再根据它们计算出页面长什么样（这个过程叫 “渲染”）。如果 CSS 写得不好，比如文件太大、规则太复杂，浏览器就会花更多时间处理，用户看到的就是 “加载中” 或者卡顿的页面。

优化 CSS，本质上就是帮浏览器 “减负”，让它更快地把页面呈现给用户。

6 个新手也能学会的 CSS 优化技巧

1. 关键 CSS 直接写在 HTML 里（内联）

你可能习惯把 CSS 写到单独的 .css 文件里，再用 <link> 引入 —— 这没错，但有个小问题：浏览器得先下载完这个 CSS 文件，才能开始渲染页面。

如果是首屏必须的样式（比如导航栏、头部 Banner），可以直接写到 HTML 的 <style> 标签里（这叫 “内联”）。这样浏览器下载完 HTML 就能立刻渲染，不用等外部 CSS 文件，首屏加载速度会快很多。

举个例子：

<!DOCTYPE html>
<html>
<head>
  <!-- 内联首屏关键 CSS -->
  <style>
    .header { height: 60px; background: #fff; }
    .banner { width: 100%; height: 200px; }
  </style>
  <!-- 非关键 CSS 还是外部引入 -->
  <link rel="stylesheet" href="other-styles.css">
</head>
<body>...</body>
</html>

⚠️ 注意：别把所有 CSS 都内联！太大的 CSS 会让 HTML 文件变胖，反而变慢。只内联首屏必须的那部分就好～

2. 给 CSS “瘦个身”（压缩）

写 CSS 时，我们会换行、加注释，方便自己看，但这些 “多余内容” 会让文件变大，下载变慢。

比如你写：

/* 这是导航栏样式 */
.nav {
  width: 100%;
  height: 60px;
  background: #333;
}

压缩后会变成这样（去掉空格、换行、注释）：

.nav{width:100%;height:60px;background:#333}

文件变小了，浏览器下载就更快。新手不用自己手动删，用 Webpack、Vite 这些工具打包时，会自动帮你压缩 CSS，记得开这个功能就行～

3. 别写 “绕弯子” 的选择器

浏览器读 CSS 选择器的方式很特别：从右往左看。

比如你写 #box .list li，浏览器会先找所有 <li>，再筛选出在 .list 里的，最后挑出在 #box 里的。如果选择器嵌套太多层（比如 div .container .list .item span），浏览器就得做很多 “筛选工作”，会变慢。

给新手的小建议：

别嵌套超过 3 层，比如 a:hover 就够了，别写成 div .nav ul li a:hover；
能用 ID 选择器（#box）就别嵌套，比如 #box { ... } 比 .container #box { ... } 快；
少用通配符 *（比如 * { margin: 0; }）和属性选择器（比如 input[type="text"]），它们会遍历所有元素，很费时间。

4. 少用 “费性能” 的属性

有些 CSS 属性看起来很酷，但浏览器渲染它们的时候要 “加班”。比如：

box-shadow（阴影）、border-radius（圆角）：需要计算额外的图形；
filter（滤镜，比如模糊、变色）：会让浏览器反复处理像素；
opacity（透明度）：改变时可能触发页面重新渲染。

这些属性用多了，页面滚动或动画时容易卡顿。新手可以尽量少用，或者用更简单的方式替代（比如用图片代替复杂阴影）。

5. 别用 @import 引入 CSS

引入 CSS 有两种方式：

<!-- 方式1：link 标签 -->
<link rel="stylesheet" href="style.css">

<!-- 方式2：@import（不推荐！） -->
<style>
  @import url("style.css");
</style>

为什么不推荐 @import？因为浏览器处理它时，得先下载完当前 CSS 文件，才能知道还要下载 style.css，相当于 “排队下载”；而 link 标签可以让多个 CSS 文件 “同时下载”，速度更快。

记住：引入 CSS 优先用 <link>，别用 @import～

6. 非关键 CSS 让它 “悄悄加载”（异步）

前面说过，CSS 会 “阻塞” 页面渲染 —— 浏览器没下载完 CSS 时，页面可能是空白的。但有些 CSS 不是首屏必须的（比如打印样式、隐藏模块的样式），可以让它们 “异步加载”，不耽误页面渲染。

怎么做？简单来说，就是告诉浏览器：“这个 CSS 不急，你慢慢下，先渲染页面”。比如：

<!-- 异步加载非关键 CSS -->
<link rel="stylesheet" href="print.css" media="print" onload="this.media='all'">

这里的 media="print" 告诉浏览器 “这是打印时用的，现在不用管”，等加载完后再通过 onload 改成正常样式，既不阻塞渲染，又能加载完整样式。

总结一下

CSS 优化没那么复杂，核心就是：让浏览器少干活、快干活。

新手刚开始不用追求完美，先记住这几点：关键 CSS 内联、压缩文件、选择器别太复杂、少用费性能的属性。慢慢在实际写代码时注意这些细节，你的页面就会越来越流畅～

最后想说：好的前端不只是 “实现效果”，更要让用户用得舒服。优化 CSS，就是让用户离你的网站更近一步呀～

小白也能懂！跨域问题到底是啥，咋解决？

掘金前端

Giant100

2025年11月3日 09:37

小白也能懂！跨域问题到底是啥，咋解决？

大家好呀！最近有朋友问我：“我做了个小网页，想拿别人网站的数据（比如天气 API），结果浏览器报错说‘跨域了’，这啥意思啊？” 今天就用大白话给大家讲明白 —— 跨域问题到底是啥，以及怎么解决它。

一、先搞懂：啥是 “跨域”？

要理解 “跨域”，得先知道一个词：同源。

“同源” 就是说两个网址的「协议」「域名」「端口号」这三样必须完全一样！少一个一样都不行。

举个栗子，假设你的网页地址是 a.com:8080（协议是 http，域名是a.com，端口 8080），那下面这些情况就是「跨域」：

你的网址	要访问的网址	为啥跨域？
a.com :8080	a.com :8080	协议不一样（http≠https）
a.com :8080	b.com :8080	域名不一样（a.com≠b.com）
a.co m:808 0	a.co m:300 0	端口不一样（8080≠3000）

简单说：只要两个网址不是 “同源”，你从 A 网址去拿 B 网址的数据，浏览器就会拦着你，这就是跨域问题。

二、为啥浏览器要 “拦着”？—— 同源策略

你可能会问：“浏览器为啥这么严？我就是想拿点数据而已啊！”

这其实是浏览器的一个安全规则，叫「同源策略」，目的是保护你的信息安全。

再举个栗子：你登录了淘宝（taobao.com），浏览器会存一个 “登录凭证”（cookie）。如果没有同源策略，随便一个小网站（bad.com）都能偷偷拿你淘宝的登录凭证，那你的账号不就危险了？

所以「同源策略」就像你家的门锁 —— 只让 “自己人”（同源网址）进，不让 “外人”（跨域网址）随便碰你家东西（数据）。

三、3 个小白也能懂的解决办法

知道了啥是跨域、为啥有跨域，接下来就是重点：怎么解决？

下面给大家讲 3 个最常用、最简单的办法，不同场景选不同的就行～

办法 1：让后端 “开门”—— CORS（最推荐）

这是现在最常用的办法，核心是：让你要访问的后端（比如天气 API 的服务器）主动说 “允许你这个网址来拿数据” 。

怎么实现？其实不用前端操心，让后端在返回数据时，多带一个 “特殊头信息” 就行。

举个后端的简单例子（用 Node.js 写的，其他语言逻辑一样）：

// 后端代码（ Node.js + Express ）
const express = require('express');
const app = express();
// 关键：加这行代码，
app.use(cors({
  // 允许所有域名跨域访问
  origin:"*",
  // 允许所有 HTTP 方法跨域访问,这里默认是加了预检请求
  methods:["GET","POST","PUT","DELETE"],
  // 允许所有请求头跨域访问
  allowedHeaders:["Content-Type","Authorization"],
}))
// 后端接口：返回天气数据
app.get('/weather', (req, res) => {
  res.send({ city: '北京', temp: '25℃' }); // 给前端的数据
});
app.listen(3000);

前端不用改任何代码，直接正常发请求就行：

// 前端代码（普通JS）
fetch('http://b.com:3000/weather') // 访问后端接口
  .then(res => res.json())
  .then(data => console.log(data)); // 成功拿到天气数据！

适用场景：你能联系到后端开发者（比如公司内部项目），让他们加这行配置。

办法 2：借 “script 标签” 的光 —— JSONP（老项目常用）

有些老项目后端没法改，那可以用 JSONP。它的原理很有意思：浏览器的 script 标签不受同源策略限制（比如你能在自己网页里引百度的 JS 文件）。

实现步骤也很简单：

前端先定义一个 “回调函数”（用来接收数据）；

用 script 标签去请求后端接口，并且把 “回调函数名” 传给后端；

后端返回一段 JS 代码，内容是 “调用这个回调函数，把数据当参数传进去”。

举个例子：

// 1. 前端定义回调函数（拿到数据后要做的事）
function handleWeather(data) {
  console.log('拿到天气了：', data); // 比如打印数据
}
// 2. 用script标签请求后端接口，传回调函数名
const script = document.createElement('script');
// 后端接口地址 + ?callback=回调函数名
script.src = 'http://b.com:3000/weather?callback=handleWeather';
document.body.appendChild(script); // 插入页面，发起请求
// 3. 后端返回的内容会是：handleWeather({city:'北京', temp:'25℃'})
// 浏览器执行这段JS，就会调用我们定义的handleWeather，拿到数据！

后端代码（Node.js）：

app.get('/weather', (req, res) => {
  const callbackName = req.query.callback; // 拿到前端传的回调函数名
  const weatherData = { city: '北京', temp: '25℃' }; // 要返回的数据
  // 关键：返回“回调函数调用”的JS代码
  res.send(`${callbackName}(${JSON.stringify(weatherData)})`);
});

注意：JSONP 只能发 GET 请求，不能发 POST 请求，所以适合拿数据，不适合提交数据。

办法 3：前端自己 “搭个桥”—— 代理服务器（本地开发用）

如果你是本地开发（比如用 Vue/React 写项目），后端还没配置 CORS，那可以用 “代理服务器”。

原理很简单：浏览器有同源策略，但服务器之间没有！ 所以我们让前端先把请求发给 “自己的代理服务器”，再让代理服务器去请求后端，最后代理服务器把数据返回给前端。

以 Vue 项目为例，只需要改一下配置文件（vue.config.js）：

// vue.config.js 配置
module.exports = {
  devServer: {
    proxy: {
      // 只要前端请求以 /api 开头，就走代理
      '/api': {
        target: 'http://b.com:3000', // 后端接口的真实地址
        changeOrigin: true, // 告诉后端“我是从你允许的网址来的”（伪装）
        pathRewrite: {
          '^/api': '' // 把请求里的 /api 去掉（比如 /api/weather → /weather）
        }
      }
    }
  }
};

然后前端请求时，直接写 /api/weather 就行：

// 前端代码（Vue里）
this.$axios.get('/api/weather') // 看似请求自己的代理，实际会转发到后端
  .then(res => console.log(res.data));

适用场景：本地开发时临时用，不用麻烦后端改配置。

四、总结一下

跨域就是：浏览器不让不同 “源” 的网址互相拿数据，为了安全；

解决办法选哪个？

- 能联系后端 → 用 CORS（最推荐）；

- 后端没法改，只需要 GET 数据 → 用 JSONP；

- 本地开发临时用 → 用代理服务器。

其实跨域问题没那么难，关键是理解 “同源策略” 的初衷，然后根据场景选对方法～大家可以动手试试上面的例子，很快就能掌握啦！