使用*{ transition: all 0.25s linear; }危害性能，还是一种不好的做法？还有其他方法可以更好地转换元素吗？

我正在尝试对元素进行平滑过渡，以在更改媒体查询的值时不让元素被切断和闪烁。

我正在尝试创建一个轮播，我将在其中显示一些推文以及用户的个人资料图片。

我创建了一个包含所有用户个人资料图片的精灵，以减少网络请求的数量。

我可以定位精灵的图像background-position

对于应用，background-position我可以选择容器 div，它将使用:nth-child选择器保存图像，或者我可以为每个容器分配一个单独的 id / 类，例如position-1，position-2等等。

除了上述方法之外，还有什么更好的方法可以有效地定位它们吗？

我想要一个仅 CSS 的解决方案，不想使用 JavaScript。

在我使用 RESTful 服务的单页应用程序中，我想知道在一组项目中更新一个项目的最佳实践是什么。

先决条件
1. 前端发出 GET 请求以获取项目列表
2. 前端格式化项目列表（即将日期从 UTC 转换为本地时间）
3. 前端向后端发出 PUT 请求更新项目的名称

可能的解决方案

解决方案 #1
4. 后端响应 HTTP-200 和单个更新项
5. 前端重新格式化更新项
6. 前端拼接项列表，查找并替换更新项

PRO
- 一个更新项目的 API 请求
CON
- 前端数据重复，没有单一的事实来源（即项目列表）

解决方案 #2
4. 后端响应 HTTP-200 和更新的项目列表
5. 前端重新格式化项目列表

PRO
- 一个API请求更新item
CON
- 不遵循单一职责原则（即更新item的API更新单个item，并返回所有item）

解决方案 #3
4. 后端响应 HTTP-200 和单个更新的项目
5. 前端发出 GET 请求以获取所有项目
6. 前端重新格式化项目列表

PRO
- 对于未来的实现更加灵活，API 遵循单一职责原则
CON
- 两个 API 请求来更新项目

我想知道你应该如何构建一个调用后端的应用程序。

在服务中包装 HTTP 调用似乎是一种自然的做事方式，但是如何/在哪里保存数据以保持一致性？例如，我有一个显示某种 Todo 列表的组件，该列表是从后端检索的OnInit。现在，当从这个组件路由并再次路由回来时，它的所有数据都会被重置。当然，您可以再次调用后端，但是将数据保存在某种服务（甚至是 HTTP 服务）中以供进一步使用不是更有利吗？

进一步澄清：

这是一种可行的方法还是有其他方法来处理这种情况？

此外，使用需要多种服务来填充其所有字段的对象的最佳方法是什么。（Obj: {a: number, b: number},a由AService和检索）b。BService

您会将这些对象存储在哪里（注入AService并将BService其存储BService/注入到向请求组件提供数据的第三个服务中）？

存储它的最佳方式是什么？

最近，我一直在阅读并尝试有关优化浏览器布局事件（不是绘制或复合）的不同内容，但确切地说是布局。

我正在使用的测试应用

我有一个非常简化的类似社交媒体的应用程序，它只显示用户的一些个人资料信息和一个墙贴列表（每个都有 2 个答案，向右缩进）。你可以在这个沙箱检查它的代码。我建议在这里的整个浏览器窗口中查看应用程序本身。最初呈现 1000 个墙贴，单击页面底部的显示更多将添加另外 1000 个，并且 DOM 元素计数将与以下测试中使用的计数相匹配。您可以在第 79 行检查 fakeApi.js 中新渲染的墙贴的步骤，但必须至少加载2000 个墙贴以匹配测试中的环境。有一个评论框，点击后会出现在墙贴下方----回复----对于给定的帖子。

我的目标

我想在输入评论框时减少相当大的 DOM 树的布局/更新层树时间（一次只显示一个，在给定的墙贴下方），但我现在想在不使用虚拟化的情况下进行优化。

设置

• 机器 CPU - Intel Core i7-6700HQ@2.60-3.50Ghz 的移动版本（在笔记本电脑上）
• DOM 元素 ~ 45k
• 浏览器 - Chrome 80.0.3987.163
• 前端技术栈 - React，仅适用于 CSS 的 Bootstrap，纯 CSS

测量结果

打字时间范围的性能时间表和甜甜圈图

正如您在性能时间线中看到的，当在评论框中输入几个字符时，会出现Layout（黄色下方的紫色表示按键事件），然后是另一个紫色块 - Update Layer Tree。时间，每一个按键：

• 布局 ~ 12ms
• 更新层树 ~ 21-22ms
• 打字时的平均 FPS - 20FPS

我为优化尝试过的事情

