前端踩坑系列《四》
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 ...
结束语
踩坑的一周又结束了，祝大家心明眼亮，周末愉快~
