浏览器架构与渲染流程

// 在 Chrome DevTools 中查看进程信息
// 1. 打开 Chrome DevTools
// 2. 进入 Performance 面板
// 3. 录制页面操作
// 4. 查看 Bottom-Up 视图中的进程信息

// 检查当前页面的进程ID
console.log('当前页面进程信息:', performance.memory);
console.log('时间戳:', performance.now());

// 监控页面性能
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('性能条目:', entry.name, entry.duration);
  }
});
observer.observe({ entryTypes: ['measure', 'navigation'] });

// 监控关键渲染路径
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'navigation') {
      const navEntry = entry as PerformanceNavigationTiming;
      console.log('DOM 解析时间:', navEntry.domContentLoadedEventEnd - navEntry.domContentLoadedEventStart);
      console.log('页面加载时间:', navEntry.loadEventEnd - navEntry.loadEventStart);
      console.log('首次绘制:', navEntry.responseStart - navEntry.requestStart);
    }
  }
});

observer.observe({ entryTypes: ['navigation'] });

// 强制同步布局示例
function badExample() {
  const element = document.getElementById('myElement');
  // 触发回流
  console.log(element.offsetWidth);
  // 修改样式
  element.style.width = '100px';
  // 再次触发回流
  console.log(element.offsetHeight);
}

// 优化后的示例
function goodExample() {
  const element = document.getElementById('myElement');
  // 缓存布局信息
  const width = element.offsetWidth;
  const height = element.offsetHeight;
  
  // 批量修改样式
  element.style.cssText = 'width: 100px; height: 50px; background: blue;';
  
  console.log('原始尺寸:', width, height);
}

<!-- 优化前：阻塞渲染的资源 -->
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>

<!-- 优化后：内联关键CSS，异步加载JS -->
<style>
  /* 关键CSS内联 */
  body { margin: 0; font-family: Arial; }
  .header { background: #333; color: white; padding: 1rem; }
</style>

<!-- 预加载关键资源 -->
<link rel="preload" href="fonts/main.woff2" as="font" crossorigin>
<link rel="preload" href="images/hero.webp" as="image">

<!-- 非关键CSS延迟加载 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

<!-- 异步加载JavaScript -->
<script src="main.js" async></script>

// 批量DOM操作优化
function optimizedDOMUpdate() {
  // 创建文档片段
  const fragment = document.createDocumentFragment();
  
  // 在内存中构建DOM
  for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.className = 'item';
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
  }
  
  // 一次性插入到文档
  document.getElementById('container').appendChild(fragment);
}

// 使用 requestAnimationFrame 优化动画
function smoothAnimation(element) {
  let start = null;
  
  function animate(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    
    // 使用 transform 而不是 top/left
    element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
    
    if (progress < 2000) {
      requestAnimationFrame(animate);
    }
  }
  
  requestAnimationFrame(animate);
}

// CSP 内容安全策略示例
// 在服务器响应头中设置
// Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';

// 防止XSS攻击的安全函数
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/"/g, """)
    .replace(/'/g, "&#039;");
}

// 安全的DOM操作
function safeUpdateContent(elementId, userContent) {
  const element = document.getElementById(elementId);
  // 使用textContent而不是innerHTML防止XSS
  element.textContent = userContent;
}

// 跨域安全通信
// 在iframe中安全通信
const iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage('Hello from parent', 'https://trusted-domain.com');

// 监听消息并验证来源
window.addEventListener('message', (event) => {
  // 验证消息来源
  if (event.origin !== 'https://trusted-domain.com') {
    return;
  }
  
  console.log('收到安全消息:', event.data);
});

// Cookie 操作
function setCookie(name, value, days) {
  const expires = new Date();
  expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;Secure;HttpOnly`;
}

function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

// localStorage 操作
function saveToLocalStorage(key, data) {
  try {
    localStorage.setItem(key, JSON.stringify(data));
  } catch (e) {
    console.error('localStorage 存储失败:', e);
  }
}

function getFromLocalStorage(key) {
  try {
    const data = localStorage.getItem(key);
    return data ? JSON.parse(data) : null;
  } catch (e) {
    console.error('localStorage 读取失败:', e);
    return null;
  }
}

// IndexedDB 操作示例
class IndexedDBHelper {
  constructor(dbName, version) {
    this.dbName = dbName;
    this.version = version;
    this.db = null;
  }

  async open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve(this.db);
      };
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains('users')) {
          db.createObjectStore('users', { keyPath: 'id' });
        }
      };
    });
  }

  async add(storeName, data) {
    const transaction = this.db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    return store.add(data);
  }

  async get(storeName, id) {
    const transaction = this.db.transaction([storeName], 'readonly');
    const store = transaction.objectStore(storeName);
    return store.get(id);
  }
}

// 使用示例
const dbHelper = new IndexedDBHelper('myDatabase', 1);
await dbHelper.open();
await dbHelper.add('users', { id: 1, name: '张三', email: 'zhangsan@example.com' });

// 事件循环执行顺序演示
console.log('1. 同步代码');

setTimeout(() => {
  console.log('4. 宏任务 - setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('3. 微任务 - Promise');
});

console.log('2. 同步代码结束');

// 输出顺序：
// 1. 同步代码
// 2. 同步代码结束
// 3. 微任务 - Promise
// 4. 宏任务 - setTimeout

// 复杂事件循环示例
console.log('开始');

setTimeout(() => console.log('setTimeout 1'), 0);

Promise.resolve().then(() => {
  console.log('Promise 1');
  return Promise.resolve();
}).then(() => {
  console.log('Promise 2');
});

setTimeout(() => console.log('setTimeout 2'), 0);

console.log('结束');

// 输出顺序：
// 开始
// 结束
// Promise 1
// Promise 2
// setTimeout 1
// setTimeout 2