GraphQL是一种更高效、灵活的API设计方式，核心是客户端按需精确请求数据，解决REST的过度和不足获取问题。它通过单一端点和强类型Schema，支持声明式查询、变动（Mutation）修改数据、订阅（Subscription）实现实时通信，提升前后端协作与开发效率，适合复杂、多变的前端需求场景。

mounted钩子在Vue组件挂载到DOM后触发，用于执行依赖DOM的操作。1.初始化需DOM的第三方库（如ECharts、地图SDK）；2.直接操作DOM元素（推荐使用ref而非querySelector）；3.发送依赖DOM尺寸的请求；4.设置全局事件监听器（须在beforeUnmount中清理以防内存泄漏）。与created区别在于：created无DOM访问权限，适合早于DOM阶段的数据请求；mounted有DOM访问权（this.$el、this.$refs），适合需真实DOM的逻辑。数据请求优

offsetWidth和clientWidth的区别在于是否包含边框和滚动条。1.offsetWidth包含内容、内边距、边框及滚动条宽度，反映元素总物理尺寸；2.clientWidth仅包含内容和内边距，不包括边框和滚动条，表示可视区域大小。此外，getBoundingClientRect()能获取考虑CSStransform后的视口位置和尺寸，适用于动画和交互计算；getComputedStyle()用于获取最终计算的CSS属性值，适合读取样式细节。选择不同属性取决于具体需求：offsetWidth适

textarea用于创建多行文本输入框，适合用户输入长文本内容。它与input标签不同，支持换行和大段文字输入；使用时需配合id、name、rows、cols等属性控制外观和行为；name属性是表单提交数据的关键；可通过CSS设置大小及调整方式（如resize、width、height）；提交到服务器时需注意换行符处理、XSS安全防护及字符长度限制；推荐结合label标签提升可访问性。

dropWhile是一个非原生但实用的数组操作方法，用于从数组开头移除满足条件的元素，直到遇到第一个不满足条件的元素为止，之后保留剩余所有元素。1.它与filter的核心区别在于：filter全局遍历并保留所有符合条件的元素，而dropWhile仅从开头连续移除，一旦条件不满足即停止；2.实现方式是通过while循环找到第一个不满足条件的索引，再用slice截取后续元素，时间复杂度为O(n)；3.适用场景包括日志解析、数据流预处理和UI状态管理等需要跳过前导“噪音”的情况；4.性能优化可考虑生成器函数实现

单选按钮的正确使用方法是设置相同的name属性以实现互斥选择，并配合label提升可访问性。1.name属性是分组的核心，确保同一组选项只能选一个；2.label与id关联，增强点击体验和无障碍支持；3.使用fieldset和legend进行语义化分组，提升可读性和可访问性；4.可通过JavaScript实现动态显示和验证逻辑，提升交互体验；5.CSS用于优化视觉布局，使选项排列更合理美观。这些技巧从功能、交互到设计层面共同保障了表单的有效性和用户体验。

progress标签的核心用途是展示任务完成进度，它通过value和max属性显示确定进度，或省略value以呈现不确定状态的动画；动态更新需结合JavaScript，在AJAX等场景中监听progress事件，获取loaded和total计算百分比后实时赋值给value属性，从而让用户看到进度变化；自定义样式可通过CSS伪元素实现，WebKit浏览器使用::-webkit-progress-bar和::-webkit-progress-value，Firefox使用::-moz-progress-bar

IntersectionObserverAPI用于异步观察元素与视口的交叉状态，适用于懒加载图像和无限滚动等。使用步骤包括：1)创建IntersectionObserver实例，设置回调函数和阈值；2)选择目标元素并开始观察；3)在元素进入视口时执行操作，如加载图片；4)优化时可批量处理和及时取消观察，提升性能；5)考虑兼容性问题，使用polyfill解决。

HTML分页对网站性能和用户体验有显著影响，主要体现在：1.性能方面，服务器端分页能有效减少每次加载的数据量，提升首屏渲染速度，降低客户端负担，尤其适合海量数据；而客户端分页若内容过大，虽实现视觉分页，但初始加载时间长，影响整体性能。2.用户体验方面，分页可避免无限滚动带来的疲劳感，提供清晰导航，但每页数据过少会导致频繁点击，降低满意度；因此需合理设置每页数据量，或结合“加载更多”按钮与无限滚动以平衡流畅性与可控性。3.此外，服务器端分页利于SEO，因每页有独立URL，而客户端分页和SPA需额外处理才能保

Promise.resolve()本身是同步的，它立即返回一个已解决的Promise对象；2.真正产生微任务的是其后调用的.then()、.catch()或.finally()注册的回调，这些回调会被加入微任务队列，在当前同步代码执行完后、下一轮事件循环前执行；3.微任务优先级高于宏任务（如setTimeout），确保Promise回调能尽快执行，保证数据一致性和响应及时性；4.其他微任务来源包括MutationObserver、queueMicrotask()及Node.js中的process.next

使用CSS的vertical-align属性实现HTML表格中文本垂直居中对齐。具体做法是为表格单元格（<td>或<th>）设置vertical-align:middle;样式，确保内容在单元格内垂直居中显示；2.推荐通过内部或外部样式表定义CSS规则，以提升可维护性和代码清晰度，避免使用已被废弃的HTML属性如align和valign；3.对于复杂布局需求，可以结合text-align控制水平对齐、flex布局管理多元素排列、padding调整内容间距，以及white-space

答案：通过WebVibrationAPI可在HTML表单中实现震动反馈。在表单提交或验证失败时，JavaScript调用navigator.vibrate()触发震动，如震动200毫秒或自定义模式[100,30,100]。需监听用户事件（如submit），并在支持时执行，同时兼容iOS限制与桌面无效问题，结合视觉反馈并遵循渐进增强原则。

现代Web开发倾向于使用ESM而非传统脚本，原因包括：1.作用域隔离，避免全局变量污染；2.明确的依赖管理，自动解析模块顺序；3.默认异步加载，提升页面性能；4.支持严格模式和CORS；5.支持TreeShaking优化代码体积。

本文旨在帮助开发者解决React项目中，从MongoDB获取数据后，出现"TypeError:Cannotreadproperty'map'ofundefined"错误的问题。通过分析错误原因，提供代码示例和详细的解决方案，确保数据在渲染前正确加载，避免空数据调用map方法。

在JavaScript中实现WebSocket通信可以通过WebSocketAPI来完成。1)创建WebSocket连接：使用newWebSocket('ws://example.com/socketserver')。2)设置事件处理器：包括onopen、onmessage、onclose和onerror。3)实现重连机制：在连接关闭时使用setTimeout重新调用连接函数。4)确保消息可靠性：使用消息ID和确认机制。5)优化性能：考虑使用二进制数据传输和WebSocketSecure协议。