大话前端页面优化----实战总结

　　最近公司系统有个主要的功能，查询结果数据量太大，可是用户呢还坚持要求就要这么多数据（显然不符合软件学原理，超过两千你就眼花了。。。），迫于压力，公司将此艰巨任务交付给我。

       背景：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。

        最后附上一张系统截图，仍是很漂亮的：