知识库

Appearance

性能优化 ​

代码优化 ​

代码分割 ​

  1. 页面级代码分割：将不同页面的代码分割到不同的包中，减少初始加载时间

    javascript
    // app.config.js
export default {
  pages: [
    'pages/index/index',
    'pages/login/index'
  ],
  subPackages: [
    {
      root: 'pages/detail',
      pages: [
        'index'
      ]
    }
  ]
}

  2. 组件级代码分割：使用动态 import 实现组件的懒加载

    jsx
    // React
import React, { lazy, Suspense } from 'react'

const LazyComponent = lazy(() => import('./LazyComponent'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  )
}

// Vue
const LazyComponent = () => import('./LazyComponent.vue')

代码压缩 ​

  1. JavaScript 压缩：使用 Terser 等工具压缩 JavaScript 代码

  2. CSS 压缩：使用 PostCSS 等工具压缩 CSS 代码

  3. HTML 压缩：使用 html-minifier 等工具压缩 HTML 代码

代码混淆 ​

  1. 变量名混淆：将变量名替换为短变量名，减少代码体积

  2. 函数名混淆：将函数名替换为短函数名，减少代码体积

  3. 字符串加密：对敏感字符串进行加密，提高安全性

渲染优化 ​

减少渲染次数 ​

  1. 使用 React.memo：对于纯展示组件，使用 React.memo 减少不必要的渲染

    jsx
    import React, { memo } from 'react'

const PureComponent = memo(({ data }) => {
  return <div>{data}</div>
})

  2. 使用 useMemo：对于计算密集的操作，使用 useMemo 缓存计算结果

    jsx
    import React, { useMemo } from 'react'

function Component({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => item * 2)
  }, [data])
  
  return <div>{processedData}</div>
}

  3. 使用 useCallback：对于函数，使用 useCallback 缓存函数引用

    jsx
    import React, { useCallback } from 'react'

function Component({ onButtonClick }) {
  const handleClick = useCallback(() => {
    onButtonClick('clicked')
  }, [onButtonClick])
  
  return <button onClick={handleClick}>Click</button>
}

虚拟列表 ​

对于长列表，使用虚拟列表技术减少 DOM 节点数量：

jsx
import React from 'react'
import { VirtualList } from 'taro-ui'

function LongList({ data }) {
  return (
    <VirtualList
      height={500}
      itemHeight={100}
      data={data}
      renderItem={({ item, index }) => (
        <View key={index} className="item">
          <Text>{item.title}</Text>
        </View>
      )}
    />
  )
}

防抖和节流 ​

  1. 防抖：对于频繁触发的事件，使用防抖减少函数调用次数

    javascript
    function debounce(func, wait) {
  let timeout
  return function() {
    const context = this
    const args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait)
  }
}

const debouncedSearch = debounce((keyword) => {
  console.log('Search:', keyword)
}, 300)

  2. 节流：对于持续触发的事件，使用节流控制函数调用频率

    javascript
    function throttle(func, wait) {
  let lastTime = 0
  return function() {
    const now = Date.now()
    if (now - lastTime >= wait) {
      func.apply(this, arguments)
      lastTime = now
    }
  }
}

const throttledScroll = throttle(() => {
  console.log('Scroll position:', window.scrollY)
}, 100)

网络优化 ​

网络请求优化 ​

  1. 合并请求：将多个小请求合并为一个大请求，减少网络请求次数

  2. 缓存请求：对于相同的请求，使用缓存避免重复请求

  3. 使用 HTTP/2：使用 HTTP/2 协议，支持多路复用，减少网络延迟

  4. 使用 CDN：使用 CDN 加速静态资源的加载

图片优化 ​

  1. 图片压缩：使用压缩工具压缩图片，减少图片大小

  2. 图片格式：使用合适的图片格式，如 WebP、AVIF 等

  3. 图片懒加载：对于不在视口中的图片，使用懒加载减少初始加载时间

    jsx
    import React, { useState, useEffect, useRef } from 'react'

function LazyImage({ src, alt }) {
  const [isLoaded, setIsLoaded] = useState(false)
  const imgRef = useRef(null)
  
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setIsLoaded(true)
          observer.unobserve(entry.target)
        }
      })
    })
    
    if (imgRef.current) {
      observer.observe(imgRef.current)
    }
    
    return () => {
      if (imgRef.current) {
        observer.unobserve(imgRef.current)
      }
    }
  }, [])
  
  return (
    <div ref={imgRef} className="lazy-image">
      {!isLoaded && <div className="placeholder">Loading...</div>}
      {isLoaded && <img src={src} alt={alt} />}
    </div>
  )
}

  4. 响应式图片：根据设备尺寸使用不同大小的图片

    html
    <picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Image">
</picture>

资源加载优化 ​

  1. 预加载：对于关键资源，使用预加载提前加载

    html
    <link rel="preload" href="main.css" as="style">
