前端核心面试题，涵盖 ES6 新特性、跨域解决方案、Vue2 与 Vue3 响应式原理对比、v-if 与 v-show 差异、网页加载优化策略（含 Core Web Vitals）、浏览器渲染流程、节流防抖实现、闭包应用、事件循环机制、TypeScript 装饰器以及大数据量展示优化方案（虚拟列表与时间切片）。内容旨在帮助开发者系统复习前端基础知识与进阶性能优化技巧。
// 1. let 和 const - 块级作用域
x = ;
y = ;
= () => a + b;
name = ;
greeting = ;
[a, b] = [, ];
{ name, age } = { : , : };
() {
;
}
arr1 = [, ];
arr2 = [...arr1, , ];
obj1 = { : };
obj2 = { ...obj1, : };
x = , y = ;
point = { x, y };
promise = ( {
( (), );
});
() {
data = promise;
data;
}
{
() {
. = name;
}
() {
;
}
() {
(name);
}
}
import/exportfunction*?.（ES2020）??（ES2020）// 同源条件：协议、域名、端口必须完全相同
// http://example.com:80 ≠ https://example.com:80 (协议不同)
// http://example.com:80 ≠ http://api.example.com:80 (域名不同)
// http://example.com:80 ≠ http://example.com:8080 (端口不同)
// 服务器设置响应头
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', 'true'); // 允许携带 cookie
// 简单请求 vs 预检请求
// 简单请求：GET/HEAD/POST，Content-Type 为特定值
// 预检请求：非简单请求前会发送 OPTIONS 请求
// 客户端
function handleResponse(data) {
console.log(data);
}
// 动态创建 script 标签
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
// 服务器响应
handleResponse({ data: "some data" });
// 开发环境代理（webpack 配置）
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
};
// WebSocket 不受同源策略限制
const socket = new WebSocket('ws://api.example.com');
# nginx 配置
location /api/ {
proxy_pass http://api.example.com/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
// 1. 重写数组方法
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
methodsToPatch.forEach(function(method) {
const original = arrayProto[method];
Object.defineProperty(arrayMethods, method, {
value: function(...args) {
const result = original.apply(this, args);
const ob = this.__ob__; // 获取新增的元素
let inserted;
switch(method) {
case 'push':
case 'unshift': inserted = args; break;
case 'splice': inserted = args.slice(2); break;
}
// 对新增元素进行响应式处理
if(inserted) ob.observeArray(inserted);
// 通知依赖更新
ob.dep.notify();
return result;
},
enumerable: false,
writable: true,
configurable: true
});
});
// 2. 替换数组的原型
const arr = [1, 2, 3];
Object.setPrototypeOf(arr, arrayMethods);
// 使用 Proxy 代理整个数组
function reactiveArray(arr) {
return new Proxy(arr, {
get(target, key) {
// 处理数组的特殊情况
if(key === 'length') return target.length;
const value = target[key];
// 如果访问的是方法，绑定正确的 this
if(typeof value === 'function') {
return value.bind(target);
}
return value;
},
set(target, key, value, receiver) {
const oldValue = target[key];
// 设置属性值
const result = Reflect.set(target, key, value, receiver);
// 判断是新增还是修改
const type = Number(key) < target.length ? 'SET' : 'ADD';
// 触发更新
if(type === 'ADD' || oldValue !== value) {
trigger(target, key, type);
}
return result;
}
});
}
<template>
<!-- v-if：条件渲染 -->
<div v-if="show">使用 v-if</div>
<!-- v-show：条件显示 -->
<div v-show="show">使用 v-show</div>
</template>
<script>
export default {
data() {
return {
show: true
};
}
};
</script>
| 特性 | v-if | v-show |
|---|---|---|
| DOM 操作 | 条件为 false 时，元素从 DOM 移除 | 元素始终在 DOM 中，只切换 display 属性 |
| 编译/卸载 | 切换时触发组件的生命周期钩子 | 不触发生命周期钩子 |
| 性能 | 初始渲染开销小，切换开销大 | 初始渲染开销大，切换开销小 |
| 使用场景 | 不频繁切换，条件很少改变 | 频繁切换，需要保持状态 |
| 配合使用 | 可与 v-else、v-else-if 配合 | 没有配套指令 |
// v-if 的编译结果
function render() {
return show ? createElement('div', 'v-if 内容') : createEmptyVNode();
}
// v-show 的编译结果
function render() {
return createElement('div', {
directives: [{ name: 'show', value: show }],
style: { display: show ? '' : 'none' }
}, 'v-show 内容');
}
// 代码分割
const LazyComponent = () => import('./LazyComponent.vue');
// 路由懒加载
const routes = [
{ path: '/home', component: () => import('./views/Home.vue') }
];
// Webpack 配置优化
module.exports = {
optimization: {
splitChunks: {
chunks: 'all', // 代码分割
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors'
}
}
}
}
};
<!-- 图片优化 -->
<img src="image.jpg"
srcset="image-320w.jpg 320w, image-480w.jpg 480w"
sizes="(max-width: 600px) 480px, 800px"
loading="lazy" <!-- 懒加载 -->
alt="描述文本">
<!-- 预加载关键资源 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.html"> <!-- 预取 -->
// Service Worker 缓存
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll(['/', '/styles/main.css', '/script/main.js']);
})
);
});
# 命令行使用
npx lighthouse https://example.com --view
# 生成报告
npx lighthouse https://example.com --output=json --output-path=report.json
// HTML → DOM 树
// <html> → DOM 节点
// <body> → DOM 节点
// <div> → DOM 节点
/* CSS → CSSOM 树 */
body {
font-size: 16px;
}
div {
color: red;
}
// 计算每个元素的位置和大小
// 触发重排的操作：
element.style.width = '100px';
element.style.height = '200px';
window.getComputedStyle(element);
// 填充像素
// 触发重绘的操作：
element.style.color = 'red';
element.style.backgroundColor = '#fff';
// GPU 加速的图层合成
element.style.transform = 'translateX(100px)'; // 触发合成层
// 避免强制同步布局
function badExample() {
// 读取 → 写入 → 读取 → 写入
const width = element.offsetWidth; // 触发重排
element.style.width = width + 10 + 'px'; // 触发重排
}
function goodExample() {
// 读取 → 读取 → 写入 → 写入
const width = element.offsetWidth;
const height = element.offsetHeight;
element.style.width = width + 10 + 'px';
element.style.height = height + 10 + 'px';
}
// 原理：在事件被触发 n 秒后再执行，如果在这 n 秒内又被触发，则重新计时
function debounce(fn, delay) {
let timer = null;
return function(...args) {
const context = this;
// 清除之前的定时器
clearTimeout(timer);
// 设置新的定时器
timer = setTimeout(() => {
fn.apply(context, args);
}, delay);
};
}
// 使用场景：搜索框输入、窗口 resize
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
console.log('搜索：', this.value);
}, 500));
// 原理：规定在一个单位时间内，只能触发一次函数
// 时间戳实现
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
const context = this;
if(now - lastTime >= delay) {
fn.apply(context, args);
lastTime = now;
}
};
}
// 定时器实现
function throttle(fn, delay) {
let timer = null;
let lastArgs = null;
return function(...args) {
lastArgs = args;
if(!timer) {
timer = setTimeout(() => {
fn.apply(this, lastArgs);
timer = null;
}, delay);
}
};
}
// 使用场景：滚动加载、按钮点击
window.addEventListener('scroll', throttle(function() {
console.log('滚动位置：', window.scrollY);
}, 100));
function enhancedThrottle(fn, delay, options = {}) {
const { leading = true, trailing = true } = options;
let timer = null;
let lastTime = 0;
let lastArgs = null;
return function(...args) {
const context = this;
const now = Date.now();
// 计算剩余时间
const remaining = delay - (now - lastTime);
// 更新参数
lastArgs = args;
if(remaining <= 0) {
// 时间到了，执行函数
if(timer) {
clearTimeout(timer);
timer = null;
}
if(leading) {
fn.apply(context, args);
}
lastTime = now;
} else if(!timer && trailing) {
// 设置定时器，确保最后一次执行
timer = setTimeout(() => {
fn.apply(context, lastArgs);
timer = null;
lastTime = Date.now();
}, remaining);
}
};
}
// 闭包：能够访问其他函数作用域中变量的函数
function outer() {
const name = "John"; // 局部变量
function inner() {
console.log(name); // 访问外部函数的变量
}
return inner; // 返回内部函数
}
const closureFn = outer();
closureFn(); // "John"
function createCounter() {
let count = 0; // 私有变量
return {
increment() { count++; return count; },
decrement() { count--; return count; },
getCount() { return count; }
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
function createMultiplier(multiplier) {
return function(x) {
return x * multiplier;
};
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
const myModule = (function() {
let privateVar = 0;
function privateMethod() { return privateVar; }
return {
publicMethod() {
privateVar++;
return privateMethod();
}
};
})();
console.log(myModule.publicMethod()); // 1
// 闭包可能导致内存泄漏
function leakMemory() {
const largeArray = new Array(1000000).fill('data');
return function() {
console.log('仍然持有 largeArray 的引用'); // largeArray 不会被垃圾回收
};
}
// 解决方案：及时释放引用
function noLeak() {
let largeArray = new Array(1000000).fill('data');
const result = largeArray.length; // 使用完后设为 null
largeArray = null;
return function() {
console.log('不持有 largeArray 的引用');
return result;
};
}
// 负责：DOM 渲染、JavaScript 执行、用户交互
// 注意：JavaScript 是单线程的
console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
// 输出：1, 3, 2（因为有事件循环）
// 微任务（Microtask）vs 宏任务（Macrotask）
console.log('script start'); // 同步任务
setTimeout(() => {
console.log('setTimeout'); // 宏任务
}, 0);
Promise.resolve().then(() => {
console.log('promise1'); // 微任务
}).then(() => {
console.log('promise2'); // 微任务
});
console.log('script end');
// 执行顺序：
// 1. script start
// 2. script end
// 3. promise1
// 4. promise2
// 5. setTimeout
// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: 'Hello' });
worker.onmessage = function(event) {
console.log('收到 worker 消息：', event.data);
};
// worker.js（另一个线程）
self.onmessage = function(event) {
const result = heavyComputation(event.data);
self.postMessage(result);
};
function heavyComputation(data) {
// 耗时操作
return data.toUpperCase();
}
| 特性 | Vue2 | Vue3 |
|---|---|---|
| 响应式原理 | Object.defineProperty | Proxy |
| Composition API | Options API | Composition API + Options API |
| 性能 | 较慢 | 更快（打包体积小 40%） |
| TypeScript 支持 | 一般 | 完善 |
| Fragment | 不支持 | 支持多根节点 |
| Teleport | 不支持 | 支持 |
| Suspense | 不支持 | 支持 |
| Tree-shaking | 有限 | 更好的支持 |
// Vue2 响应式
const data = { count: 0 };
Object.defineProperty(data, 'count', {
get() {
console.log('获取 count');
return value;
},
set(newValue) {
console.log('设置 count');
value = newValue;
}
});
// Vue3 响应式
const data = { count: 0 };
const proxy = new Proxy(data, {
get(target, key) {
console.log(`获取${key}`);
return target[key];
},
set(target, key, value) {
console.log(`设置${key}`);
target[key] = value;
return true;
}
});
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref, computed, onMounted } from 'vue';
export default {
setup() {
// 响应式数据
const count = ref(0);
// 计算属性
const doubleCount = computed(() => count.value * 2);
// 方法
function increment() {
count.value++;
}
// 生命周期
onMounted(() => {
console.log('组件已挂载');
});
return { count, doubleCount, increment };
}
};
</script>
// Vue3 的静态提升
const _hoisted_1 = { id: "app" };
// 静态节点提升
const _hoisted_2 = /*#__PURE__*/createVNode("div", null, "静态内容");
// Vue3 的 Patch Flag
const vnode = {
type: 'div',
props: { id: 'app', class: 'container' },
children: [
{ type: 'span', children: '动态内容', patchFlag: 1 /* TEXT */ }
]
};
// new 关键字的作用
function Person(name) {
this.name = name;
}
const john = new Person('John');
// 模拟 new 的实现
function myNew(constructor, ...args) {
// 1. 创建一个空对象
const obj = {};
// 2. 将对象的原型指向构造函数的 prototype
Object.setPrototypeOf(obj, constructor.prototype);
// 3. 将构造函数的 this 绑定到新对象
const result = constructor.apply(obj, args);
// 4. 如果构造函数返回对象，则返回该对象，否则返回新对象
return result instanceof Object ? result : obj;
}
const john2 = myNew(Person, 'John');
function Animal(name) {
this.name = name;
this.speak = function() {
return `${this.name} makes a noise`;
};
// 如果构造函数返回一个对象，new 表达式会返回这个对象
// return { custom: 'object' };
}
Animal.prototype.eat = function() {
return `${this.name} eats food`;
};
// 使用 new
const animal = new Animal('Dog');
// 等同于
const animal = {};
animal.__proto__ = Animal.prototype;
Animal.call(animal, 'Dog');
const person = {
name: 'John',
greet: function(greeting, punctuation) {
return `${greeting}, ${this.name}${punctuation}`;
}
};
const anotherPerson = { name: 'Jane' };
// call：立即调用，参数逐个传递
person.greet.call(anotherPerson, 'Hello', '!'); // "Hello, Jane!"
// apply：立即调用，参数数组传递
person.greet.apply(anotherPerson, ['Hi', '!!']); // "Hi, Jane!!"
// bind：返回新函数，不立即调用
const boundGreet = person.greet.bind(anotherPerson, 'Hey');
boundGreet('?'); // "Hey, Jane?"
// 实现 call
Function.prototype.myCall = function(context, ...args) {
// 如果 context 是 null 或 undefined，指向全局对象
context = context || window;
// 创建唯一 key，避免属性冲突
const fnKey = Symbol('fn');
// 将函数作为 context 的方法
context[fnKey] = this;
// 执行函数
const result = context[fnKey](...args);
// 删除添加的方法
delete context[fnKey];
return result;
};
// 实现 apply
Function.prototype.myApply = function(context, argsArray = []) {
context = context || window;
const fnKey = Symbol('fn');
context[fnKey] = this;
const result = context[fnKey](...argsArray);
delete context[fnKey];
return result;
};
// 实现 bind
Function.prototype.myBind = function(context, ...bindArgs) {
const originalFn = this;
return function boundFn(...callArgs) {
// 判断是否作为构造函数调用（使用 new）
const isConstructorCall = new.target !== undefined;
if(isConstructorCall) {
// 如果是 new 调用，忽略绑定的 this
return new originalFn(...bindArgs, ...callArgs);
} else {
// 普通调用，使用绑定的 this
return originalFn.apply(context, [...bindArgs, ...callArgs]);
}
};
};
// 1. 借用数组方法处理类数组对象
function sum() {
// arguments 是类数组，没有数组方法
const args = Array.prototype.slice.call(arguments);
return args.reduce((acc, val) => acc + val, 0);
}
// 2. 构造函数继承
function Parent(name) {
this.name = name;
}
function Child(name, age) {
Parent.call(this, name); // 继承属性
this.age = age;
}
// 3. 事件处理函数绑定 this
class Button {
constructor() {
this.text = 'Click me';
// 使用 bind 保持 this 指向
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this.text);
}
}
// 类装饰器
function ClassDecorator(constructor: Function) {
console.log('类装饰器执行');
constructor.prototype.newProperty = 'added by decorator';
}
// 方法装饰器
function MethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(`方法装饰器：${propertyKey}`);
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`调用方法：${propertyKey}`);
return originalMethod.apply(this, args);
};
}
// 属性装饰器
function PropertyDecorator(target: any, propertyKey: string) {
console.log(`属性装饰器：${propertyKey}`);
}
// 参数装饰器
function ParameterDecorator(target: any, propertyKey: string, parameterIndex: number) {
console.log(`参数装饰器：${propertyKey}的第${parameterIndex}个参数`);
}
// 访问器装饰器
function AccessorDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(`访问器装饰器：${propertyKey}`);
}
// 装饰器工厂
function LogDecorator(message: string) {
return function(target: any, propertyKey: string, descriptor?: PropertyDescriptor) {
console.log(`${message}: ${propertyKey}`);
};
}
// 1. 日志装饰器
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`调用 ${propertyKey}，参数：`, args);
const result = originalMethod.apply(this, args);
console.log(`返回结果：`, result);
return result;
};
}
// 2. 自动绑定 this 装饰器
function autobind(_target: any, _propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
const adjustedDescriptor: PropertyDescriptor = {
configurable: true,
enumerable: false,
get() {
// 返回绑定 this 的方法
return originalMethod.bind(this);
}
};
return adjustedDescriptor;
}
// 3. 验证装饰器
function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
// 参数验证逻辑
args.forEach((arg, index) => {
if(arg === undefined || arg === null) {
throw new Error(`参数 ${index} 不能为空`);
}
});
return originalMethod.apply(this, args);
};
}
// 使用示例
class UserService {
private users: string[] = [];
@log
@validate
addUser(@ParameterDecorator name: string) {
this.users.push(name);
return this.users;
}
@autobind
getUsers() {
return this.users;
}
}
<template>
<div ref="container" @scroll="handleScroll">
<!-- 撑开容器，显示滚动条 -->
<div :style="{ height: totalHeight + 'px' }"></div>
<!-- 可视区域内容 -->
<div :style="{ transform: `translateY(${offset}px)` }">
<div v-for="item in visibleData" :key="item.id" :style="{ height: itemHeight + 'px' }">
{{ item.content }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Array, required: true },
itemHeight: { type: Number, default: 50 },
buffer: { type: Number, default: 5 }
},
data() {
return {
startIndex: 0, // 开始索引
endIndex: 0, // 结束索引
offset: 0 // 偏移量
};
},
computed: {
// 总高度
totalHeight() {
return this.data.length * this.itemHeight;
},
// 容器高度
containerHeight() {
return this.$refs.container?.clientHeight || 0;
},
// 可见区域项数
visibleCount() {
return Math.ceil(this.containerHeight / this.itemHeight);
},
// 实际渲染的数据
visibleData() {
const start = Math.max(0, this.startIndex - this.buffer);
const end = Math.min(this.data.length, this.endIndex + this.buffer);
return this.data.slice(start, end);
}
},
mounted() {
this.updateVisibleData();
},
methods: {
handleScroll() {
const scrollTop = this.$refs.container.scrollTop;
// 计算开始索引
this.startIndex = Math.floor(scrollTop / this.itemHeight);
// 计算结束索引
this.endIndex = Math.min(
this.data.length,
this.startIndex + this.visibleCount
);
// 计算偏移量
this.offset = this.startIndex * this.itemHeight;
},
updateVisibleData() {
this.startIndex = 0;
this.endIndex = Math.min(this.data.length, this.visibleCount);
}
}
};
</script>
<style>
.virtual-list-container {
height: 500px;
overflow-y: auto;
position: relative;
}
.virtual-list-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: -1;
}
.virtual-list-content {
position: absolute;
left: 0;
top: 0;
right: 0;
}
.virtual-list-item {
display: flex;
align-items: center;
padding: 0 16px;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
</style>
// 使用 requestAnimationFrame 分批渲染
function renderLargeData(data, container, chunkSize = 100) {
let index = 0;
function renderChunk() {
const fragment = document.createDocumentFragment();
for(let i = 0; i < chunkSize && index < data.length; i++, index++) {
const item = document.createElement('div');
item.textContent = data[index];
fragment.appendChild(item);
}
container.appendChild(fragment);
// 如果还有数据，继续渲染下一批
if(index < data.length) {
requestAnimationFrame(renderChunk);
}
}
renderChunk();
}
// 使用 Web Worker 处理数据
const worker = new Worker('data-processor.js');
worker.postMessage({ action: 'process', data: largeData });
worker.onmessage = function(event) {
const processedData = event.data;
// 在主线程渲染处理后的数据
};
// 使用 requestIdleCallback 实现时间切片
function timeSlicingWork(unitsOfWork) {
let currentIndex = 0;
function doWork(deadline) {
// 在空闲时间内执行工作单元
while(currentIndex < unitsOfWork.length && deadline.timeRemaining() > 0) {
performUnitOfWork(unitsOfWork[currentIndex]);
currentIndex++;
}
// 如果还有工作，继续调度
if(currentIndex < unitsOfWork.length) {
requestIdleCallback(doWork);
} else {
console.log('所有工作完成');
}
}
requestIdleCallback(doWork);
}
// React 中的时间切片实现（简化版）
function workLoop(deadline) {
let shouldYield = false;
while(nextUnitOfWork && !shouldYield) {
// 执行工作单元
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
// 检查是否需要让出控制权
shouldYield = deadline.timeRemaining() < 1;
}
// 如果还有工作，继续调度
if(nextUnitOfWork) {
requestIdleCallback(workLoop);
}
}
requestIdleCallback(workLoop);
// 1. 大数据处理
function processBigData(data, processItem, chunkSize = 100) {
return new Promise((resolve) => {
let index = 0;
const results = [];
function processChunk(deadline) {
while(index < data.length && deadline.timeRemaining() > 0) {
const chunk = data.slice(index, index + chunkSize);
// 处理数据块
for(const item of chunk) {
results.push(processItem(item));
}
index += chunkSize;
// 更新进度
updateProgress((index / data.length) * 100);
}
if(index < data.length) {
// 还有数据，继续处理
requestIdleCallback(processChunk);
} else {
// 处理完成
resolve(results);
}
}
requestIdleCallback(processChunk);
});
}
// 2. 长列表渲染优化
class VirtualScroller {
constructor(container, items, renderItem) {
this.container = container;
this.items = items;
this.renderItem = renderItem;
this.renderedItems = new Set();
}
renderVisibleItems() {
const visibleRange = this.getVisibleRange();
const itemsToRender = [];
for(let i = visibleRange.start; i < visibleRange.end; i++) {
if(!this.renderedItems.has(i)) {
itemsToRender.push(i);
}
}
// 使用时间切片分批渲染
this.renderWithTimeSlice(itemsToRender);
}
renderWithTimeSlice(itemIndices) {
let index = 0;
const renderBatch = (deadline) => {
while(index < itemIndices.length && deadline.timeRemaining() > 0) {
const itemIndex = itemIndices[index];
const item = this.items[itemIndex];
// 渲染单个项目
const element = this.renderItem(item, itemIndex);
this.container.appendChild(element);
this.renderedItems.add(itemIndex);
index++;
}
if(index < itemIndices.length) {
requestIdleCallback(renderBatch);
}
};
requestIdleCallback(renderBatch);
}
}
// React 18+ 中的并发特性
import { startTransition, useDeferredValue } from 'react';
function SearchResults({ query }) {
const deferredQuery = useDeferredValue(query);
return (
<div>
<SlowList query={deferredQuery}/>
</div>
);
}
// 在事件处理中使用 startTransition
function handleChange(e) {
setInput(e.target.value);
// 将 setQuery 标记为过渡更新
startTransition(() => {
setQuery(e.target.value);
});
}
// 这会告诉 React 这个更新不是紧急的，可以被中断
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online