前端效能最佳化方法有：1、減少http請求數；2、將腳本往後挪，減少對並發下載的影響；3、避免頻繁的DOM操作；4、壓縮圖片；5、通過CSS選擇符來讓瀏覽器從右往左解析提高效率等等。
前端效能最佳化方法有：減少http請求數；將腳本往後挪，減少對並發下載的影響；避免頻繁的DOM操作；壓縮圖片；透過CSS選擇符來使瀏覽器從右往左解析提高效率
前端裡麵包含的內容是豐富的，它包括HTML，CSS以及JS和圖片等各種各樣的資源。因此前端優化是複雜的且必要的，接下來在文章中為大家介紹前端效能優化的方法，具有一定的參考作用，希望對大家有幫助。
優化的目的
優化的目的在於讓頁面載入的更快，對使用者操作回應更及時，為使用者帶來更好的使用者體驗，對於開發者來說優化能夠減少頁面請求數，能夠節省資源。
前端優化的方法有很多種，可以將其分為兩大類，第一類是頁面級別的優化如http請求數，內聯腳本的位置優化等，第二類為代碼級別的優化，例Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及HTML結構優化等等。
頁面層級優化
http請求數
#減少http請求數是最重要且最有效的方法，可以透過以下方法來減少http請求
（1）合理的設定http緩存，恰當的快取設定可以大幅減少http請求。要盡可能的讓資源能夠在快取中待得更久
（2）從設計實現層面簡化頁面，保持頁面簡潔、減少資源的使用時是最直接的。
（3）資源合併與壓縮，盡可能的將外部的腳本、樣式合併，多個合為一個。
(4) CSS Sprites，透過合併CSS圖片，這是減少請求數的一個好方法
內聯腳本的位置
瀏覽器是並發請求的，而外鏈腳本在加載時卻常常阻塞其他資源，例如在腳本加載完成之前，它後面的圖片、樣式以及其他腳本都處於阻塞狀態，直到腳本加載完成後才會開始加載。如果將腳本放在比較前面的位置，則會影響整個頁面的載入速度進而影響使用者體驗。所以說盡可能的將腳本往後挪，減少對並發下載的影響
程式碼層級的最佳化
##DOM操作最佳化：
要避免在document上直接進行頻繁的DOM操作，可以使用classname代替大量的內聯樣式修改，對於復雜的UI元素，設定position為absolute或fixed，盡量使用css動畫，適當使用canvas盡量減少css表達式的使用，使用事件代理圖片優化
CSS選擇符：
大多數人認為，瀏覽器對CSS的解析是從左往右的，事實上從右往左解析的效率更高，因為第一個id選擇基本上就把查找的範圍限定了。 總結：以上就是這篇文章的全部內容了，希望對大家有幫助以上是前端效能優化的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
