zoukankan      html  css  js  c++  java
  • 大话前端页面优化----实战总结

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

           背景: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等代替。

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

             

              

  • 相关阅读:
    (原创)攻击方式学习之(4) 拒绝服务(DOS/DDOS/DRDOS)
    gdb调试程序
    找找看XSS漏洞!!!
    C++实现发送HTTP请求
    Python天天美味(32) python数据结构与算法之堆排序
    (原创)攻击方式学习之(3) 缓冲区溢出(Buffer Overflow)
    Python天天美味(30) python数据结构与算法之快速排序
    CoderZh首款Python联机对战游戏 NancyTetris1.0倾情发布(一)
    ASCII表查看
    wxpython学习笔记
  • 原文地址:https://www.cnblogs.com/lixianfu5005/p/11048479.html
Copyright © 2011-2022 走看看