前端性能优化技术合集与汇总（含示例）#

1
<!-- async: 下载完成后立即执行，可能中断HTML解析，执行顺序不定 -->
2
<script async src="analytics.js"></script>
3

4
<!-- defer: HTML解析完成后，DOMContentLoaded事件前按顺序执行 -->
5
<script defer src="main-bundle.js"></script>

1
<!-- 使用 loading="lazy" 属性（浏览器原生支持） -->
2
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="Lazy loaded image">
3
<iframe src="placeholder.html" data-src="real-content.html" loading="lazy"></iframe>
4

5
<!-- 使用 Intersection Observer API 实现自定义懒加载 -->
6
<script>
7
  const images = document.querySelectorAll('img[data-src]');
8
  const observer = new IntersectionObserver((entries, observer) => {
9
    entries.forEach(entry => {
10
      if (entry.isIntersecting) {
11
        const img = entry.target;
12
        img.src = img.dataset.src;
13
        img.removeAttribute('data-src');
14
        observer.unobserve(img);
15
      }
16
    });
17
  });
18
  images.forEach(img => observer.observe(img));
19
</script>

1
<!-- 预加载关键CSS文件 -->
2
<link rel="preload" href="critical.css" as="style">
3

4
<!-- 预加载将在稍后使用的JS文件 -->
5
<link rel="preload" href="late-loaded-script.js" as="script">
6

7
<!-- 预加载字体文件 -->
8
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

1
requestIdleCallback((deadline) => {
2
  // 如果有剩余时间，或者任务必须执行
3
  if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
4
    // 执行低优先级任务，例如发送统计数据
5
    sendAnalyticsData();
6
  }
7
});

1
// 使用动态 import() 按需加载模块
2
document.getElementById('loadButton').addEventListener('click', () => {
3
  import('./heavy-module.js')
4
    .then(module => {
5
      module.doSomething();
6
    })
7
    .catch(err => {
8
      console.error('Failed to load module:', err);
9
    });
10
});
11

12
// 路由懒加载 (以 React Router 为例)
13
import React, { Suspense, lazy } from 'react';
14
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
15

16
const HomePage = lazy(() => import('./routes/HomePage'));
17
const AboutPage = lazy(() => import('./routes/AboutPage'));
18

19
const App = () => (
20
  <Router>
21
    <Suspense fallback={<div>Loading...</div>}>
22
      <Switch>
23
        <Route exact path="/" component={HomePage} />
24
        <Route path="/about" component={AboutPage} />
25
      </Switch>
26
    </Suspense>
27
  </Router>
28
);

1
// 不好的做法：每次循环都读取 offsetHeight，可能触发重排
2
for (let i = 0; i < elements.length; i++) {
3
  elements[i].style.width = elements[i].offsetHeight + 'px'; // 读取触发重排
4
}
5

6
// 改进：先读后写，分离读写操作
7
const heights = [];
8
for (let i = 0; i < elements.length; i++) {
9
  heights[i] = elements[i].offsetHeight; // 批量读取
10
}
11
for (let i = 0; i < elements.length; i++) {
12
  elements[i].style.width = heights[i] + 'px'; // 批量写入
13
}
14

15
// 使用 CSS transform 代替 top/left 实现位移动画，避免重排
16
// 不推荐
17
// element.style.left = x + 'px';
18
// element.style.top = y + 'px';
19

20
// 推荐
21
element.style.transform = `translate(${x}px, ${y}px)`;

1
const list = document.getElementById('myList');
2
const items = ['Apple', 'Banana', 'Cherry'];
3

4
// 不好的做法：每次循环都操作 DOM
5
// items.forEach(itemText => {
6
//   const li = document.createElement('li');
7
//   li.textContent = itemText;
8
//   list.appendChild(li); // 每次 appendChild 都可能触发重排/重绘
9
// });
10

11
// 推荐：使用 DocumentFragment
12
const fragment = document.createDocumentFragment();
13
items.forEach(itemText => {
14
  const li = document.createElement('li');
15
  li.textContent = itemText;
16
  fragment.appendChild(li); // 操作 Fragment 不会触发重排/重绘
17
});
18
list.appendChild(fragment); // 最后一次性插入 DOM

1
.animated-element {
2
  /* 不推荐：使用 top/left 可能导致重排，动画可能卡顿 */
3
  /* position: absolute; */
4
  /* left: 0; */
5
  /* transition: left 0.3s ease; */
6

7
  /* 推荐：使用 transform 利用 GPU 加速 */
8
  transform: translateX(0);
9
  transition: transform 0.3s ease, opacity 0.3s ease;
10
  opacity: 1;
11
}
12

