javascript - 哪些代码将在浏览器的主线程上运行?

标签 javascript browser xmlhttprequest

Chrome 是三巨头(IE、Firefox、Chrome)中最后一个反对在“主线程”(Firefox 称之为)上运行同步 XMLHttpRequest 调用的。一些浏览器还完全取消了在主线程上为同步请求设置 .widthCredentials 选项的能力。

广泛搜索后,我找不到足够的信息来准确识别哪些代码将在主线程上运行,哪些不会。

很明显,通过脚本标签(内联或带有 src)包含的 javascript 在主线程上。 在异步 XHR 的回调中运行的同步 XHR 不会在主线程上运行。

但是其他场景呢?鼠标事件、触摸事件、各种文档事件?不尝试一切怎么知道?最好避免让一切都变得异步和回调 hell 。

请尝试彻底回答。

编辑: W3C spec warning : 当 JavaScript 全局环境是文档环境时,开发人员不得为异步参数传递 false,因为它会对最终用户的体验产生不利影响。强烈建议用户代理在开发人员工具中警告此类用法,并可能会尝试在发生时抛出“InvalidAccessError”异常,以便最终从平台中删除该功能。

编辑 2: 澄清:

在某些情况下,调用代码必须等待所有竞速同步异步调用完成(对每个调用使用一些计数器或状态跟踪变量),或者使用回调将它们链接起来。每种情况都很糟糕。例如,我有一个 JSONRPC 客户端,它需要通过询问反射 API 来动态创建可调用函数。

让所有实现代码(UI 或 NOT)都在另一个库的回调中运行,特别是如果它必须在多个页面上完成,并且如果库必须表现得像一个简单的定义(隐藏在定义时间运行的代码)。 这只是复杂性的一个例子,我并不是要解决它,而是要对浏览器如何决定哪个是主线程有一个大致清晰的解释。

最佳答案

正如您引用的 W3C spec , 很容易解释你在寻找什么:

Developers must not pass false for the async argument when the JavaScript global environment is a document environment as it has detrimental effects to the end user's experience.

文档环境 的含义在 processing models 中有解释。 :

This specification describes three kinds of JavaScript global environments: the document environment, the dedicated worker environment, and the shared worker environment. The dedicated worker environment and the shared worker environment are both types of worker environments.

Except where otherwise specified, a JavaScript global environment is a document environment.

因此,“文档环境”是页面的全局 JavaScript 环境,即您看到的 window。每个JS全局环境都是single-threaded .一切(实际上一切,你考虑过:鼠标事件、触摸事件、各种文档事件)都在这个环境中运行。这可能是 Gecko 认为的“主线程”。

It would be nice to avoid making everything asynchronous and a callback hell

使某些东西异步并不会从主线程转移工作。它只是推迟它,使其他事件有可能在您等待时运行。如果你想做的事情有一个异步 api(即在后台进行处理),请使用它。使一切异步。

有足够的技术(例如 promises!)可以避免回调 hell ,回调 hell 只是错误代码的标志。

将工作移出“主线程”需要您创建一个新环境 - 网络 worker 。这样一来,您可以不受干扰地执行任意数量的同步 XMLHttpRequest。

关于javascript - 哪些代码将在浏览器的主线程上运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25755089/

相关文章:

android - 在 chrome 的最后一个打开的选项卡中打开 url

javascript - cURL 到 xmlhttprequest

javascript - 如何创建构造函数?

javascript - reactjs 的 jsx 中的 es6 对象扩展运算符

javascript - 用 HTML 渲染 4000 张图像?

javascript - 如何打开新的浏览器选项卡?

google-chrome - 使用Typekit加载网页时加载会卡住计算机

java - 如何让XMLHttpRequest在IE中不缓存

ajax - 如何使用 Node.js 和 Express 异步加载和显示网页内容?

Javascript 'NaN' 计算