1. 程式人生 > >記一次完整的asp.net-mvc頁面優化過程

記一次完整的asp.net-mvc頁面優化過程

泄露 但是 項目 nbsp 左側菜單 工具 登錄 分享圖片 info

最近在重構一個MVC項目,項目結構堪稱混亂,問題多多,但今天說的是頁面打開速度的問題。項目中包括web後臺系統,幾乎隨便點一個頁面都要盯著白屏等待2-5秒之久,體驗很差。通過對頁面性能逐步的分析和判斷,並做相應優化,最終頁面打開速度在300ms內。

一、項目結構

後臺系統使用了典型的ASP.Net MVC框架,但是版本略舊,MVC4,EF5,基本沒有采用其它的技術工具,業務邏輯大致都混亂的分布在Controller和Model層。習慣了ABP框架,相比之下這個就顯得簡陋了。至於View層,摘要中提到了白屏,可以知道前端頁面使用多頁開發,後臺服務器渲染,正是Razor模板引擎,版本2.0。

登錄後臺系統,隨便點擊左側菜單,右側打開頁面,大概需要白屏等待2-5秒。咦,怎麽會如此之慢?!

於是基於一個典型的頁面,開始進行監測分析。我選擇了[所有用戶]菜單,頁面打開速度在4秒左右,頁面結構和功能都相對簡單,上面是一個搜索條件區域,可以按照姓名部門角色等條件組合搜索,下面就是用戶列表和分頁,展示大約10個字段,大致示意圖如下(雖然是測試階段,但數據真實,為避免泄露客戶信息,而且頁面結構簡單易於描述,所以不做截屏展示)。

技術分享圖片

二、問題分析

頁面的大概執行周期如下圖示:

三、改進過程

--End

記一次完整的asp.net-mvc頁面優化過程