Top 3 頁面重排
問題描述
關(guān)于性能歧斟，確實是一個前端程序員應(yīng)該特別注意的問題纯丸，我這個問題其實算是冰山一角。平時我們在使用動畫的時候静袖，可能經(jīng)常使用 transition 做動畫觉鼻，但是如果動畫的動作會使觸發(fā)重繪和重排的話就要特別注意了。比如一個頁面中占位元素的高度在動畫過程改變的話队橙，那么頁面就會在動畫的過程中不斷的重排坠陈，會造成頁面的卡頓，效果很不好喘帚。
問題解決以及反思
盡量不要改變頁面中占位元素的寬高等會導(dǎo)致頁面重排的屬性畅姊。
transition 最好配合 transform 使用，而不要改變 height吹由、margin-top 等屬性若未，這個值得好好深究，這里不展開倾鲫。
Top 2 webpack importLoaders
問題描述
背景：使用 mpvue 將同一份代碼打包成 H5 端和小程序端代碼粗合，為了解決字體大小設(shè)置統(tǒng)一的問題，我們在 webpack 中使用了 px2rpx-loader（這個的使用有點類似于 px2rem-loader）
在使用的時候乌昔，發(fā)現(xiàn)使用 import css 文件的時候不支持隙疚，打包到小程序端有問題。類似的寫法如下：
@import "../../../src/components/modal.css";
問題解決
在 CSS-loader 后面加上參數(shù) ?importLoaders=10磕道，這個參數(shù)的作用官方的解釋如下：
The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources.
可以看到供屉，importLoaders 定義的是使用多少個后面的 loader 去處理 @import 進來的資源。
看看官網(wǎng)的例子：
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',
],
},
],
},
};
一開始我只使用了一個伶丐，發(fā)現(xiàn)并沒有滿足悼做，后來指定了多個，成功了哗魂！
Top 1 0.1 + 02 不等于 0.3
問題描述
對于前端而言肛走，下面的結(jié)論應(yīng)該都應(yīng)該知道
為什么會有這么情況？
先來看看十進制的小數(shù)是怎么轉(zhuǎn)換成二進制的录别，有個小小的結(jié)論：
十進制小數(shù)轉(zhuǎn)二進制方法：乘2除整
按照這個結(jié)論朽色，我們看下：
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
.....
好的，死循環(huán)了组题。也就是最后是 0.0001100011.....然而我們計算機的內(nèi)存是有限的葫男，所以我們必須要在某個精度上直接舍棄，這樣就會造成我們的 0.1 不是 0.1 了往踢，可能在底層就直接變成了 0.00011001100110011001100110011001100110011001100110011010腾誉。回到我們的問題峻呕，0.1 + 0.2 就變成了以下：
// 0.1 和 0.2 都轉(zhuǎn)化成二進制后再進行運算
0.00011001100110011001100110011001100110011001100110011010 +
0.0011001100110011001100110011001100110011001100110011010 =
0.0100110011001100110011001100110011001100110011001100111
// 轉(zhuǎn)成十進制正好是 0.30000000000000004
解決方法
解決一：先乘后除
這個的原理利用在 javascript 中整型沒有這種精度問題的原理利职，但是這樣就會有個精度的要求，看了一個運營人員的配置瘦癌，后面好多個 0 的都有猪贪，也就是我也要相應(yīng)的乘以好大的值，我選擇 go die
解法二：toFixed 方法
解法三： toPrecision 方法
兩者有一定的相似讯私，就放在一起說热押。我們先來看看它們的用法
看了一下
toFixed
numObj.toFixed(digits)
digits 指的是小數(shù)點后數(shù)字的個數(shù)，比如：
1.0043.toFixed(2); // 1.00
1.0053.toFixed(2); // 1.01
具體可以看 MDN toFixed()
toPrecision
numObj.toPrecision(precision)
precision 指的是有效數(shù)個數(shù)的整數(shù)斤寇，也就是從第一個非 0 數(shù)值開始數(shù)的個數(shù)桶癣。舉個例子:
0.041234123.toPrecision(2); // 0.041
具體可以看 MDN toPrecision
值得注意的點是上面兩個方法返回值都是字符串，也就是我們還需要轉(zhuǎn)換成小數(shù)娘锁⊙滥基于以上，我們可以得出以下的解決方法：
parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True
封裝成方法：
function strip(num, precision = 12) {
return +parseFloat(num.toPrecision(precision));
}
據(jù)說精度設(shè)置成 12 可以解決大部分的情況莫秆，如果你還想更精確间雀，用解法四吧！
解法四
Math.js镊屎、BigDecimal.js ...
結(jié)束語
踩坑的一周又結(jié)束了惹挟，祝大家心明眼亮，周末愉快~