<link rel="preload" href="main.js" as="script">

  2. 预连接：对于需要连接的域名，使用预连接提前建立连接

    html
    <link rel="preconnect" href="https://api.example.com">

  3. 预获取：对于可能需要的资源，使用预获取提前加载

    html
    <link rel="prefetch" href="next-page.js">

存储优化 ​

本地存储 ​

  1. 合理使用本地存储：对于频繁访问的数据，使用本地存储减少网络请求

  2. 存储容量控制：注意不同平台的存储容量限制，避免存储过多数据

  3. 存储加密：对于敏感数据，使用加密存储提高安全性

缓存策略 ​

  1. 浏览器缓存：使用 HTTP 缓存头控制浏览器缓存

  2. Service Worker 缓存：使用 Service Worker 缓存静态资源，实现离线访问

  3. 内存缓存：对于频繁访问的数据，使用内存缓存提高访问速度

小程序优化 ​

小程序包大小 ​

  1. 代码分割：使用 subPackages 分割代码，减少主包大小

  2. 资源压缩：压缩图片、JS、CSS 等资源，减少包大小

  3. 移除无用代码：使用 Tree Shaking 移除无用代码，减少包大小

小程序渲染性能 ​

  1. 减少 WXML 节点数量：优化 WXML 结构，减少节点数量

  2. 减少 setData 调用：合并 setData 调用，减少渲染次数

  3. 使用自定义组件：将复杂的页面拆分为自定义组件，提高渲染性能

  4. 使用 virtual-list：对于长列表，使用 virtual-list 减少 DOM 节点数量

小程序启动性能 ​

  1. 预加载：使用小程序的预加载功能，提前加载页面

  2. 减少启动时的网络请求：将启动时的网络请求移到后台，提高启动速度

  3. 使用骨架屏：使用骨架屏提升用户体验，减少启动时的白屏时间

H5 优化 ​

H5 首屏加载 ​

  1. SSR：使用服务端渲染，减少客户端渲染时间

  2. 预渲染：使用预渲染，生成静态 HTML，减少客户端渲染时间

  3. 代码分割：使用代码分割，减少初始加载时间

  4. 资源压缩：压缩静态资源，减少加载时间

H5 性能监控 ​

  1. Performance API：使用 Performance API 监控页面性能

    javascript
    // 监控页面加载时间
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart
console.log('Page load time:', loadTime)

  2. 用户体验监控：监控用户交互响应时间，提高用户体验

  3. 错误监控：监控页面错误，及时发现和修复问题

React Native 优化 ​

React Native 性能 ​

  1. 使用 FlatList：对于长列表，使用 FlatList 提高渲染性能

  2. 使用 memo：对于纯展示组件，使用 memo 减少不必要的渲染

  3. 使用 useCallback 和 useMemo：缓存函数和计算结果，减少渲染次数

  4. 避免使用内联样式：使用 StyleSheet.create 创建样式，提高渲染性能

  5. 使用 Hermes：启用 Hermes 引擎，提高 JavaScript 执行性能

React Native 打包优化 ​

  1. 代码分割：使用代码分割，减少初始包大小

  2. 资源压缩：压缩图片、JS 等资源，减少包大小

  3. 使用 App Bundle：使用 App Bundle 格式，减少安装包大小

性能测试工具 ​

Lighthouse ​

Lighthouse 是 Google 提供的网页性能测试工具，可以测试页面的性能、可访问性、最佳实践等：

  1. 性能指标：加载时间、首次内容绘制、可交互时间等

  2. 可访问性：页面的可访问性评分

  3. 最佳实践：是否遵循 Web 最佳实践

  4. SEO：页面的 SEO 评分

WebPageTest ​

WebPageTest 是一个在线的网页性能测试工具，可以测试页面在不同设备和网络条件下的性能：

  1. 加载时间：页面的加载时间

  2. 资源分析：分析页面的资源加载情况

  3. 瀑布图：展示资源加载的顺序和时间

  4. 性能评分：页面的性能评分

Taro 性能分析 ​

Taro 提供了性能分析工具，可以分析应用的性能：

  1. 构建分析：分析构建产物的大小和组成

  2. 运行时分析：分析应用运行时的性能

  3. 网络分析：分析网络请求的性能

性能优化最佳实践 ​

  1. 性能预算：设定性能预算，监控性能指标

  2. 持续优化：定期进行性能测试和优化

  3. 用户体验：关注用户体验，优化关键路径

  4. 数据驱动：基于数据进行性能优化，避免盲目优化

  5. 团队协作：建立性能优化的团队规范，共同提高应用性能

  6. 文档记录：记录性能优化的过程和结果，便于后续参考

  7. 监控告警：建立性能监控告警机制，及时发现性能问题

  8. 优化迭代：持续迭代性能优化，不断提高应用性能

基于 VitePress 的本地知识库

Copyright © 2026