🚀 FAANG-Level Performance & Security Guide

📊 PART 1: PERFORMANCE OPTIMIZATION

🎨 FRONTEND PERFORMANCE (React Focus)

1. Code Optimization (C)

Answer to interviewer:
"After 13 years, I've found code optimization starts at the component level. Here's my approach:"

❌ BAD: Re-renders on every parent update

const UserCard = ({ user }) => {
    return <div>{user.name}</div>;
};

✅ GOOD: Memoized component

const UserCard = React.memo(({ user }) => {
    return <div>{user.name}</div>;
}, (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.id;
});

✅ BETTER: useMemo for expensive calculations

const Dashboard = ({ data }) => {
    const sortedData = useMemo(() => {
        return data.sort((a, b) => b.value - a.value);
    }, [data]);
    
    return <Chart data={sortedData} />;
};

✅ BEST: useCallback for function props

const ParentComponent = () => {
    const handleClick = useCallback((id) => {
        updateUser(id);
    }, []); // Dependencies array
    
    return <ChildComponent onClick={handleClick} />;
};

2. Rendering Optimization (R)

Answer to interviewer:
"React 18 concurrent features changed how I optimize rendering. Here's my strategy:"

✅ Virtual Scrolling for large lists

import { FixedSizeList } from 'react-window';

const LargeList = ({ items }) => (
    <FixedSizeList
        height={600}
        itemCount={items.length}
        itemSize={50}
        width="100%"
    >
        {({ index, style }) => (
            <div style={style}>{items[index].name}</div>
        )}
    </FixedSizeList>
);

✅ Debouncing expensive operations

import React, { useState, useDeferredValue } from "react";

const bigList = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

