前端性能優(yōu)化的目的
1. 從用戶角度而言琐簇，優(yōu)化能夠讓頁面加載得更快烤镐、對用戶的操作響應得更及時阅酪，能夠給用戶提供更為友好的體驗。
從服務商角度而言察绷，優(yōu)化能夠減少頁面請求數(shù)干签、或者減小請求所占帶寬，能夠節(jié)省可觀的資源拆撼。
1.封裝函數(shù)
把重復使用的代碼塊，封裝成函數(shù)情萤，使加載速度更快
2.頁面級別的優(yōu)化：
CSS精靈圖
如果可以，盡量將外部的腳本筋岛、樣式進行合并，多個合為一個肪获。且CSS，JS孝赫，image都可以用相應工具進行壓縮
能使用CSS替代效果的盡量少使用圖片
圖片懶加載∏啾可以在某些條件下或者頁面剛加載時減少HTTP請求數(shù)预侯。
3.代碼級別的優(yōu)化
(1) javascript
1.用innerHTML代替DOM操作致开，減少DOM操作次數(shù)萎馅，優(yōu)化javascript性能
2.慎用with。with相當于增加了作用域鏈的長度飒货，過長的作用域鏈會導致查找性能下降
(2) CSS
1.使用link而不使用@import。link在頁面加載時CSS同時被加載塘辅，@import引入的CSS要等頁面加載完畢后再加載
2.設(shè)置className而不是直接使用css表達式
3.避免正則的屬性選擇器邪驮。
4.縮減HTML文檔大小
①.刪除對執(zhí)行結(jié)果無影響的空格空行和注釋傲茄；
∫惴谩②.避免table布局；
◇∪凇③.使用HTML5；
5.避免節(jié)點深層級嵌套
層級越深的節(jié)點在初始化構(gòu)建時守呜，所占內(nèi)存越多型酥。
通過瀏覽器HTML解析器會將整個HTML文檔的結(jié)構(gòu)存儲為DOM樹結(jié)構(gòu)查乒。當節(jié)點嵌套層次越深，構(gòu)建的DOM書層次也越深玛迄。
6.避免空的src和hre
當link標簽的href屬性為空、script標簽的src屬性為空的時候虏杰，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值勒虾，從而把頁面的內(nèi)容加載進來作為它們的值。所以要避免犯這樣的疏忽修然。