• React 方面，该应用程序已经使用shouldComponentUpdate 和 React.memo进行了优化（针对功能组件）
• 删除了按键事件处理程序甚至整个处理程序中的e.target.innerText引用
• 对自定义 CSS使用BEM 方法（在 assets/Site.css 中），保持选择器简单，1 级
• 评论框使用绝对位置
• 删除一些文本节点（减少了大约 20k）
• 删除了整个引导 CSS 包（当然，应用看起来不太好）
• 删除了所有图片
• 使用will-change: 转换评论区以将其提升为单独的布局层，但仍然层指标显示整个 DOM 层（滚动层）也在输入时更新。

类似应用案例研究

当然，Facebook 是我能想到的最接近的。我为它记录了一些统计数据，在带有新闻提要的主页上，我向下滚动，这样 DOM 元素就足够了，最后我停在了~45k，就像测试应用程序一样。甜甜圈图的结果很有趣……正如您所见，尽管 DOM 元素数量相同，但在键入相同数量的字符时执行的渲染更少。当然，FB 的事件处理程序据说比我的要复杂得多，如果按下 Enter 键，它只会附加另一个注释（这会导致 FB 的事件处理时间更长）。此外，在评论框中输入时（来自新闻提要中出现的第一个项目）FB 达到了37FPS，这也明显更好。

问题：如何改善按键的布局时间，有可能吗？难道是不同的HTML结构是原因吗？您可以看到 FB 在某些地方包含更多的嵌套元素，测试应用程序的嵌套更少，但显示了更多单独的帖子项。另外，如果我需要添加更多详细信息，请发表评论！:)

作为将设计（PSD、Sketch、AdobeXD、..etc）转换为动态 HTML 页面手册的前端设计师。我正在使用带有 jQ​​uery 库的引导框架。当我开始这项工作时，将设计转换为 html 花了很长时间，之后时间减少了，因为工作变得经典并且是例行公事。但是每个设计都是不同的，我从头开始使用引导组件，然后添加我的覆盖 CSS 和 JS。

我想知道是否有工具或想法可以改善我的工作并更快地做事？

我所知道的是，我可以创建自己的 JS 或 CSS 代码，我通常会使用这些代码（常见的东西）。然后，我可以将这些文件包含在我正在处理的所有项目中。

我需要其他工具和想法来使用。

当我们在移动设备上访问 facebook 页面时，它会重定向到 m 代表移动设备的 URL 'm.facebook.com'。即使我们在桌面访问此 URL，它仍然返回移动 UI。

正如我猜想的那样，这是为了减少 CSS 或 JS 或任何处理移动和桌面不同显示的东西。

但我想知道这样做还有其他好处吗？这种技术的关键词是什么？这必须通过在后端和前端执行一些操作来存档。我做了很多搜索，但仍然没有找到任何关于这个技术的文章

我有一个打字稿应用程序，我需要从该应用程序连接到 Azure Blob 存储。我已将 blob 连接字符串详细信息放在 Azure 密钥保管库服务中。但是要调用密钥库 URL 来访问这些密钥和机密，我需要在我的 Typescript 页面中包含客户端 ID、客户端机密。但作为前端页面，任何人都可以从浏览器控制台看到这些秘密。我们怎样才能摆脱这种情况。以下任何一种解决方案都可以解决我的问题。请让我们知道。

1.有没有办法从浏览器控制台窗口中隐藏这些秘密。所以它不会在浏览器中显示。

2.是否有任何方法可以在不提供客户端 ID 和客户端机密的情况下从 typecipt 页面对 Azure 密钥库使用其他身份验证。

我的组件文件中有一个变量 user_roles，它由 API 初始化，ngInit()之后不会更改。

user_roles 是一个数组，其中包含该用户的权限：user_roles = ['admin', 'mediator', ...]

在我的模板中，我有基于 user_role 显示组件的代码：

.includes() 是否在每次其他变量更改并且更改检测循环运行时运行？如果是这样，那么我可以使用什么替代方法来提高性能？

jerdon-8x1x-reversible-plug-in-make-up-mirror-3-finishes:60 GET https://cdn.shopify.com/s/files/1/0048/2675/9279/t/8/assets/mm-init.js?882142460823279530&shop=www-reflectperfection-com.myshopify.com net::ERR_ABORTED 404访问我们 Shopify 网站的页面时，在控制台中发现了该错误。

该页面的 URL 是：

https://reflectperfection.com/collections/plug-in-wall-mounted-makeup-mirrors/products/jerdon-8x1x-reversible-plug-in-make-up-mirror-3-finishes

您能帮我理解为什么会发生这种情况并找到解决方案吗？