小编Ale*_*195的帖子

Angular 1.x迁移性能问题

我正在将一个巨大的角度1项目从1.3.x升级到1.6.x,因为我们需要最新版本的一些补丁.更新后,似乎整个应用程序已经显着放缓.我一直在查看迁移文档,但有什么可能导致重大减速吗?任何会导致此问题的错误代码或陷阱?我遇到的问题只是视觉变化,例如ng-show和ng-hide是缓慢而抽搐的.

这是升级前的CPU配置文件: 之前的CPU配置文件

这是升级后的CPU配置文件: CPU配置文件之后

谢谢!

编辑:

让我再说一点.我觉得这与摘要周期有关.例如,我是一个导航栏,其中一个图标将隐藏,另一个将在悬停时显示.

这是角度1.3中的样子 1.3 cpu

这是角度1.6的样子 在此输入图像描述

更新后我收到强制回流性能警告.此(重新计算样式)也来自角度动画的computeCssStyles函数(或者至少是它指向我的代码行).我也没有在我的代码中调用任何$ animate.这只是角度消化方法的产物吗?还有一些我在迁移文档中遗漏的关于可能对摘要进行更改的内容吗?

代码示例:在悬停时showDropdown从false更改为true,反之亦然.

<i> ng-show="! showDropdown" </i><i> ng-show="showDropdown" </i>
Run Code Online (Sandbox Code Playgroud)

编辑:短期修复,因为我没有在我的代码中的任何地方使用动画,但似乎是根据较新的角度摘要方法触发.我只是禁用动画作为部分短期修复.

$animate.enabled(false);
Run Code Online (Sandbox Code Playgroud)

javascript performance angularjs

7
推荐指数
1
解决办法
359
查看次数

使CSS网格自动填充仅2列

我正在使用CSS Grid并在此处找到的codepen中进行了以下布局:https://codepen.io/alexg2195/pen/xLEeMd

我的问题是,在使用时,repeat(auto-fill, minmax(400px, 1fr));我最终得到的布局不仅仅是两列.

有没有办法强制两列,但仍然有相同的最小自动填充调整大小行为?

body {
  margin: 40px;
}

.layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 100px;
  grid-template-areas: "main btn" "main .";
}

.btn {
  grid-area: btn;
  background-color: #444;
  color: #ddd;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.boxes {
  grid-area: main;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
Run Code Online (Sandbox Code Playgroud)
<div class="layout">
  <div class="boxes">
    <div class="box a">A</div>
    <div class="box …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-grid

7
推荐指数
1
解决办法
1997
查看次数

React-Redux重新选择性能

我在React Redux应用程序中使用重新选择时遇到有关性能的问题。

Reselect库用作记忆层,用于缓存为提高性能而进行的计算,但是如果您不需要执行任何计算/逻辑怎么办?

将选择器用于单个数据是否更高效?还是应该只使用标准的connect方法?

performance reactjs redux react-redux reselect

3
推荐指数
1
解决办法
1167
查看次数