Firefox 文章
-
在 Firefox 中加速 Vue.js 执行
在过去的一年里，Firefox 在 Vue.js 上的性能有了显著提升。最近，我们通过 Proxy 优化加速了响应式。此更改已在 Firefox 118 中发布，因此它目前处于 Beta 阶段，将在 9 月底之前进入正式版本。
-
Firefox 75：四月的雄心壮志
即使在隔离期间，我们的工程团队也努力适应、保持专注并努力工作，为您带来又一个令人兴奋的新版 Firefox。在开发者工具方面，您会找到控制台中的即时评估、WebSockets 的事件断点，以及其他许多功能。在网络平台方面，新增的功能包括图像的 HTML 延迟加载、CSS min()、max() 和 clamp() 函数、公共静态类字段以及对 Web 动画 API 支持的补充。请照例阅读重点内容或从以下文章中找到所有新增内容的完整列表：Firefox 75 开发者必读 Firefox 75 的网站兼容性 Firefox 75 最终用户发行说明 开发者工具补充我们首先来看看 75 最有趣的开发者工具。控制台表达式即时评估控制台中的评估表达式是探索应用程序状态、查询 DOM 或试用 JavaScript API 的快速方法。现在，Firefox 的多行控制台模式已经变得更友好、更像 IDE，可用于更轻松地为更长的代码制作原型。新的即时评估会在您键入时显示当前表达式的结果预览，类似于 Quokka.js 这样的编辑器。只要在 Web 控制台中键入的表达式没有副作用，就会在您键入时显示结果预览。为了使预览尽可能无缝，进行了大量改进。结果中 DOM 节点的元素为突出显示。代码内自动填写功能根据结果类型推荐方法和属性。另外，您可以预览错误以更快地修复表达式。更好地检查和测量面积测量现可调整大小使用 DevTools 中的可选面积测量工具，您可以在页面上快速绘制矩形以测量特定区域的高度、宽度和对角线长度。您可以在“可用工具箱按钮”下的设置中启用该工具。感谢 Sebastian Zartner [:sebo]，这些矩形现在有调整大小的句柄，方便您精确地调整。使用 XPath 查找 DOM 元素 XPath 查询通常用于自动化工具中，以告知软件要查找并与之交互的元素。您现在可以在 Inspector 的 HTML 搜索中将 XPath 用于 DOM 元素，这也是归功于 sebo。这使得在实际站点上测试表达式和微调查询变得更加容易。WebSocket 的事件断点最近的每个 DevTools 版本都对 WebSocket 检查功能进行了改进。这次，由于才华横溢的 Chujun Lu 的贡献，调试方面得到了一个不错的补充。现在，您可以在执行 WebSocket 事件处理程序时选择暂停或记录。使用调试器中新添加的事件监听器断点。选择“记录”选项时，将记录事件数据和执行的处理程序，但执行不会暂停。WebSocket Inspector 的新消息还包括：由于 Outvi V 的长期贡献，消息过滤器现支持正则表达式。网络添加 Firefox 75 的“网络”面板中进行了大量质量和性能方面的工作。此版本中在不增加 CPU 负担的情况下大幅提升了发出快速请求的速度。在界面方面，贡献者 Florens Verschelde 推进了在列之间添加边框以提高可读性的建议和设计。注意设计变得与 DevTools 的整体外观更加一致了。感谢贡献者 Vitalii，过滤器按钮也更加清晰易读，状态之间的对比度得到了改善。“请求阻止”面板可帮助您测试匹配请求失败时站点的恢复能力。现在，它允许带有“*”的通配符模式。感谢 Duncan Dean 所做的贡献。Developer Edition（开发人员版）中 DevTools 功能抢先体验Developer Edition 是 Firefox 的预发布渠道，可以抢先体验各种工具和平台功能。该版本的默认设置中还为开发人员开启了更多的功能。我们喜欢将新功能快速引入到 Developer Edition，以便收集反馈信息，重点包括以下内容。调试器 & 控制台异步堆栈跟踪现代 JavaScript 代码在很大程度上取决于在其他异步操作（如事件、承诺以及超时）之上堆叠 async/await。由于与 JavaScript 引擎集成得好，现已可以捕捉到异步执行过程，以提供更完整的画面。调试器中的异步调用堆栈使您可以单步调试事件、超时以及依照时间执行的基于承诺的函数调用。控制台的异步堆栈使查找错误的根本原因变得更为容易。Web 平台更新我们来探讨一下 Firefox 75 在网络平台更新方面提供的功能。图像的 HTML 延迟加载延迟加载是通过将资源标识为非阻塞（非关键）资源、以仅在需要时加载而不是立即加载来提高性能的常见策略。图像是要在网络应用中延迟加载的最常见资产之一。为了简化图像延迟加载，我们在 HTML <img> 元素上引入了对加载属性的支持。将值设置为 lazy 会指示浏览器推迟加载屏幕外的图像，直到用户滚动到附近为止。唯一可能的其他值为 eager，如您所想，这是默认值。[…]
