web網頁重構和前端性能優化方法是怎樣的

這篇文章主要講解了“web網頁重構和前端性能優化方法是怎樣的”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“web網頁重構和前端性能優化方法是怎樣的”吧！

　　網頁重構，在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。

　　網頁重構是怎樣的

　　對于傳統的網站來說重構通常是：

　　表格(table)布局改為div+css

　　使網站前端兼容于現代瀏覽器(針對于不合規范的css、如對IE6有效的)

　　對于移動平臺的優化

　　針對于seo進行優化

　　深層次的網站重構應該考慮的方面

　　減少代碼間的耦合

　　讓代碼保持彈性嚴格按規范編寫代碼

　　設計可擴展的API

　　代替舊有的框架、語言(如VB)

　　增強用戶體驗

　　通常來說對于速度的優化也包含在重構中

　　壓縮js、css、image等前端資源(通常是由服務器來解決)

　　程序的性能優化(如數據讀寫)

　　采用CDN來加速資源加載

　　對于jsDOM的優化

　　HTTP服務器的文件緩存

　　網頁重構優化的方法？

　　(1）減少http請求次數：cssSprites,js、css源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存，圖片服務器。

　　（2）前端模板js+數據，減少由于html標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

　　（3）用innerhtml代替DOM操作，減少DOM操作次數，優化JavaScript性能。

　　（4）當需要設置的樣式很多時設置className而不是直接操作style。

　　（5）少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

　　（6）避免使用cssExpression（css表達式)又稱Dynamicproperties(動態屬性)。

　　（7）圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。

　　（8）避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢。對普通的網站有一個統一的思路，就是盡量向前端優化、減少數據庫操作、減少磁盤IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減少數據庫操作指減少更新次數、緩存結果減少查詢次數、將數據庫執行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統作為緩存、減少讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是無法“優化”的。

感謝各位的閱讀，以上就是“web網頁重構和前端性能優化方法是怎樣的”的內容了，經過本文的學習后，相信大家對web網頁重構和前端性能優化方法是怎樣的這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！