對于很多客戶而言，他們對網(wǎng)站開發(fā)并非十分了解，很多專業(yè)的頁面優(yōu)化常識表示有疑惑，下面我們就和成都創(chuàng)新互聯(lián)一起來了解一下在網(wǎng)站性能優(yōu)化的相關(guān)內(nèi)容介紹。

CSS選擇器

?選擇器越復雜，瀏覽器計算得越久。最糟情況下，瀏覽器需要遍歷整個DOM-tree，計算量等于元素總個數(shù)乘以選擇器個數(shù)。

?盡量不要使選擇器太復雜，事先給需要被操作的元素加上類名。

Paint

瀏覽器渲染網(wǎng)頁時，會將網(wǎng)頁分層(layer)，最后將不同層合并，然后完成渲染。 同一層中，哪怕只有一個小小的元素發(fā)生變化，整個層都會被repaint。 這一點可以在開發(fā)者工具的Paint Profiler界面中觀察到，layer界面中可以觀察網(wǎng)頁有多少個layer。

?paint是耗費性能

?修改transform和opacity會導致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)化，否則不要創(chuàng)建新layer。

?高dpi屏幕下，fixed元素自動擁有自己的layer。低dpi需要自行創(chuàng)建。

?repaint某個layer時，如果layer與其他元素重疊，將導致layer和重疊的元素都被repaint。

?最好的動畫是跳過layout和paint直接composite。

用transform, opacity來制作動畫，可實現(xiàn)無layout和repaint. (Devtool Performance的main中無動畫相關(guān)事件。)

debounce

debounce:不要高頻率調(diào)用函數(shù)，事件連續(xù)觸發(fā)時，只調(diào)用一次函數(shù)。

1.交互事件的監(jiān)聽函數(shù)的執(zhí)行時間不能太長，否則會阻塞頁面滾動。

2.不要再交互事件的監(jiān)聽函數(shù)中修改樣式，會導致強制同步reflow，阻塞js執(zhí)行。

3.debounce，活用requestAnimationFrame方法。

監(jiān)聽函數(shù)可能會調(diào)用perventDefault, 導致compositor線程必須等待監(jiān)聽函數(shù)執(zhí)行完成。 不過新擴展的addEventListener方法第三個參數(shù)可以解決此問題。

小技巧
動畫不能低于60幀。ui反饋不能低于100ms。

ui反饋不必追求最快，可故意拖延到100ms。并利用這個時間做其他事。

盡量增加線程空閑時間，以快速反饋。

ui反饋優(yōu)先級最高，交互期間盡量停下其他任務(wù)。

以上就是創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師對網(wǎng)站性能優(yōu)化的相關(guān)介紹，希望大家能夠喜歡。如果大家對成都網(wǎng)站開發(fā)還有什么想要了解的可以關(guān)注創(chuàng)新互聯(lián)的官網(wǎng)公眾號，里邊會有詳細的介紹。

網(wǎng)頁題目：關(guān)于成都網(wǎng)站開發(fā)的性能優(yōu)化講解
網(wǎng)頁路徑：http://www.2m8n56k.cn/news5/320605.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、網(wǎng)站維護、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站排名、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)