13
.animated-element.move {
14
  /* transform: translateX(100px); */
15
  transform: translate3d(100px, 0, 0); /* 强制开启 GPU 加速 */
16
}
17

18
.animated-element.fade-out {
19
  opacity: 0;
20
}

1
.element-about-to-animate {
2
  /* 告知浏览器 transform 和 opacity 属性即将发生变化 */
3
  will-change: transform, opacity;
4
}
5

6
.element-about-to-animate:hover {
7
  transform: scale(1.1);
8
  opacity: 0.8;
9
}
10

11
/* 注意：不要滥用 will-change，仅在确实需要时添加，并在变化结束后移除 */
12
/* 可以通过 JavaScript 在动画开始前添加，结束后移除 */

1
<!-- DNS 预解析：提前解析域名 -->
2
<link rel="dns-prefetch" href="//fonts.googleapis.com">
3
<link rel="dns-prefetch" href="//api.example.com">
4

5
<!-- 预连接：提前完成 DNS 解析 + TCP 握手 + TLS 协商 -->
6
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7
<link rel="preconnect" href="https://api.example.com">

1
# GraphQL 查询示例：只请求需要的字段
2
query GetUserProfile {
3
  user(id: "123") {
4
    id
5
    name
6
    email
7
    posts(last: 5) { # 只获取最近 5 篇文章
8
      title
9
      createdAt
10
    }
11
  }
12
}
13

14
# 相比之下，REST 可能需要多个请求或返回大量不需要的数据
15
# GET /users/123
16
# GET /users/123/posts?limit=5

1
// LocalStorage: 持久存储
2
localStorage.setItem('theme', 'dark');
3
const currentTheme = localStorage.getItem('theme');
4
localStorage.removeItem('theme');
5
localStorage.clear(); // 清除所有
6

7
// SessionStorage: 会话级存储
8
sessionStorage.setItem('sessionId', 'abc123xyz');
9
const sessionId = sessionStorage.getItem('sessionId');

1
// 打开（或创建）数据库
2
const request = indexedDB.open('myDatabase', 1);
3

4
request.onupgradeneeded = event => {
5
  const db = event.target.result;
6
  // 创建一个对象存储空间（类似表）
7
  const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
8
  // 创建索引
9
  objectStore.createIndex('name', 'name', { unique: false });
10
};
11

12
request.onsuccess = event => {
13
  const db = event.target.result;
14
  // 使用事务进行数据操作
15
  const transaction = db.transaction(['customers'], 'readwrite');
16
  const objectStore = transaction.objectStore('customers');
17

18
  // 添加数据
19
  const addRequest = objectStore.add({ id: '1', name: 'Alice', email: 'alice@example.com' });
20
  addRequest.onsuccess = () => console.log('Data added');
21

22
  // 获取数据
23
  const getRequest = objectStore.get('1');
24
  getRequest.onsuccess = () => console.log('Retrieved data:', getRequest.result);
25
};
26

27
request.onerror = event => {
28
  console.error('Database error:', event.target.errorCode);
29
};

1
// 在 Service Worker 中使用 Cache API
2
const CACHE_NAME = 'my-site-cache-v1';
3
const urlsToCache = [
4
  '/',
5
  '/styles/main.css',
6
  '/script/main.js'
7
];
8

9
self.addEventListener('install', event => {
10
  event.waitUntil(
11
    caches.open(CACHE_NAME)
12
      .then(cache => {
13
        console.log('Opened cache');
14
        return cache.addAll(urlsToCache); // 将资源添加到缓存
15
      })
16
  );
17
});
18

19
self.addEventListener('fetch', event => {
20
  event.respondWith(
21
    caches.match(event.request) // 尝试从缓存中查找匹配的请求
22
      .then(response => {
23
        // 如果缓存中有匹配的响应，则返回它
24
        if (response) {
25
          return response;
26
        }
27
        // 否则，从网络获取
28
        return fetch(event.request);
29
      })
30
  );
31
});

1
/* 默认样式 (移动优先) */
2
.container {
3
  width: 95%;
4
  margin: 0 auto;
5
}
6

7
/* 平板设备 */
8
@media (min-width: 768px) {
9
  .container {
10
    width: 90%;
11
  }
12
  .sidebar {
13
    display: block; /* 在平板上显示侧边栏 */
14
  }
15
}
16

