第十一章(浏览器与性能优化面试真题)

四季读书网 2026-04-23 12:12:47 1 0

第十一章(浏览器与性能优化面试真题)

一、浏览器原理真题

1. 浏览器输入 URL 后发生了什么？

参考答案：

URL 解析：检查 URL 格式
DNS 解析：将域名转换为 IP 地址
TCP 连接：三次握手建立连接
发送 HTTP 请求：浏览器发送请求报文
服务器处理：服务器处理请求
响应 HTTP：服务器返回响应
浏览器解析：

解析 HTML 生成 DOM 树
解析 CSS 生成 CSSOM 树
合并 DOM + CSSOM = 渲染树
布局（Layout）
绘制（Paint）
合成（Composite）

JS 执行：执行 JavaScript

2. 浏览器渲染过程？

参考答案：

HTML → Parser → DOM Tree
           ↓
CSS → Parser → CSSOM Tree
           ↓
        Render Tree
           ↓
        Layout（布局）
           ↓
        Paint（绘制）
           ↓
      Composite（合成）

3. 重绘和回流的区别？

参考答案：

回流（Reflow）：几何信息变化（位置、尺寸）
重绘（Repaint）：外观变化（颜色、背景）

触发回流的操作：

添加/删除元素
元素位置、尺寸变化
浏览器窗口变化

优化：

使用 transform 代替 top/left
使用 opacity 代替 visibility
批量修改样式

4. 浏览器缓存有哪些？

参考答案：

Memory Cache：内存缓存
Disk Cache：磁盘缓存
Service Worker Cache：离线缓存
Push Cache：HTTP2 push 缓存

HTTP 缓存：

强缓存：Cache-Control、Expires
协商缓存：Last-Modified、ETag

5. 什么是 Event Loop？

参考答案：

┌───────────────────────────┐
│   Microtask Queue         │  ← Promise、async
│   (微任务队列)             │
└───────────────────────────┘
           ↑
           │
┌───────────────────────────┐
│    Call Stack             │  ← 执行代码
│    (调用栈)                │
└───────────────────────────┘
           ↓
           │
┌───────────────────────────┐
│    Task Queue             │  ← setTimeout、I/O
│    (宏任务队列)            │
└───────────────────────────┘

执行顺序：同步代码 → 微任务 → 宏任务

二、性能优化真题

6. 前端性能优化有哪些方法？

参考答案：

加载优化：

减少 HTTP 请求
压缩代码（ gzip/brotli）
使用 CDN
懒加载
代码分割

渲染优化：

减少回流重绘
使用 will-change
虚拟列表

代码优化：

Tree Shaking
代码压缩
图片优化

7. 什么是懒加载？

参考答案：

// 图片懒加载
<img data-src="real-image.jpg"class="lazy" />

const observer = newIntersectionObserver((entries) => {
    entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
});

8. 什么是防抖和节流？

参考答案：

// 防抖 - debounce
functiondebounce(fn, delay) {
let timer;
returnfunction(...args) {
clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

// 节流 - throttle
functionthrottle(fn, delay) {
let last = 0;
returnfunction(...args) {
const now = Date.now();
if (now - last >= delay) {
            last = now;
            fn.apply(this, args);
        }
    };
}

9. 什么是 Webpack 优化？

参考答案：

// webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 10
                }
            }
        },
usedExports: true,
sideEffects: true
    },
plugins: [
newTerserPlugin({
terserOptions: {
compress: {
drop_console: true
                }
            }
        })
    ]
};

10. 首屏加载优化？

参考答案：

减少包体积

Tree Shaking
代码压缩
按需加载

优化资源加载

CDN 加速
预加载关键资源
减少阻塞渲染

SSR/SSG

服务端渲染
预渲染

图片优化

WebP 格式
压缩
懒加载

11. 什么是虚拟列表？

参考答案：

只渲染可视区域的列表项。

classVirtualList {
constructor(container, list, itemHeight) {
this.container = container;
this.list = list;
this.itemHeight = itemHeight;
this.containerHeight = container.clientHeight;
this.render();
    }

render() {
const scrollTop = this.container.scrollTop;
const startIndex = Math.floor(scrollTop / this.itemHeight);
const endIndex = Math.min(
            startIndex + Math.ceil(this.containerHeight / this.itemHeight) + 1,
this.list.length
        );

const visibleItems = this.list.slice(startIndex, endIndex);
const offsetY = startIndex * this.itemHeight;

this.container.innerHTML = visibleItems
            .map((item, i) =>`<div style="height:${this.itemHeight}px">${item}</div>`)
            .join('');

this.container.style.transform = `translateY(${offsetY}px)`;
    }
}

12. 什么是骨架屏？

参考答案：

Loading 期间显示的占位结构。

.skeleton {
background: linear-gradient(90deg, #f0f0f025%, #e0e0e050%, #f0f0f075%);
background-size: 200%100%;
animation: loading 1.5s infinite;
}

@keyframes loading {
0% { background-position: 200%0; }
100% { background-position: -200%0; }
}

13. 什么是预渲染？

参考答案：

// React Snap
// npm install react-snap

// Next.js 预渲染
exportasyncfunctiongetStaticProps() {
const data = awaitfetchData();
return { props: { data } };
}

14. 什么是预加载？

参考答案：

<!-- 预加载关键资源 -->
<linkrel="preload"href="style.css"as="style">
<linkrel="preload"href="main.js"as="script">

<!-- 预连接 -->
<linkrel="preconnect"href="https://api.example.com">

<!-- 预获取 -->
<linkrel="prefetch"href="/next-page">

15. 什么是 Service Worker？

参考答案：

// 注册
if ('serviceWorker'in navigator) {
    navigator.serviceWorker.register('/sw.js');
}

// sw.js
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1').then((cache) => {
return cache.addAll(['/', '/index.html']);
        })
    );
});

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

16. 浏览器缓存策略？

参考答案：

// 强缓存
Cache-Control: max-age=3600, s-maxage=86400

// 协商缓存
Last-Modified: Wed, 21Oct202507:28:00GMT
ETag: "33a64df551425fcc55e4d42a1487957799f"

// 缓存策略
const cacheStrategy = {
static: 'cache-first',
api: 'network-first',
image: 'cache-first'
};

17. 图片优化方案？

参考答案：

格式选择：WebP > AVIF > PNG > JPEG
压缩：TinyPNG
响应式：srcset

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

18. CSS 性能优化？

参考答案：

使用 transform 代替 top/left
使用 will-change 优化动画
避免复杂的 CSS 选择器
提取关键 CSS
使用 GPU 加速

/* GPU 加速 */
.transform {
transform: translateZ(0);
will-change: transform;
}

19. JS 性能优化？

参考答案：

// 避免循环中的 DOM 操作
// 不好
for (let i = 0; i < 1000; i++) {
    div.innerHTML += '<span>...</span>';
}

// 好
const fragments = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    fragments.appendChild(span);
}
div.appendChild(fragments);

// 事件委托
parent.addEventListener('click', (e) => {
if (e.target.matches('.item')) {
// 处理
    }
});