? ? 很多前端開發(fā)人員其實(shí)都見過‘’性能優(yōu)化‘’這個詞柬姚，特別是在面試要求上郁轻，我也不例外队秩。
? ? 所以我也曾經(jīng)直接問度娘“前端性能優(yōu)化”之類的笑旺，但是得到的結(jié)果看起來有點(diǎn)云里霧里，因?yàn)樽约簺]有去嘗試過馍资，比較過筒主，所以并沒有g(shù)et到，而這里鸟蟹，我記錄的是一些我自己用到過的性能優(yōu)化方法乌妙。
? ? 其實(shí)前端就是跟瀏覽器打交道的，所以所謂的性能優(yōu)化建钥，就是對瀏覽器進(jìn)行優(yōu)化藤韵，包括瀏覽器向服務(wù)器發(fā)起請求和接受請求，都是和瀏覽器自身有關(guān)的熊经，所以可以了解一下瀏覽器的工作原理泽艘，這樣就會對性能優(yōu)化產(chǎn)生一定的了解。
1.SPA頁面懶加載
????其實(shí)就是按需加載镐依，避免首次進(jìn)頁面加載過多的資源匹涮，造成等待時間過長。這方面知識挺多的槐壳，很多技術(shù)框架也自帶懶加載功能或者插件然低。
2.操作DOM盡量減少layout
? ? 比如目前我有兩個節(jié)點(diǎn)domA,domB,我需要通過js分別給這兩個節(jié)點(diǎn)的寬度加上20px,
? ? 代碼可能如下(jq寫法)
????$(domA).css('width',$(domA).outerWidth()+ 20 + 'px');
????$(domB).css('width',$(domB).outerWidth()+ 20 + 'px');
? ? 這樣寫是OK,分別給兩個節(jié)點(diǎn)添加了20px的寬度,但是仔細(xì)看就會發(fā)現(xiàn),代碼的執(zhí)行順序是
? ? 先獲取domA得寬度,然后再修改domA寬度
? ? 然后再獲取domB得寬度,再修改domB寬度
? ? 這樣會造成性能消耗,讀寫,讀寫,瀏覽器進(jìn)行了兩次layout操作,
? ? 而我們先獲取到兩個節(jié)點(diǎn)的寬度,再修改節(jié)點(diǎn)寬度,讀讀,寫寫,這樣瀏覽器只進(jìn)行一次layout操作。
3.選擇器優(yōu)先級
? ????? 選的越少性能越高,因?yàn)椴樵兊墓?jié)點(diǎn)少
? ?1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div,h1,p）
4.相鄰選擇器（h1+p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel="external"]）
9.偽類選擇器（a:hover,li:nth-child）
? ? 另外注意樣式系統(tǒng)從最右邊的選擇符開始向左進(jìn)行匹配規(guī)則,
? ? 比如.worker_main .tree div , 瀏覽器會遍歷所有的div標(biāo)簽,然后再找到.tree的節(jié)點(diǎn),最后再找到.worker的節(jié)點(diǎn).
? ? 所以為了提升渲染性能,多層可以用class選擇器代替
? ? 當(dāng)然還需要以實(shí)際情況出發(fā),如果頁面dom不多,為了可維護(hù)性,還是可以使用后代選擇器或者子類選擇器的.
