4月23日 web学习笔记

一、前端性能优化（进阶）
资源加载优化
预加载关键资源：使用 。
预连接域名：使用 。
示例：
HTML

图片优化 使用现代图片格式：WebP、AVIF。 响应式图片：使用 srcset 和 sizes。 示例： HTML 代码优化 Tree Shaking：移除未使用的代码。 Scope Hoisting：提升代码作用域。 示例（Webpack 配置）： JavaScript module.exports = { optimization: { usedExports: true, // 启用 Tree Shaking concatenateModules: true, // 启用 Scope Hoisting }, }; 渲染优化 避免渲染阻塞：将 CSS 放在头部，JS 放在底部。 使用 loading="lazy"：懒加载图片和 iframe。 示例： HTML 二、前端安全（进阶） 内容安全策略（CSP） 定义：通过 HTTP 响应头限制资源加载。 示例： Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; img-src *; style-src 'self' 'unsafe-inline' 点击劫持防护 定义：防止恶意页面覆盖你的页面。 示例： HTML HTTP 安全头 重要安全头： Strict-Transport-Security：强制 HTTPS。 X-Content-Type-Options：防止 MIME 嗅探。 X-Frame-Options：防止点击劫持。 Permissions-Policy：控制浏览器功能。 示例： Strict-Transport-Security: max-age=31536000; includeSubDomains X-Content-Type-Options: nosniff X-Frame-Options: DENY Permissions-Policy: geolocation=(), microphone=() 防止 XSS 攻击 转义用户输入：在模板引擎中自动转义。 使用库清理用户输入：如 DOMPurify。 示例（DOMPurify）： JavaScript

import DOMPurify from 'dompurify';
const cleanHTML = DOMPurify.sanitize(userInput);
三、现代前端架构与设计模式
单页应用（SPA）与多页应用（MPA）
SPA：单页应用，适合高频交互场景。
MPA：多页应用，适合内容为主场景。
微前端架构
定义：将应用拆分为多个小型前端应用。
工具：Single-SPA、Qiankun（国内）。
示例（Qiankun）：
bash

npm install qiankun
JavaScript

// 主应用
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
{
name: 'app1',
entry: '//localhost:8080',
container: '#container',
activeRule: '/app1',
},
]);

start();
设计模式
观察者模式：事件订阅与发布。
单例模式：确保类只有一个实例。
工厂模式：创建对象的接口。
示例（观察者模式）：
JavaScript

class Observer {
constructor() {
this.subscribers = [];
}

subscribe(fn) {
    this.subscribers.push(fn);
}

unsubscribe(fn) {
    this.subscribers = this.subscribers.filter(sub => sub !== fn);
}

notify(data) {
    this.subscribers.forEach(sub => sub(data));
}

}

const observer = new Observer();
observer.subscribe(data => console.log('收到通知:', data));
observer.notify('新消息');
四、实战练习
性能优化项目
分析一个现有项目的性能瓶颈。
实现资源预加载和图片懒加载。
安全防护项目
为一个 SPA 应用配置 CSP 和其他安全头。
使用 DOMPurify 清理用户输入。
微前端架构实践
使用 Qiankun 创建一个简单的微前端应用。
将多个子应用集成到主应用中。