export default function SearchExample() {
  const [query, setQuery] = useState("");

  // 👇 Defer the expensive value
  const deferredQuery = useDeferredValue(query);

  const filteredList = bigList.filter(item =>
    item.toLowerCase().includes(deferredQuery.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />

      <ul>
        {filteredList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Answer to interviewer:
“I use useDeferredValue to prioritize urgent updates like user input and defer non-urgent updates like rendering large filtered lists.”

✅ startTransition for non-urgent updates

import { useState, useTransition } from 'react';

function SearchComponent({ list }) {
  const [input, setInput] = useState('');
  const [filtered, setFiltered] = useState(list);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value); // urgent update

    startTransition(() => {
      const result = list.filter(item =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFiltered(result); // non-urgent update
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} />

      {isPending && <p>Loading...</p>}

      <ul>
        {filtered.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Answer to interviewer:
💡 What’s Happening Here • setInput → urgent (user typing should never lag) • setFiltered → non-urgent (heavy work, can wait) • startTransition → tells React: “This can be interrupted if user types again”
“If I already have a value and want React to delay its effect, I use useDeferredValue. But if I want to explicitly mark some updates as low priority and also show a pending UI state, I use useTransition.”

3. Image/Asset Optimization (I)

Answer to interviewer:
"Images typically account for 50% of page weight. My optimization stack:"

✅ Next.js Image component (automatic optimization)

import Image from 'next/image';

<Image
    src="/profile.jpg"
    width={400}
    height={400}
    alt="Profile"
    loading="lazy"
    placeholder="blur"
    quality={85}
/>

✅ Responsive images with srcset

<img
    src="hero-800.webp"
    srcset="
        hero-400.webp 400w,
        hero-800.webp 800w,
        hero-1200.webp 1200w
    "
    sizes="(max-width: 600px) 400px, 800px"
    alt="Hero"
/>

4. State Management (S)

Answer to interviewer:
"Poor state management is the #1 cause of React performance issues. Here's how I handle it:"

❌ BAD: Global state causing unnecessary re-renders

const App = () => {
    const [appState, setAppState] = useState({
        user: {},
        cart: [],
        notifications: []
    });
    
    // Every update re-renders entire app!
};

✅ GOOD: Separate contexts

const UserContext = createContext();
const CartContext = createContext();
const NotificationsContext = createContext();

✅ BETTER: Zustand for granular updates

import create from 'zustand';

const useStore = create((set) => ({
    user: null,
    cart: [],
    updateCart: (items) => set({ cart: items })
}));

// Only components using cart re-render
const Cart = () => {
    const cart = useStore(state => state.cart);
    // ...
};

5. Progressive Enhancement (P)

Answer to interviewer:
"Modern web should work for everyone. My progressive enhancement strategy:"

✅ SSR/SSG for initial load

// Next.js example
export async function getStaticProps() {
    const data = await fetchData();
    return { props: { data } };
}

✅ Hydration optimization

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(
    () => import('./HeavyComponent'),
    { ssr: false } // Skip SSR for client-only components
);

✅ Prefetch critical resources

<link rel="preload" href="/font.woff2" as="font" crossorigin />
<link rel="prefetch" href="/next-page.js" />
<link rel="preconnect" href="https://api.example.com" />

6. Lazy Loading (L)

Answer to interviewer:
"Lazy loading is essential for modern SPAs. My implementation:"

✅ Component lazy loading

const Profile = lazy(() => import('./Profile'));
const Dashboard = lazy(() => import('./Dashboard'));

<Suspense fallback={<Spinner />}>
    <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
</Suspense>

✅ Image lazy loading

const LazyImage = ({ src, alt }) => {
    const [imageSrc, setImageSrc] = useState(placeholder);
    const imgRef = useRef();
    
    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setImageSrc(src);
                observer.disconnect();
            }
        });
        
        observer.observe(imgRef.current);
        return () => observer.disconnect();
    }, [src]);
    
    return <img ref={imgRef} src={imageSrc} alt={alt} />;
};

⚙️ BACKEND PERFORMANCE (Node.js Focus)

7. Output Caching (O)

Answer to interviewer:
"Caching is the biggest performance multiplier on the backend. My caching strategy:"

✅ Redis for application cache

import Redis from 'ioredis';
const redis = new Redis();

app.get('/api/user/:id', async (req, res) => {
    const cacheKey = `user:${req.params.id}`;
    
    // Try cache first
    const cached = await redis.get(cacheKey);
    if (cached) {
        return res.json(JSON.parse(cached));
    }
    
    // Cache miss: fetch from DB
    const user = await User.findById(req.params.id);
    
    // Cache for 5 minutes
    await redis.setex(cacheKey, 300, JSON.stringify(user));
    
    res.json(user);
});

✅ Cache invalidation

app.put('/api/user/:id', async (req, res) => {
    const user = await User.findByIdAndUpdate(req.params.id, req.body);
    
    // Invalidate cache
    await redis.del(`user:${req.params.id}`);
    
    res.json(user);
});

✅ HTTP caching headers

app.get('/api/posts', (req, res) => {
    res.set({
        'Cache-Control': 'public, max-age=300', // 5 minutes
        'ETag': generateETag(posts),
        'Last-Modified': posts.updatedAt
    });
    res.json(posts);
});

8. API Optimization (A)

Answer to interviewer:
"API design directly impacts frontend performance. My optimization approach:"

✅ Pagination (don't load all data)

app.get('/api/posts', async (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 20;
    const skip = (page - 1) * limit;
    
    const posts = await Post.find()
        .skip(skip)
        .limit(limit)
        .lean(); // MongoDB: skip Mongoose overhead
    
    res.json({
        data: posts,
        page,
        totalPages: Math.ceil(totalCount / limit)
    });
});

✅ Field filtering (don't send unnecessary data)

app.get('/api/users', async (req, res) => {
    const fields = req.query.fields?.split(',').join(' ') || '';
    
    const users = await User.find()
        .select(fields || 'name email avatar')
        .lean();
    
    res.json(users);
});

✅ Compression

import compression from 'compression';
app.use(compression()); // gzip responses

9. Database Optimization (D)

Answer to interviewer:
"Database is often the bottleneck. My optimization strategy:"

✅ Indexing (most critical)

// MongoDB
db.users.createIndex({ email: 1 }, { unique: true });
db.posts.createIndex({ userId: 1, createdAt: -1 });
db.posts.createIndex({ tags: 1 }); // Array field index

// PostgreSQL
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_posts_user_date ON posts(user_id, created_at DESC);
CREATE INDEX idx_posts_tags ON posts USING GIN(tags); // JSON index

✅ Query optimization - Avoid N+1 problem

// BAD: N+1 query problem
const users = await User.find();
for (let user of users) {
    user.posts = await Post.find({ userId: user.id }); // N queries!
}

// GOOD: Use joins/populate
const users = await User.find().populate('posts'); // 1 query

✅ Select only needed fields

// BAD
const users = await User.find(); // Gets all fields

// GOOD
const users = await User.find().select('name email avatar');

🌐 NETWORK OPTIMIZATION

Answer to interviewer:
"Network is often overlooked but critical. My optimization approach:"

✅ Resource hints

<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="preload" href="/critical.css" as="style" />
<link rel="prefetch" href="/next-page.js" />

✅ Service Worker for offline

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

✅ WebSocket for real-time (vs polling)

const ws = new WebSocket('wss://api.example.com');
ws.onmessage = (event) => {
    updateUI(JSON.parse(event.data));
};

📏 PERFORMANCE METRICS TO MENTION

🔒 PART 2: WEBSITE SECURITY

🛡️ FRONTEND SECURITY

1. XSS (Cross-Site Scripting) Prevention

Answer to interviewer:
"XSS is the #1 frontend security risk. Here's how I prevent it:"

❌ VULNERABLE: Direct HTML injection

const UserComment = ({ comment }) => {
    return <div dangerouslySetInnerHTML={{ __html: comment }} />;
};
// Attacker comment: "<script>alert('XSS')</script>"

✅ SAFE: React escapes by default

const UserComment = ({ comment }) => {
    return <div>{comment}</div>; // Automatically escaped
};

✅ SAFE: Sanitize if HTML needed

import DOMPurify from 'dompurify';

const UserComment = ({ comment }) => {
    const sanitized = DOMPurify.sanitize(comment);
    return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
};

✅ Content Security Policy (CSP)

<meta 
    http-equiv="Content-Security-Policy"
    content="
        default-src 'self';
        script-src 'self' 'unsafe-inline' https://cdn.example.com;
        style-src 'self' 'unsafe-inline';
        img-src 'self' data: https:;
    "
/>

2. CSRF (Cross-Site Request Forgery) Prevention

Answer to interviewer:
"CSRF tricks users into executing unwanted actions. My prevention:"

✅ CSRF Token (Backend generates, frontend sends)

// Backend (Express)
import csrf from 'csurf';
app.use(csrf({ cookie: true }));

app.get('/form', (req, res) => {
    res.json({ csrfToken: req.csrfToken() });
});

// Frontend
const deleteAccount = async () => {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    
    await fetch('/api/account', {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': csrfToken
        }
    });
};

✅ SameSite Cookies

res.cookie('session', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'strict' // or 'lax'
});

🔐 BACKEND SECURITY

3. SQL Injection Prevention

Answer to interviewer:
"SQL injection can expose entire database. Here's my protection:"

❌ VULNERABLE: String concatenation

app.get('/user', async (req, res) => {
    const { email } = req.query;
    const query = `SELECT * FROM users WHERE email = '${email}'`;
    const users = await db.query(query);
    // Attacker: email = "' OR '1'='1"
    // Returns ALL users!
});

✅ SAFE: Parameterized queries (PostgreSQL)

app.get('/user', async (req, res) => {
    const { email } = req.query;
    const query = 'SELECT * FROM users WHERE email = $1';
    const users = await db.query(query, [email]);
});

✅ SAFE: ORM (Mongoose, Sequelize, Prisma)

app.get('/user', async (req, res) => {
    const { email } = req.query;
    const user = await User.findOne({ email }); // Mongoose
});

✅ Input validation

import { body, validationResult } from 'express-validator';

app.post('/user',
    body('email').isEmail().normalizeEmail(),
    body('age').isInt({ min: 1, max: 120 }),
    async (req, res) => {
        const errors = validationResult(req);
        if (!errors.isEmpty()) {
            return res.status(400).json({ errors: errors.array() });
        }
        // Safe to process
    }
);

4. Authentication & Authorization

Answer to interviewer:
"Proper auth is critical. My implementation:"

✅ JWT with refresh tokens

import jwt from 'jsonwebtoken';

// Login
app.post('/login', async (req, res) => {
    const { email, password } = req.body;
    
    // Verify user
    const user = await User.findOne({ email });
    const isValid = await bcrypt.compare(password, user.password);
    
    if (!isValid) {
        return res.status(401).json({ error: 'Invalid credentials' });
    }
    
    // Generate tokens
    const accessToken = jwt.sign(
        { userId: user.id },
        process.env.JWT_SECRET,
        { expiresIn: '15m' }
    );
    
    const refreshToken = jwt.sign(
        { userId: user.id },
        process.env.REFRESH_SECRET,
        { expiresIn: '7d' }
    );
    
    res.json({ accessToken, refreshToken });
});

✅ Authentication middleware

const authenticateToken = (req, res, next) => {
    const token = req.headers['authorization']?.split(' ')[1];
    
    if (!token) {
        return res.status(401).json({ error: 'No token' });
    }
    
    jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
        if (err) {
            return res.status(403).json({ error: 'Invalid token' });
        }
        req.user = user;
        next();
    });
};

