大話前端頁面優化----實戰總結

　　最近公司系統有個主要的功能，查詢結果數據量太大，可是用戶呢還堅持要求就要這麼多數據（顯然不符合軟件學原理，超過兩千你就眼花了。。。），迫於壓力，公司將此艱鉅任務交付給我。

       背景：F12查看該查詢結果最後也沒大小是 12.5M，後端耗時我們先暫且無論，前端耗時除了網速就和這個頁面大小有關了。

       目的：最終的目的是要前端查詢渲染時間減小，根源仍是最後渲染的頁面的大小變小。

       結果：通過九牛二虎之力，各類優化，各類分析，各類刪減，保持功能與以前一致的狀況下，頁面大小減小到了4.5M，渲染速度也是有顯著的提高。

       優化過程：

             長話短說，總結性說說作了大致哪些方面的工做，細節就很少說了。

              一、css整理，原先的頁面css能夠說是滿天飛，隨處可見css，最後將全部的css抽取成一個css文件，放在頁面上方。css加載的時候，不影響dom tree的解析。

              二、js 整理放入頁面下方，js會影響dom的解析；有些js前期加入，後期不用了，這種直接刪掉。

              三、最難的一步，分析dom結構。 這個多是頁面渲染慢的最大根源，在開發功能的最初階段，開發人員目的很簡單，按照UI設計完成功能，不會考慮到dom結構和層級（固然不必過於開始就考慮這些，完成功能仍然是首要目的），所以我看這個結構，分析了有分析，看到好幾層的那種div，立馬拆拆拆，刪刪刪，能用一層結構的毫不用兩層，作到最少的層級結構。這一步能夠說優化是無止境的，後期的主要戰場就在這，耐心的去優化吧。

             四、咱們的系統頁面是jsf，固然最終也是解析成html，差很少。有個別特殊性語法。  去掉rendered="false"的代碼片斷。

                   將循環的代碼片斷中的公共js挪出來，不必每次循環，加載一遍js。

        最後附上一張系統截圖，仍是很漂亮的：