1. 使用picture元素实现响应式图片优化

在现代Web开发中，图片优化是提升页面性能的关键。<picture>元素允许我们根据不同的设备条件提供最合适的图片资源。

<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图片示例">
</picture>

这个技巧特别适用于电商网站或图片密集型页面，可以显著减少移动设备的带宽消耗，同时为桌面用户提供高质量的视觉体验。

2. 利用Web Components创建可复用UI组件

Web Components是一组浏览器原生支持的API，允许开发者创建可复用的自定义元素。

class CustomButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                button {
                    padding: 10px 20px;
                    background: #4285f4;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                }
            </style>
            <button><slot></slot></button>
        `;
    }
}

customElements.define('custom-button', CustomButton);

使用方式：<custom-button>点击我</custom-button>

这种方法特别适合大型项目，可以保持UI一致性并减少重复代码。

3. 使用Intersection Observer实现懒加载

Intersection Observer API可以高效地监测元素是否进入视口，是实现图片懒加载的理想选择。

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});

lazyImages.forEach(img => observer.observe(img));

HTML中使用：<img data-src="image-to-lazy-load.jpg" alt="示例图片">

这种方法比传统的滚动事件监听更高效，能显著提升长页面的加载性能。

4. 利用CSS变量实现主题切换

CSS变量（自定义属性）为Web开发带来了前所未有的灵活性，特别是在实现主题切换功能时。

:root {
    --primary-color: #4285f4;
    --background: #ffffff;
    --text-color: #333333;
}

[data-theme="dark"] {
    --primary-color: #8ab4f8;
    --background: #121212;
    --text-color: #f1f1f1;
}

body {
    background-color: var(--background);
    color: var(--text-color);
}

button {
    background-color: var(--primary-color);
}

JavaScript切换主题：document.documentElement.setAttribute('data-theme', 'dark');

这种方法比传统的类名切换更简洁，维护成本更低。

5. 使用Service Worker提升离线体验

Service Worker可以拦截网络请求，缓存资源，为Web应用提供离线功能。

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
    '/',
    '/styles/main.css',
    '/script/main.js'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
});

注册Service Worker：navigator.serviceWorker.register('/sw.js');

这项技术是Progressive Web Apps(PWA)的核心，能显著提升用户在弱网环境下的体验。