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

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

       背景:F12查看该查询结果最后也没大小是 12.5M,后端耗时咱们先暂且不管,前端耗时除了网速就和这个页面大小有关了。

       目的:最终的目的是要前端查询渲染时间减少,根源还是最后渲染的页面的大小变小。

       结果:经过九牛二虎之力,各种优化,各种分析,各种删减,保持功能与之前一致的情况下,页面大小减少到了4.5M,渲染速度也是有显著的提升。

       优化过程:

             长话短说,总结性说说做了大体哪些方面的工作,细节就不多说了。

              1、css整理,原先的页面css可以说是满天飞,随处可见css,最后将所有的css抽取成一个css文件,放在页面上方。css加载的时候,不影响dom tree的解析。

              2、js 整理放入页面下方,js会影响dom的解析;有些js前期加入,后期不用了,这种直接删掉。

              3、最难的一步,分析dom结构。 这个可能是页面渲染慢的最大根源,在开发功能的最初阶段,开发人员目的很简单,按照UI设计完成功能,不会考虑到dom结构和层级(当然没必要过于开始就考虑这些,完成功能仍然是首要目的),因此我看这个结构,分析了有分析,看到好几层的那种div,立马拆拆拆,删删删,能用一层结构的绝不用两层,做到最少的层级结构。这一步可以说优化是无止境的,后期的主要战场就在这,耐心的去优化吧。

             4、我们的系统页面是jsf,当然最终也是解析成html,差不多。有个别特殊性语法。  去掉rendered="false"的代码片段。

                   将循环的代码片段中的公共js挪出来,没必要每次循环,加载一遍js。

            5、使用原生标签,加快渲染速度。用原生的span、div等代替。

        最后附上一张系统截图,还是很漂亮的:

         

 

          

posted @ 2019-06-18 23:07  Phil李  阅读(...)  评论(... 编辑 收藏