唯雪博客

项目重构的一点小心得

     刚经历了一段加班不分昼夜,忙到昏天黑地的日子,年终果然不是吹的。接下来慢慢整理这段时间的收获吧

     相比去年加班加点的开发,今年主要是各种改版,修复,重构与前端优化;一番轰炸下来,收获还是蛮多的。

    今天就主要整理一下优化的心得:

     改版的这个项目,使用原生的js加jQuery实现的,第一次主导一个大型项目,技术菜,工期紧张,还找后台同事帮忙写了部分功能,想也能知道,代码稳定性极差,改一块影响一片,平时小改小动的就忍了。年底大改版,不重构是不行了,于是拉起兄弟伙们立马开干。

唯雪博客

    一、多封装,提高代码复用性,精简前端代码

    首先从冗余代码下手,系统部分模块的一个表格页面,JS代码居然多达上千行,代码散成一片,打开文件的时候差点昏过去。

    1、封装每个页面都会用到的翻页插件, 配置到公共资源js文件中,只需要在使用的地方引入文件,十多行代码调用即可。

    2、封装表格生成器,就是一个工厂函数,能根据传入的数据循环生成表格行列,使用方法同分页插件;

    3、封装Ajax请求,之前的Ajax请求散落在各个使用的角落,哪里要像服务器要数据就随手写一个,非常难管理;而且没有区分开发模式与生产模式,无法实现前后端分离开发,过于依赖后端接口,前端工作进度推进缓慢。

        于是先封装了一个区别开发与生产的识别方法,只需要通过简单的参数修改就可以轻松切换开发与生产模式,开发使用模拟接口数据,生产使用服务器接口,前端后端并行,联调也非常顺利,除了个别字段书写错误,基本一次成功,开发进度大大提高;

        统一管理接口,建立一个文件统一管理各种请求,这一步非常重要,所有的请求集中在一起,抛出后台返回的结果,只要开发时写好注释,修改请求什么的不要太方便,也利于后期代码维护。

    二、尽量减少HTTP请求

    仔细分析网站的网络请求,会发现只有10%-20%的最终用户响应时间花在接受请求的HTML文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上。这还得了必须优化啊。

    1、请CSS喝“雪碧”(CSS Sprites)CSS Sprites一句话:将多个图片合并到一张单独的图片,这样原本打开网页几十个图片请求变成了一个图片请求;

    2、样式表的合并将页面样式定义、脚本、页面本身代码严格区分开,但是样式表、脚本也不是分割越细越好,因为没多引用一个样式表就增加一次HTTP请求,能合并的样式表尽量合并。一个网站有一个公用样式表定义,每个页面只要有一个样式表就OK啦。

    三、使用内容发布网络(CDN的使用)

    什么叫内容发布网络(CDN)?它是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。主要用于发布页面静态资源:图片、css文件、js文件等。如此,能轻易地提高响应速度。

     网站的使用的基础大型框架比如jQuery、bootstrap等文件无需下载到本地引用,官方网站都提供了各个版本的cdn地址,只要能上网就绝对能使用,非常方便。

    四、将CSS样式表放在顶部,将javascript脚本放在底部

    可能初始不会在意外部样式表和脚本放在哪里的区别,能用就行,但是这点微小的差别还是体验感还是会有很大的不同;

    如果将css样式定义放在页面中或者页面底部,会出现短暂白屏或者某一区域短暂白板的情况,这和浏览器的运营机制有关的,不管页面如何加载,页面都是逐步呈现的。所以在每做一个页面的时候,用Link标签把每一个样式表定义放在head中;

    浏览器在加载css文件时,页面逐步呈现会被阻止,直到所有css文件加载完毕,所以要把css文件的引用放到head中去,这样在加载css文件时不会组织页面的呈现。但是对于js文件,在使用的时候,它下面所有也页面内容的呈现都会被阻塞,将脚本放在页面越靠下的地方,就意味着越多的内容能够逐步呈现。

    最后,其实还有一个非常重要的工作,就是缓存的使用,时间紧张,本次重构没能对缓存进行一个统一的处理与管理,缓存本身又是一个相当大的话题,等有时间再好好总结一下,今天就先总结到这里。

白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论