本教程旨在解决JavaScript中同步XMLHttpRequest导致的性能问题及废弃警告。我们将详细介绍如何将同步请求转换为异步XMLHttpRequest，并推荐使用更现代、基于Promise的Fetch API来高效获取HTTP头部信息，避免主线程阻塞，从而显著提升用户体验和页面响应速度。
在web开发中，我们经常需要从服务器获取数据或文件信息。早期javascript通过xmlhttprequest（xhr）对象提供了这一能力。然而，不当使用xhr，特别是以同步模式（synchronous mode）发起请求，会导致严重的性能问题和用户体验下降。浏览器会因此发出“synchronous xmlhttprequest on the main thread is deprecated”的警告，因为这种操作会阻塞浏览器主线程，使得页面在此期间无法响应用户输入或更新ui。本文将深入探讨同步xhr的弊端，并提供两种将http请求异步化的解决方案：基于事件的异步xhr和更现代的fetch api。
同步XMLHttpRequest的弊端
原始代码中，fetchHeader函数通过req.open(“HEAD”, url, false);发起了一个同步的HTTP HEAD请求。这里的第三个参数false明确指示了请求是同步的。这意味着在请求完成并返回响应之前，JavaScript的执行会被暂停，浏览器主线程被完全阻塞。当请求耗时较长（例如网络延迟或服务器响应慢）时，用户会感觉到页面“卡顿”甚至“无响应”，严重影响用户体验。
此外，原始代码使用window.setInterval每2.5秒调用一次fetchHeader。虽然setInterval本身是异步的，但它内部调用的fetchHeader是同步的，这意味着每隔2.5秒，页面都会经历一次短暂的卡顿。在多个窗口同时运行此类代码时，这种卡顿感会更加明显。
解决方案一：异步XMLHttpRequest
将同步XHR转换为异步XHR的核心在于利用其事件机制。当XHR请求以异步模式（默认即为异步，即open()方法的第三个参数为true或省略）发送时，请求会在后台进行，而JavaScript代码可以继续执行。当请求状态发生变化或完成时，XHR对象会触发相应的事件，我们通过监听这些事件来处理响应。
以下是使用异步XMLHttpRequest获取文件Last-Modified头部的示例代码：
const pageload = new Date(); // 页面加载时间const url = "Akut.txt"; // 目标文件URLconst whichHeader = "Last-Modified"; // 需要获取的HTTP头部/** * 比较文件最后修改时间与当前时间，并更新UI * @param {number} time - 文件最后修改时间的Unix时间戳 */const compareTimeToNow = (time) => { let d = new Date(); // 当前时间 let diffSec = Math.round((d - time) / 1000); // 计算时间差（秒） document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 更新页面显示 // 特定业务逻辑：如果页面加载超过10秒且文件在5秒内有修改，则刷新页面 if ((d - pageload) / 1000 > 10 && diffSec { const req = new XMLHttpRequest(); req.addEventListener("load", reqListener); // 监听load事件 req.open("HEAD", url); // 默认是异步请求 req.send(); // 发送请求};// 页面加载后立即发起第一次请求getHeader();
代码解析：
异步模式: req.open(“HEAD”, url); 中省略了第三个参数，默认为true，表示异步请求。事件监听: 使用 req.addEventListener(“load”, reqListener); 替代了同步模式下的直接返回值。load事件在XHR请求成功完成时触发，此时可以在reqListener函数中安全地访问this.getResponseHeader()。回调函数: reqListener作为一个回调函数，在请求完成后被执行，它负责获取Last-Modified头部并调用compareTimeToNow进行后续处理。定时器管理: 关键的改进在于将setTimeout(getHeader, 2500)放在了compareTimeToNow函数的else分支中。这意味着只有当前一次请求处理完毕后（即compareTimeToNow被调用），才会设置下一次请求的定时器。这避免了setInterval可能导致的请求重叠问题，确保了每次请求都能独立完成。
解决方案二：推荐方案——使用Fetch API
Fetch API是现代浏览器提供的一种更强大、更灵活的替代XMLHttpRequest的API，它基于Promise，使得异步操作的链式调用和错误处理更加简洁和直观。Fetch API是处理HTTP请求的未来趋势。
以下是使用Fetch API实现相同功能的示例代码：
const pageload = new Date(); // 页面加载时间const url = "Akut.txt"; // 目标文件URLconst whichHeader = "Last-Modified"; // 需要获取的HTTP头部/** * 比较文件最后修改时间与当前时间，并更新UI * @param {number} time - 文件最后修改时间的Unix时间戳 */const compareTimeToNow = (time) => { let d = new Date(); // 当前时间 let diffSec = Math.round((d - time) / 1000); // 计算时间差（秒） document.getElementById("time").textContent = Math.trunc(diffSec / 60) + " minutes"; // 更新页面显示 // 特定业务逻辑：如果页面加载超过10秒且文件在5秒内有修改，则刷新页面 if ((d - pageload) / 1000 > 10 && diffSec { fetch(url, { method: 'HEAD' }) // 发起HEAD请求 .then(rsp => { // 响应对象rsp的headers属性是一个Headers对象，使用get方法获取指定头部 compareTimeToNow(new Date(rsp.headers.get(whichHeader)).getTime()); }) .catch(error => { // 错误处理，例如网络错误或请求失败 console.error("Fetch request failed:", error); // 即使失败，也尝试在2.5秒后再次发起请求，防止死循环 setTimeout(getHeader, 2500); });};// 页面加载后立即发起第一次请求getHeader();
代码解析：
简洁的API: fetch(url) 返回一个Promise，当响应可用时，Promise会被解析为一个Response对象。获取头部: rsp.headers.get(whichHeader) 是获取HTTP头部信息的推荐方式。rsp.headers是一个Headers对象，提供了get()方法来方便地访问头部。Promise链式调用: .then() 方法用于处理成功的响应，.catch() 方法用于捕获请求或处理过程中发生的错误，使得异步代码的结构更加清晰。请求类型: 默认情况下，fetch发起的是GET请求。为了模拟HEAD请求（只获取头部，不下载内容），需要额外传递一个配置对象 { method: ‘HEAD’ }。浏览器兼容性: Fetch API在现代浏览器中得到了广泛支持（Chrome 42+, Edge 14+, Safari 10.1+, Firefox 39+, Opera 29+），但不支持IE浏览器。对于需要兼容IE的环境，可能仍需使用XMLHttpRequest或引入polyfill。
注意事项与最佳实践
异步优先: 始终优先使用异步HTTP请求，避免阻塞主线程，以提供流畅的用户体验。错误处理: 在异步请求中，错误处理至关重要。无论是XHR的onerror事件还是Fetch API的.catch()方法，都应妥善处理网络问题、服务器错误等异常情况。请求频率: 对于需要定期检查文件更新的场景，使用setTimeout在每次请求完成后调度下一次请求，比使用setInterval更安全可靠。这可以防止在网络状况不佳时，请求堆积导致性能问题。HEAD请求: 如果只需要获取文件的元信息（如最后修改时间、文件大小等），使用HEAD方法而不是GET方法。HEAD请求只返回HTTP头部，不返回响应体，从而减少了网络传输量，提高了效率。缓存: 浏览器可能会缓存HTTP响应。如果需要确保每次都获取到最新的文件信息，可以考虑在URL中添加一个不重复的查询参数（如时间戳）来绕过缓存，例如Akut.txt?_t=${new Date().getTime()}。
总结
通过将同步XMLHttpRequest转换为异步模式，并更进一步地采用现代的Fetch API，我们不仅消除了浏览器控制台的警告，更重要的是显著提升了Web应用的响应性和用户体验。Fetch API以其基于Promise的简洁语法和强大的功能，正逐渐成为Web开发中处理HTTP请求的首选。在未来的开发中，应积极拥抱这些异步编程范式，构建高性能、用户友好的Web应用程序。
以上就是异步处理XMLHttpRequest：告别同步阻塞，提升Web应用性能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515626.html
微信扫一扫 
支付宝扫一扫 
