對(duì)于很多客戶而言，他們對(duì)網(wǎng)站開發(fā)并非十分了解，很多專業(yè)的頁面優(yōu)化常識(shí)表示有疑惑，下面我們就和石家莊尚武科技一起來了解一下在網(wǎng)站性能優(yōu)化的相關(guān)內(nèi)容介紹。

　　
　　CSS選擇器
　　
　　?選擇器越復(fù)雜，瀏覽器計(jì)算得越久。最糟情況下，瀏覽器需要遍歷整個(gè)DOM-tree，計(jì)算量等于元素總個(gè)數(shù)乘以選擇器個(gè)數(shù)。
　　
　　?盡量不要使選擇器太復(fù)雜，事先給需要被操作的元素加上類名。
　　
　

　　
　
　　
　　Paint
　　
　　瀏覽器渲染網(wǎng)頁時(shí)，會(huì)將網(wǎng)頁分層(layer)，最后將不同層合并，然后完成渲染。 同一層中，哪怕只有一個(gè)小小的元素發(fā)生變化，整個(gè)層都會(huì)被repaint。 這一點(diǎn)可以在開發(fā)者工具的Paint Profiler界面中觀察到，layer界面中可以觀察網(wǎng)頁有多少個(gè)layer。
　　
　　?paint是耗費(fèi)性能
　　
　　?修改transform和opacity會(huì)導(dǎo)致repaint
　　
　　?創(chuàng)建新layer來減少repaint區(qū)域。
　　
　　will-change屬性可以為元素創(chuàng)建新layer(works in Chrome, Opera and Firefox).或 transform: translateZ(0);(works in all browsers).
　　
　　?過多l(xiāng)ayer也消耗內(nèi)存和性能，用Performance判斷新layer是否帶來優(yōu)化，否則不要?jiǎng)?chuàng)建新layer。
　　
　　?高dpi屏幕下，fixed元素自動(dòng)擁有自己的layer。低dpi需要自行創(chuàng)建。
　　
　　?repaint某個(gè)layer時(shí)，如果layer與其他元素重疊，將導(dǎo)致layer和重疊的元素都被repaint。
　　
　　?最好的動(dòng)畫是跳過layout和paint直接composite。
　　
　　用transform, opacity來制作動(dòng)畫，可實(shí)現(xiàn)無layout和repaint. (Devtool Performance的main中無動(dòng)畫相關(guān)事件。)
　　
　　debounce
　　
　　debounce:不要高頻率調(diào)用函數(shù)，事件連續(xù)觸發(fā)時(shí)，只調(diào)用一次函數(shù)。
　　
　　1.交互事件的監(jiān)聽函數(shù)的執(zhí)行時(shí)間不能太長(zhǎng)，否則會(huì)阻塞頁面滾動(dòng)。
　　
　　2.不要再交互事件的監(jiān)聽函數(shù)中修改樣式，會(huì)導(dǎo)致強(qiáng)制同步reflow，阻塞js執(zhí)行。
　　
　　3.debounce，活用requestAnimationFrame方法。
　　
　　監(jiān)聽函數(shù)可能會(huì)調(diào)用perventDefault, 導(dǎo)致compositor線程必須等待監(jiān)聽函數(shù)執(zhí)行完成。 不過新擴(kuò)展的addEventListener方法第三個(gè)參數(shù)可以解決此問題。
　　
　　小技巧
　　
　　動(dòng)畫不能低于60幀。ui反饋不能低于100ms。
　　
　　ui反饋不必追求最快，可故意拖延到100ms。并利用這個(gè)時(shí)間做其他事。
　　
　　盡量增加線程空閑時(shí)間，以快速反饋。
　　
　　ui反饋優(yōu)先級(jí)最高，交互期間盡量停下其他任務(wù)。
　　
　　以上就是尚武科技的網(wǎng)站開發(fā)工程師對(duì)網(wǎng)站性能優(yōu)化的相關(guān)介紹，希望大家能夠喜歡。如果大家對(duì)石家莊網(wǎng)站開發(fā)還有什么想要了解的可以關(guān)注尚武科技的官網(wǎng)公眾號(hào)，里邊會(huì)有詳細(xì)的介紹。