17
/* 桌面设备 */
18
@media (min-width: 1024px) {
19
  .container {
20
    width: 80%;
21
    max-width: 1200px;
22
  }
23
}
24

25
/* 加载不同背景图 */
26
body {
27
  background-image: url('background-small.jpg');
28
}
29
@media (min-width: 768px) {
30
  body {
31
    background-image: url('background-large.jpg');
32
  }
33
}

1
<!-- 使用 srcset 和 sizes -->
2
<img srcset="image-320w.jpg 320w,
3
             image-480w.jpg 480w,
4
             image-800w.jpg 800w"
5
     sizes="(max-width: 320px) 280px,
6
            (max-width: 480px) 440px,
7
            800px"
8
     src="image-800w.jpg" alt="Responsive image">
9

10
<!-- 使用 <picture> 元素提供不同格式或裁剪 -->
11
<picture>
12
  <source media="(min-width: 650px)" srcset="image-large.webp" type="image/webp">
13
  <source media="(min-width: 465px)" srcset="image-medium.webp" type="image/webp">
14
  <source srcset="image-small.webp" type="image/webp">
15
  <!-- Fallback for browsers that don't support WebP or <picture> -->
16
  <source media="(min-width: 650px)" srcset="image-large.jpg">
17
  <source media="(min-width: 465px)" srcset="image-medium.jpg">
18
  <img src="image-small.jpg" alt="Art directed image">
19
</picture>

1
// 检查网络状况决定加载资源质量 (概念示例)
2
if ('connection' in navigator) {
3
  const connection = navigator.connection;
4
  if (connection.saveData === true) {
5
    // 用户启用了数据节省模式，加载低质量资源
6
    loadLowQualityResources();
7
  } else if (connection.effectiveType === '4g') {
8
    // 网络良好，加载高质量资源
9
    loadHighQualityResources();
10
  } else {
11
    // 网络一般或未知，加载标准资源
12
    loadStandardResources();
13
  }
14
} else {
15
  // 不支持 Network Information API，加载标准资源
16
  loadStandardResources();
17
}

1
// 点击按钮加载更多评论
2
const loadMoreButton = document.getElementById('loadMoreComments');
3
let currentPage = 1;
4

5
loadMoreButton.addEventListener('click', () => {
6
  currentPage++;
7
  fetch(`/api/comments?page=${currentPage}`)
8
    .then(response => response.json())
9
    .then(comments => {
10
      renderComments(comments);
11
      if (comments.length === 0) {
12
        loadMoreButton.style.display = 'none'; // 没有更多评论了
13
      }
14
    });
15
});
16

17
// 结合 Intersection Observer 实现无限滚动加载
18
const sentinel = document.getElementById('infinite-scroll-sentinel');
19
const observer = new IntersectionObserver(entries => {
20
  if (entries[0].isIntersecting) {
21
    loadMoreContent();
22
  }
23
});
24
observer.observe(sentinel);

1
@font-face {
2
  font-family: 'MyCustomFont';
3
  src: url('myfont.woff2') format('woff2');
4
  /* font-display 控制字体加载行为 */
5
  /* swap: 先显示后备字体，字体加载完后替换。可能导致 FOUT (Flash of Unstyled Text) */
6
  font-display: swap;
7

8
  /* block: 短暂阻塞（约3秒），期间不显示文本。若超时则显示后备字体，加载完后替换。*/
9
  /* font-display: block; */
10

11
  /* fallback: 极短阻塞（约100ms），期间不显示文本。若超时则显示后备字体，后续不再替换。*/
12
  /* font-display: fallback; */
13

14
  /* optional: 极短阻塞（约100ms），期间不显示文本。若超时则显示后备字体，字体仍在后台下载，但仅在下次导航时使用。*/
15
  /* font-display: optional; */
16
}
17

18
body {
19
  font-family: 'MyCustomFont', sans-serif; /* 指定后备字体 */
20
}

1
<!-- 使用 <picture> 元素提供多种格式 -->
2
<picture>
3
  <!-- 优先尝试 AVIF -->
4
  <source srcset="image.avif" type="image/avif">
5
  <!-- 其次尝试 WebP -->
6
  <source srcset="image.webp" type="image/webp">
7
  <!-- 最后回退到 JPG -->
8
  <img src="image.jpg" alt="Modern image format example">
9
</picture>
10

