面试题：CSS外部样式表的加载性能优化及跨域问题处理

优化多外部CSS样式表加载性能避免页面渲染阻塞

媒体查询与异步加载
- 使用media属性，对于非首屏关键样式的CSS，设置特定媒体查询条件（如media="print"用于打印样式），这样浏览器在渲染页面时不会阻塞等待这些样式加载。例如：<link rel="stylesheet" href="print.css" media="print">。
- 对于非关键CSS样式，可以使用JavaScript动态加载。例如：

const link = document.createElement('link');
link.rel ='stylesheet';
link.href = 'non - critical.css';
document.head.appendChild(link);

合并与压缩
- 合并多个CSS文件为一个，减少HTTP请求数。工具如Webpack的mini - css - extract - plugin可以实现CSS文件的合并与提取。
- 压缩CSS文件，去除冗余空格、注释等，减小文件体积。工具如cssnano可用于CSS压缩。
优先加载关键样式
- 提取首屏关键样式，通过<style>标签内联到HTML页面的<head>中，确保这些样式能立即应用，减少首次渲染的白屏时间。

解决外部样式表跨域问题并保证正常加载与应用

CORS（跨域资源共享）
- 在服务器端配置CORS头信息。例如在Node.js中使用express - cors中间件：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

- 优点：兼容性较好，现代浏览器基本都支持。缺点：需要服务器端配合配置。

2. JSONP（仅适用于支持JSONP的场景，通常不适用于CSS，但某些特定情况可间接利用） - 虽然CSS本身不支持JSONP，但可以通过在服务器端将CSS内容包装成符合JSONP格式的响应，客户端通过<script>标签加载。不过这种方式复杂且不常用，因为CSS与JSONP的交互较繁琐。 3. 代理 - 服务器端代理：在自己的服务器端设置代理，转发对跨域CSS的请求。例如在Node.js中使用http - proxy - middleware：

const express = require('express');
const proxy = require('http - proxy - middleware');
const app = express();
app.use('/proxy - css', proxy({
    target: 'http://cross - origin - server.com',
    changeOrigin: true
}));

- **客户端代理（如Browserify - http - proxy）**：在客户端通过特定工具实现代理，但这种方式相对复杂且兼容性可能有问题。

4. 安全性考虑 - 内容安全策略（CSP）：在设置跨域加载CSS时，要注意CSP的配置。通过设置Content - Security - Policy头，例如Content - Security - Policy: default - src'self'; style - src'self' http://allowed - domain.com，确保只从允许的源加载样式表，防止恶意样式注入。 - HTTPS：使用HTTPS协议加载样式表，避免中间人攻击篡改样式内容。 5. 兼容性考虑 - 对于较老的浏览器，CORS的兼容性需要注意。可以提供备用方案，如在检测到不支持CORS时，使用服务器端代理方式加载样式表。同时，确保代理设置和CSP配置在不同浏览器环境下都能正确工作。

面试题：CSS外部样式表的加载性能优化及跨域问题处理

知识考点

面试题答案

优化多外部CSS样式表加载性能避免页面渲染阻塞

解决外部样式表跨域问题并保证正常加载与应用