1、網頁的生成過程
要了解網頁效能好不好，那就必須先了解網頁是怎麼生成的
html轉換為dom節點
css轉換為cssom（css object model）
dom與cssom結合生成乙個渲染樹（包含每乙個節點的視覺資訊）
生成布局：即將所有渲染樹的所有節點進行平面合成
將布局繪製（paint）在螢幕上
這五步裡面，第一步到第三步都非常快，耗時的是第四步和第五步。"生成布局"（flow）和"繪製"（paint）這兩步，合稱為"渲染"（render）。
2、重繪與重排
網頁生成的時候，至少會渲染一次，使用者訪問的過程中還會不斷渲染。以下3中情況會導致網頁重新渲染。
重新渲染就需要重新生成布局、重新繪製。前者叫做「重排」（reflow），後者叫做「重繪」（repaint）
需要注意的是，"重繪"不一定需要"重排" ，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。但是，"重排"必然導致"重繪" ，比如改變乙個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了。
3、對於效能的影響
重繪與重排會不斷觸發、這是不可避免的。但是，他們非常耗費資源，是導致網頁效能低下的根本原因。
提高網頁效能就是要降低「重繪」和「重排」的頻率和成本、盡量少觸發重新渲染。
前面提到，dom變動和樣式變動都會觸發重新渲染。但是瀏覽器已經很智慧型了，會盡量把所有的變動集中在一起，排成乙個佇列，然後一次性執行，盡量避免多次重新渲染。
//div元素有兩個樣式變動，但是瀏覽器只會觸發一次重排和重繪。
div.style.color = 'blue';
div.style.margintop = '30px';
//如果寫得不好，就會觸發兩次重排和重繪。
div.style.color = 'blue';
var margin =parseint(div.style.margintop);
div.style.margintop = (margin + 10) + 'px';
//上面**對div元素設定背景色以後，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排。
一般來說，樣式的寫操作之後，如果有下面這些屬性的讀操作，都會引發瀏覽器立即重新渲染。
//所以，從效能角度考慮，盡量不要把讀操作和寫操作，放在乙個語句裡面。
//bad
div.style.left = div.offsetleft + 10 + "px";
div.style.top = div.offsettop + 10 + "px";
//good
var left =div.offsetleft;
var top =div.offsettop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";
一般的規則是：
4、提高效能的9個技巧
//badvar left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
//good
el.classname += " theclassname";
//good
el.style.csstext += "; left: " + left + "px; top: " + top + "px;";
5、重新整理率
很多時候，密集的重新渲染是無法避免的，比如scroll事件的**函式和網頁動畫。
網頁動畫的每一幀（frame）都是一次重新渲染。每秒低於24幀的動畫，人眼就能感受到停頓。 一般的網頁動畫，需要達到每秒30幀到60幀的頻率，才能比較流暢。 如果能達到每秒70幀甚至80幀，就會極其流暢。
大多數顯示器的重新整理頻率是60hz，為了與系統一致，以及節省電力，瀏覽器會自動按照這個頻率，重新整理動畫（如果可以做到的話）。
所以，如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步重新整理，達到最佳的視覺效果。這意味著， 一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
一秒之間能夠完成多少次重新渲染，這個指標就被稱為"重新整理率"，英文為fps（frame per second）。60次重新渲染，就是60fps。
6、開發者工具的timeline面板
chrome瀏覽器開發者工具的timeline面板，是檢視"重新整理率"的最佳工具。
dnn解讀 MT DNN原理解讀
最近大佬們接連放出大招。mt dnn還沒看，gpt2就出來了，爭取這兩天讀完把細節寫一下，一直堅持追蹤nlp預訓練模型的進展，自己工作中也用上了bert，希望nlp的發展越來越好。不了解bert的請戳這裡。正文分割線 1.mt dnn模型 1.1 模型結構 了解bert的朋友們一看這個圖估計就懂了，...
Vuex原理解讀
註冊vuex vue.usee vuex 建立store例項並匯出 export default newvuex.store getters mutations actions modules import store from store newvue mount vuex有乙個store建構函式...
編輯欄原理解讀
行內編輯欄的位置是在列表中顯示的，本身元素所在的標籤是th.那麼它的上一級標籤是tr，所以找到上一級的標籤，tr，然後改為行所對應的data citrid。找到citable標記的table，如果 不存在不能繼續操作。接下來定位cieditor編輯器的位置，如果citable沒有指定編輯器的位置，那...