内存泄漏排查与优化

性能优化方案

// 图片懒加载
const images = document.querySelectorAll('img[data-src]')
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      imageObserver.unobserve(img)
    }
  })
})
images.forEach(img => imageObserver.observe(img))

// 代码分割
const Home = () => import('./Home.vue')
const About = () => import('./About.vue')

// 防抖节流
function debounce(fn, delay) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

Nginx配置

server {
    listen 80;
    server_name example.com;

    root /var/www/html;
    index index.html index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/run/php/php8.1-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

API接口设计

// RESTful API 设计
const express = require('express')
const router = express.Router()

// 获取用户列表
router.get('/users', async (req, res) => {
  const { page = 1, pageSize = 10 } = req.query
  // ... 查询逻辑
  res.json({
    code: 0,
    message: 'success',
    data: {
      list: [],
      total: 0,
      page: parseInt(page),
      pageSize: parseInt(pageSize)
    }
  })
})

// 创建用户
router.post('/users', async (req, res) => {
  // ... 创建逻辑
  res.json({ code: 0, message: '创建成功' })
})

// 更新用户
router.put('/users/:id', async (req, res) => {
  // ... 更新逻辑
  res.json({ code: 0, message: '更新成功' })
})

// 删除用户
router.delete('/users/:id', async (req, res) => {
  // ... 删除逻辑
  res.json({ code: 0, message: '删除成功' })
})

Git工作流命令

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

git status
git add .
git add -p
git commit -m "feat: 实现用户登录功能"
git commit -m "fix: 修复登录验证码BUG"
git commit -m "docs: 更新API文档"
git commit -m "refactor: 重构用户模块"

git branch
git checkout -b feature/login
git switch main
git fetch origin
git pull --rebase origin main
git push origin feature/login

git rebase main
git rebase -i HEAD~3
git stash
git stash pop
git reset --soft HEAD~1
git checkout -- file.txt

git log --oneline --graph
git diff

代码重构示例

// 重构前
function calculatePrice(price, type) {
  if (type === 'normal') {
    return price
  } else if (type === 'vip') {
    return price * 0.8
  } else if (type === 'svip') {
    return price * 0.7
  }
}

// 重构后
const priceStrategies = {
  normal: price => price,
  vip: price => price * 0.8,
  svip: price => price * 0.7
}

function calculatePrice(price, type) {
  const strategy = priceStrategies[type] || priceStrategies.normal
  return strategy(price)
}

Shell脚本模板

#!/bin/bash
set -e

LOG_FILE="/var/log/deploy.log"

log() {
    echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1" | tee -a "$LOG_FILE"
}

log "开始部署..."

cd /var/www/app
git pull origin main
composer install --no-dev
php artisan migrate --force

log "部署完成!"

Linux常用命令

ls -la
cd /path
pwd
mkdir dirname
rm filename
rm -rf dirname
cp source dest
mv old new
chmod +x script.sh

cat filename
head -20 filename
tail -100 filename
tail -f filename
grep "关键词" filename
grep -r "关键词" .
find . -name "*.log"

top
htop
df -h
du -sh *
free -h
ps aux
ps aux | grep node
netstat -tlnp
ss -tlnp

systemctl start nginx
systemctl status nginx
journalctl -u nginx -f

curl https://example.com
wget https://文件地址
ping 域名.com

日志系统设计

const winston = require('winston')

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.combine(
    winston.format.timestamp(),
    winston.format.json()
  ),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' })
  ]
})

if (process.env.NODE_ENV !== 'production') {
  logger.add(new winston.transports.Console({
    format: winston.format.simple()
  }))
}

logger.info('信息日志')
logger.warn('警告日志')
logger.error('错误日志')

单元测试示例

// 使用 Jest
function sum(a, b) {
  return a + b
}

function multiply(a, b) {
  return a * b
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

test('multiply 2 * 3 to equal 6', () => {
  expect(multiply(2, 3)).toBe(6)
})

// 异步测试
test('async test', async () => {
  const data = await fetchData()
  expect(data).toBe('peanut butter')
})

安全防护方案

// XSS防护
function escapeHtml(str) {
  const div = document.createElement('div')
  div.textContent = str
  return div.innerHTML
}

// SQL注入防护 - 使用参数化查询
const sql = 'SELECT * FROM users WHERE id = ?'
db.query(sql, [userId])

// CSRF防护
const csrfToken = document.querySelector('meta[name="csrf-token"]').content
fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken
  }
})

// 密码加密
const bcrypt = require('bcrypt')
const saltRounds = 10
const hash = bcrypt.hashSync(password, saltRounds)

Docker常用命令

docker build -t myapp .
docker run -d -p 8080:80 --name myapp myapp
docker ps
docker ps -a
docker stop myapp
docker start myapp
docker restart myapp
docker rm myapp
docker rmi myapp

docker logs myapp
docker logs -f myapp
docker exec -it myapp bash

docker-compose up -d
docker-compose down
docker-compose logs -f

CORS跨域解决方案

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors({
  origin: ['https://你的域名.com', 'http://localhost:8080'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}))

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200)
  }
  next()
})

技术分享，欢迎评论区交流讨论。