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 ...
結束語
踩坑的一週又結束了，祝大家心明眼亮，週末愉快~
歷史文章：