前端踩坑系列《四》

Top 3 页面重排

问题描述 关于性能，确实是一个前端程序员应该特别注意的问题，我这个问题其实算是冰山一角。平时我们在使用动画的时候，可能经常使用 transition 做动画，但是如果动画的动作会使触发重绘和重排的话就要特别注意了。比如一个页面中占位元素的高度在动画过程改变的话，那么页面就会在动画的过程中不断的重排，会造成页面的卡顿，效果很不好。

问题解决以及反思 尽量不要改变页面中占位元素的宽高等会导致页面重排的属性。 transition 最好配合 transform 使用，而不要改变 height、margin-top 等属性，这个值得好好深究，这里不展开。

Top 2 webpack importLoaders

问题描述 背景：使用 mpvue 将同一份代码打包成 H5 端和小程序端代码，为了解决字体大小设置统一的问题，我们在 webpack 中使用了 px2rpx-loader（这个的使用有点类似于 px2rem-loader）

在使用的时候，发现使用 import css 文件的时候不支持，打包到小程序端有问题。类似的写法如下：

@import "../../../src/components/modal.css";

问题解决 在 CSS-loader 后面加上参数 ?importLoaders=10，这个参数的作用官方的解释如下：

The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources.

可以看到，importLoaders 定义的是使用多少个后面的 loader 去处理 @import 进来的资源。

看看官网的例子：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // 0 个的时候没有，1个的时候使用 postcss-loader,2个使用 postcss-loader, sass-loader
              importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
};
复制代码

一开始我只使用了一个，发现并没有满足，后来指定了多个，成功了！

Top 1 0.1 + 02 不等于 0.3

问题描述 对于前端而言，下面的结论应该都应该知道

为什么会有这么情况？ 先来看看十进制的小数是怎么转换成二进制的，有个小小的结论： 十进制小数转二进制方法：乘2除整 按照这个结论，我们看下：

0.1 * 2 = 0.2 # 0
0.2 * 2 = 0.4 # 0
0.4 * 2 = 0.8 # 0
0.8 * 2 = 1.6 # 1
0.6 * 2 = 1.2 # 1
0.2 * 2 = 0.4 # 0
.....
复制代码

好的，死循环了。也就是最后是 0.0001100011.....然而我们计算机的内存是有限的，所以我们必须要在某个精度上直接舍弃，这样就会造成我们的 0.1 不是 0.1 了，可能在底层就直接变成了 0.00011001100110011001100110011001100110011001100110011010。回到我们的问题，0.1 + 0.2 就变成了以下：

// 0.1 和 0.2 都转化成二进制后再进行运算
0.00011001100110011001100110011001100110011001100110011010 +
0.0011001100110011001100110011001100110011001100110011010 =
0.0100110011001100110011001100110011001100110011001100111

// 转成十进制正好是 0.30000000000000004
复制代码

解决方法 解决一：先乘后除

这个的原理利用在 javascript 中整型没有这种精度问题的原理，但是这样就会有个精度的要求，看了一个运营人员的配置，后面好多个 0 的都有，也就是我也要相应的乘以好大的值，我选择 go die

解法二：toFixed 方法 解法三： toPrecision 方法 两者有一定的相似，就放在一起说。我们先来看看它们的用法 看了一下 toFixed numObj.toFixed(digits) digits 指的是小数点后数字的个数，比如：

1.0043.toFixed(2); // 1.00
1.0053.toFixed(2); // 1.01
复制代码

具体可以看 MDN toFixed()

toPrecision numObj.toPrecision(precision) precision 指的是有效数个数的整数，也就是从第一个非 0 数值开始数的个数。举个例子:

0.041234123.toPrecision(2); // 0.041
复制代码

具体可以看 MDN toPrecision

值得注意的点是上面两个方法返回值都是字符串，也就是我们还需要转换成小数。基于以上，我们可以得出以下的解决方法：

parseFloat(1.4000000000000001.toPrecision(12)) === 1.4  // True
复制代码

封装成方法：

function strip(num, precision = 12) {
  return +parseFloat(num.toPrecision(precision));
}
复制代码

据说精度设置成 12 可以解决大部分的情况，如果你还想更精确，用解法四吧！

解法四 Math.js、BigDecimal.js ...

结束语

踩坑的一周又结束了，祝大家心明眼亮，周末愉快~

​历史文章：

前端踩坑系列《一》

前端踩坑系列《二》

前端踩坑系列《三》

转载于:https://juejin.im/post/5cb0a2326fb9a0689d6f8fbb