✅ Password hashing

import bcrypt from 'bcrypt';

const hashPassword = async (password) => {
    const salt = await bcrypt.genSalt(10);
    return bcrypt.hash(password, salt);
};

✅ Rate limiting (prevent brute force)

import rateLimit from 'express-rate-limit';

const loginLimiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 5, // 5 attempts
    message: 'Too many login attempts, try again later'
});

app.post('/login', loginLimiter, async (req, res) => {
    // Login logic
});

5. Encryption

Answer to interviewer:
"Data encryption at rest and in transit. My approach:"

✅ Encrypt sensitive data at rest

import crypto from 'crypto';

const algorithm = 'aes-256-gcm';
const key = Buffer.from(process.env.ENCRYPTION_KEY, 'hex');

const encrypt = (text) => {
    const iv = crypto.randomBytes(16);
    const cipher = crypto.createCipheriv(algorithm, key, iv);
    
    let encrypted = cipher.update(text, 'utf8', 'hex');
    encrypted += cipher.final('hex');
    
    const authTag = cipher.getAuthTag();
    
    return {
        encrypted,
        iv: iv.toString('hex'),
        authTag: authTag.toString('hex')
    };
};

✅ Store sensitive config in env variables

// .env file (never commit to git)
JWT_SECRET=your-super-secret-key-here
DATABASE_URL=postgresql://user:pass@host:5432/db
ENCRYPTION_KEY=64-char-hex-key-here

