EnlightenCode

Appearance

🌈 浏览器核心知识点 ​

🎨 渲染机制 ​

1. 重绘和重排 (Repaint & Reflow) ​

渲染过程 📝

  1. 解析 HTML 和 CSS → DOM树 + 样式规则树
  2. 合并生成渲染树(Render Tree)
  3. Layout(重排/回流): 计算元素位置和大小
  4. Paint(重绘): 绘制元素外观
  5. Composite: GPU合成显示

性能优化建议 ⚡

  • 避免频繁操作样式,最好一次性重写style属性
  • 使用 class 批量修改样式
  • 避免频繁操作DOM,创建文档片段DocumentFragment
  • 对复杂动画使用绝对定位,使其脱离文档流
  • 使用 transform/opacity 等属性实现动画效果
  • 使用 requestAnimationFrame 执行动画
  • 对大量操作,使用防抖和节流处理

2. 浏览器和Node事件循环对比 ⚖️ ​

浏览器事件循环

  • 宏任务(macro-task): setTimeout、setInterval、script、UI渲染等
  • 微任务(micro-task): Promise、MutationObserver等
  • 执行顺序: 执行栈 → 微任务队列 → 宏任务队列

Node事件循环 六个阶段依次执行:

  1. timers: 执行setTimeout/setInterval回调
  2. pending callbacks: 执行系统操作的回调
  3. idle, prepare: 内部使用
  4. poll: 获取新的I/O事件
  5. check: 执行setImmediate回调
  6. close callbacks: 执行关闭事件回调

📦 浏览器缓存 ​

3. 缓存机制 ​

缓存位置 (优先级从高到低):

  1. Service Worker

    • 运行在浏览器背后的独立线程
    • 可以实现离线缓存、消息推送和网络代理
    • 必须在HTTPS环境下才能工作

  2. Memory Cache

    • 内存缓存
    • 快速读取但持续时间短
    • 常用于页面内的资源重复请求

  3. Disk Cache

    • 硬盘缓存
    • 容量大,存储时间长
    • 根据HTTP头信息来判断是否缓存

缓存策略 🔄

  1. 强缓存:
http
Cache-Control: max-age=31536000
Expires: Wed, 21 Oct 2025 07:28:00 GMT
  1. 协商缓存:
http
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

4. 埋点统计 1x1 GIF 👀 ​

为什么使用 1x1 GIF?

  • 支持跨域
  • 体积最小(43字节)
  • 不会阻塞页面加载
  • 完整度监测
  • 相比PNG格式更小

示例代码:

javascript
const reportData = (data) => {
  const img = new Image();
  img.src = `http://analytics-server.com/collect?data=${encodeURIComponent(JSON.stringify(data))}`;
}

🛡️ 安全机制 ​

5. 同源策略 ​

同源定义: 协议、域名、端口都相同

限制范围:

  • Ajax 请求
  • DOM 操作
  • Cookie、LocalStorage 和 IndexDB 访问

不受限制的元素:

  • <img src="...">
  • <link href="...">
  • <script src="...">
  • <iframe src="...">

6. 跨域解决方案 🌉 ​

  1. CORS
javascript
// 服务器设置
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
  1. JSONP
javascript
function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
  1. 代理服务器
nginx
# Nginx配置
location /api {
  proxy_pass http://real-server.com;
}

🎯 性能优化 ​

7. 资源优化策略 ​

  1. 多域名存储
  • 突破浏览器并发限制
  • CDN就近访问
  • Cookie隔离
  1. 图片优化
  • 使用WebP格式
  • 懒加载
  • 响应式图片
html
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="图片">
</picture>
  1. 静态资源优化
  • 文件压缩
  • 使用HTTP/2
  • 开启Gzip压缩
  • 合理使用缓存策略

8. SEO优化 🔍 ​

  1. 基础优化
  • 语义化HTML标签
  • 合理的title、description、keywords
  • 图片添加alt属性
  • URL语义化
  1. 内容优化
  • 核心内容提前加载
  • 避免重复内容
  • 保持更新频率
  • 内部链接建设
  1. 技术优化
  • 服务端渲染(SSR)
  • 控制页面大小
  • 提升加载速度
  • 移动端适配

🔧 开发调试 ​

9. 常用调试工具 ​

  1. Chrome DevTools
  • Elements: DOM和样式检查
  • Console: 日志和命令行
  • Sources: 断点调试
  • Network: 网络请求分析
  • Performance: 性能分析
  • Application: 存储查看
  1. 常用命令
javascript
// 性能标记
console.time('标记名');
// 代码执行
console.timeEnd('标记名');

// 对象结构查看
console.dir(object);

// 分组显示
console.group('组名');
console.log('信息1');
console.log('信息2');
console.groupEnd();

📚 扩展阅读 ​

💡 Tips: 面试时要注意结合实际项目经验来回答问题,展示自己的技术深度和实践能力。