前端踩坑系列《四》

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 进来的资源。

看看官网的例子：

1. module.exports = {
2. module: {
3. rules: [
4. {
5. test: /\.css$/,
6. use: [
7. 'style-loader',
8. {
9. loader: 'css-loader',
10. options: {
11. // 0 个的时候没有，1个的时候使用 postcss-loader,2个使用 postcss-loader, sass-loader
12. importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
13. },
14. },
15. 'postcss-loader',
16. 'sass-loader',
17. ],
18. },
19. ],
20. },
21. };

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

Top 1 0.1 + 02 不等于 0.3

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

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

1. 0.1 * 2 = 0.2 # 0
2. 0.2 * 2 = 0.4 # 0
3. 0.4 * 2 = 0.8 # 0
4. 0.8 * 2 = 1.6 # 1
5. 0.6 * 2 = 1.2 # 1
6. 0.2 * 2 = 0.4 # 0
7. .....

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

1. // 0.1 和 0.2 都转化成二进制后再进行运算
2. 0.00011001100110011001100110011001100110011001100110011010 +
3. 0.0011001100110011001100110011001100110011001100110011010 =
4. 0.0100110011001100110011001100110011001100110011001100111
5. // 转成十进制正好是 0.30000000000000004

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

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

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

1. 1.0043.toFixed(2); // 1.00
2. 1.0053.toFixed(2); // 1.01

具体可以看 MDN toFixed()

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

1. 0.041234123.toPrecision(2); // 0.041

具体可以看 MDN toPrecision

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

1. parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True

封装成方法：

1. function strip(num, precision = 12) {
2. return +parseFloat(num.toPrecision(precision));
3. }

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

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