6. Security Headers

Answer to interviewer:
"Security headers protect against common attacks. My configuration:"

✅ Using Helmet.js

import helmet from 'helmet';

app.use(helmet({
    // Content Security Policy
    contentSecurityPolicy: {
        directives: {
            defaultSrc: ["'self'"],
            scriptSrc: ["'self'", "'unsafe-inline'", "cdn.example.com"],
            styleSrc: ["'self'", "'unsafe-inline'"],
            imgSrc: ["'self'", "data:", "https:"],
            connectSrc: ["'self'", "api.example.com"],
            fontSrc: ["'self'", "fonts.googleapis.com"],
            objectSrc: ["'none'"],
            upgradeInsecureRequests: []
        }
    },
    // Strict Transport Security (force HTTPS)
    hsts: {
        maxAge: 31536000,
        includeSubDomains: true,
        preload: true
    },
    // Prevent clickjacking
    frameguard: {
        action: 'deny'
    },
    // Disable browser MIME sniffing
    noSniff: true,
    // XSS Protection
    xssFilter: true
}));

7. API Security

Answer to interviewer:
"APIs are attack vectors. My security approach:"

✅ Rate limiting

import rateLimit from 'express-rate-limit';

const apiLimiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100, // 100 requests per windowMs
    message: 'Too many requests, please try again later'
});

app.use('/api/', apiLimiter);

✅ Input validation

import Joi from 'joi';

const userSchema = Joi.object({
    email: Joi.string().email().required(),
    password: Joi.string().min(8).required(),
    age: Joi.number().integer().min(1).max(120)
});

app.post('/api/user', async (req, res) => {
    const { error } = userSchema.validate(req.body);
    
    if (error) {
        return res.status(400).json({ error: error.details[0].message });
    }
    
    // Safe to process
});

✅ Request size limits

app.use(express.json({ limit: '10kb' })); // Max 10KB body
app.use(express.urlencoded({ extended: true, limit: '10kb' }));

8. CORS Configuration

Answer to interviewer:
"CORS misconfiguration is a common vulnerability. Here's my setup:"

✅ Restrictive CORS (production)

import cors from 'cors';

const corsOptions = {
    origin: ['https://myapp.com', 'https://www.myapp.com'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true, // Allow cookies
    maxAge: 86400 // Cache preflight for 24 hours
};

app.use(cors(corsOptions));

✅ Dynamic origin validation

const corsOptions = {
    origin: (origin, callback) => {
        const allowedOrigins = ['https://myapp.com', 'https://admin.myapp.com'];
        
        if (!origin || allowedOrigins.includes(origin)) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    },
    credentials: true
};

app.use(cors(corsOptions));

app.use(cors()); // Allows ALL origins!

9. Third-Party Dependencies

Answer to interviewer:
"Dependencies can introduce vulnerabilities. My security process:"

✅ Regular security audits

npm audit
npm audit fix

# Automated dependency scanning
npm install -g snyk
snyk test
snyk monitor

# Keep dependencies updated
npm outdated
npm update

🎯 HOW TO ANSWER IN INTERVIEW

📝 QUICK REFERENCE CHEAT SHEET