对话框方法：
1. 列举 Window 对象提供的三种对话框方法，并说明它们各自的用途和区别。
alert()：显示警告消息，只有确定按钮
confirm()：显示确认对话框，有确定和取消按钮，返回布尔值
prompt()：显示输入对话框，可获取用户输入内容
2. 为什么在现代前端开发中不推荐使用这些对话框方法？
会阻塞JavaScript执行和页面渲染
外观无法自定义，与网站风格不协调
用户体验差，现代UI倾向于使用自定义模态框
某些浏览器在非用户触发时可能阻止显示
定时器方法：
1. 请解释 setTimeout 和 setInterval 的区别，并写出清除它们的对应方法。
setTimeout：在指定的延迟时间后执行一次函数
const timerId = setTimeout(() => console.log('执行一次'), 1000);
clearTimeout(timerId); // 清除
setInterval：每隔指定的时间间隔重复执行函数
const intervalId = setInterval(() => console.log('重复执行'), 1000);
clearInterval(intervalId); // 清除
2. 什么是"零延时 setTimeout"（setTimeout(fn, 0)）？它有什么实际应用场景？
“零延时”并不是立即执行，而是将回调放入事件队列，等待当前执行栈清空后立即执行。
应用场景：
将耗时操作拆分为多个任务，避免阻塞UI渲染
在DOM更新后执行某些操作
处理事件冒泡时的执行顺序问题
窗口控制：
1. 如何使用 Window 方法打开一个新窗口？如何确保它在大多数浏览器中不会被弹出拦截器阻止？
打开新窗口
const newWindow = window.open('https://www.html20.com', '_blank', 'width=500,height=500');
避免被拦截的方法：
必须在用户点击事件处理程序中直接调用
不要异步调用（如setTimeout内）
不要在一个事件处理程序中打开多个窗口
2. window.open() 方法的返回值是什么？如何通过这个返回值控制新打开的窗口？
返回新窗口的引用"newWindow"，可通过它控制新窗口：
if(newWindow) {
newWindow.close(); // 关闭窗口
newWindow.moveTo(100, 100); // 移动窗口
}
滚动控制：
1. 列举三种控制窗口滚动行为的 Window 方法，并简要说明它们的作用。
scrollTo(x, y)：滚动到指定坐标
scrollBy(x, y)：相对当前位置滚动
scroll(options)：支持平滑滚动的现代方法
2. 如何实现平滑滚动到页面顶部的功能？请写出代码示例。
window.scrollTo({
top: 0,
behavior: 'smooth'
});
请求动画帧：
1. requestAnimationFrame 相比 setTimeout 或 setInterval 实现动画有什么优势？
与浏览器刷新率同步（通常60fps），动画更流畅
当页面不可见时会自动暂停，节省资源
浏览器会优化执行，性能更好
2. 请写出使用 requestAnimationFrame 实现一个简单动画的代码框架。
function animate() {
// 更新动画状态
element.style.left = `${position}px`;
position += 1;
if(position < 100) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
事件监听：
1. window.addEventListener 和直接给 window.onEvent 赋值有什么区别？
addEventListener 可以添加多个监听器，onEvent 会覆盖
addEventListener 可以控制捕获/冒泡阶段
addEventListener 更易于移除特定监听器
2. 如何监听浏览器窗口大小变化事件？请写出代码示例。
window.addEventListener('resize', () => {
console.log(`窗口大小: ${window.innerWidth}x${window.innerHeight}`);
});
存储相关：
1. window.localStorage 和 window.sessionStorage 有什么区别？
localStorage：持久存储，关闭浏览器后仍存在
sessionStorage：会话级存储，关闭标签页后清除
两者都有相同的API（setItem/getItem/removeItem）
2. 如何监听其他标签页对 localStorage 的修改？
window.addEventListener('storage', (event) => {
console.log('存储变化:', event.key, event.newValue);
});
跨窗口通信：
1. 如何实现同源策略下不同窗口/标签页之间的通信？
使用postMessage方法：
// 发送消息
otherWindow.postMessage('消息内容', 'https://example.com');
// 接收消息
window.addEventListener('message', (event) => {
if(event.origin !== 'https://www.html20.com') return;
console.log('收到消息:', event.data);
});
2. window.postMessage 方法的安全注意事项有哪些？
始终验证event.origin，防止恶意网站发送消息
指定精确的目标origin，不要使用*（除非必要）
对接收的数据进行验证和清理
性能相关：
1. window.performance 对象提供了哪些有用的前端性能测量方法？
performance.now()：高精度时间戳
performance.mark()：创建性能标记
performance.measure()：测量两个标记间的时间
performance.getEntries()：获取资源加载性能数据
2. 如何使用这些方法来测量页面加载时间？
window.addEventListener('load', () => {
const timing = performance.timing;
const loadTime = timing.loadEventEnd - timing.navigationStart;
console.log(`页面加载时间: ${loadTime}ms`);
});
综合应用：
设计一个功能：当用户离开当前页面时（包括关闭标签页、刷新页面或导航到其他页面），弹出一个确认对话框提示用户"您确定要离开吗？"。请写出实现代码并说明可能的问题和限制。
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = '您确定要离开吗？';
return '您确定要离开吗？';
});
问题和限制：
现代浏览器会忽略自定义消息，显示统一提示
不能完全阻止用户离开，只是提示
某些浏览器可能限制非用户交互触发的提示
可能干扰用户体验，应谨慎使用
上一篇：前端学习笔记
下一篇：没有了！