11
<!-- 在 CSS 中使用 -->
12
<style>
13
.hero {
14
  /* 浏览器会自动选择它支持的第一个格式 */
15
  background-image: url('hero.avif'), url('hero.webp'), url('hero.jpg');
16
}
17
</style>

1
// main.js (主线程)
2
const worker = new Worker('worker.js');
3

4
// 向 Worker 发送数据
5
worker.postMessage({ data: [1, 2, 3, 4, 5] });
6

7
// 接收来自 Worker 的消息
8
worker.onmessage = event => {
9
  console.log('Result from worker:', event.data.result);
10
};
11

12
// 处理错误
13
worker.onerror = error => {
14
  console.error('Worker error:', error);
15
};
16

17
// worker.js (后台线程)
18
self.onmessage = event => {
19
  console.log('Data received in worker:', event.data.data);
20
  // 执行耗时计算
21
  const result = event.data.data.reduce((sum, val) => sum + val * val, 0);
22

23
  // 将结果发送回主线程
24
  self.postMessage({ result: result });
25
};

1
const targetElement = document.getElementById('observeMe');
2

3
const callback = (entries, observer) => {
4
  entries.forEach(entry => {
5
    if (entry.isIntersecting) {
6
      // 元素进入视口
7
      console.log('Element is visible!');
8
      targetElement.classList.add('visible');
9
      // 如果只需要触发一次，可以停止观察
10
      // observer.unobserve(targetElement);
11
    } else {
12
      // 元素离开视口
13
      console.log('Element is hidden!');
14
      targetElement.classList.remove('visible');
15
    }
16
  });
17
};
18

19
const options = {
20
  root: null, // 相对于视口
21
  rootMargin: '0px',
22
  threshold: 0.5 // 元素 50% 可见时触发回调
23
};
24

25
const observer = new IntersectionObserver(callback, options);
26
observer.observe(targetElement);

1
// 测量代码块执行时间
2
performance.mark('start-calculation');
3
// ... 执行一些耗时操作 ...
4
calculateFibonacci(40);
5
performance.mark('end-calculation');
6
performance.measure('calculation-duration', 'start-calculation', 'end-calculation');
7

8
// 获取所有测量结果
9
const measures = performance.getEntriesByType('measure');
10
measures.forEach(measure => {
11
  console.log(`${measure.name}: ${measure.duration}ms`);
12
});
13

14
// 获取资源加载性能数据
15
const resources = performance.getEntriesByType('resource');
16
resources.forEach(resource => {
17
  console.log(`Resource ${resource.name} loaded in ${resource.duration}ms`);
18
});
19

20
// 获取导航性能数据
21
const navigation = performance.getEntriesByType('navigation')[0];
22
console.log(`DOM content loaded in ${navigation.domContentLoadedEventEnd}ms`);
23
console.log(`Page loaded in ${navigation.loadEventEnd}ms`);
24

25
// 清除标记和测量
26
performance.clearMarks();
27
performance.clearMeasures();

1
// main.js (注册 Service Worker)
2
if ('serviceWorker' in navigator) {
3
  window.addEventListener('load', () => {
4
    navigator.serviceWorker.register('/sw.js')
5
      .then(registration => {
6
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
7
      })
8
      .catch(error => {
9
        console.log('ServiceWorker registration failed: ', error);
10
      });
11
  });
12
}
13

14
// sw.js (Service Worker 脚本 - 缓存优先策略示例)
15
const CACHE_NAME = 'my-app-cache-v1';
16

17
self.addEventListener('install', event => {
18
  // 安装时缓存核心资源
19
  event.waitUntil(
20
    caches.open(CACHE_NAME).then(cache => {
21
      return cache.addAll([
22
        '/',
23
        '/index.html',
24
        '/styles.css',
25
        '/app.js'
26
      ]);
27
    })
28
  );
29
});
30

31
self.addEventListener('fetch', event => {
32
  event.respondWith(
33
    caches.match(event.request)
34
      .then(response => {
35
        // 缓存命中，返回缓存的响应
36
        if (response) {
37
          return response;
38
        }
39
        // 缓存未命中，从网络获取
40
        return fetch(event.request).then(networkResponse => {
41
          // 可选：将新的响应添加到缓存
42
          // caches.open(CACHE_NAME).then(cache => cache.put(event.request, networkResponse.clone()));
43
          return networkResponse;
44
        });
45
      })
46
      .catch(() => {
47
        // 网络和缓存都失败时，可以返回一个备用的离线页面
48
        // return caches.match('/offline.html');
49
      })
50
  );
51
});