重构的过程主要分为如下几个步骤:

1、删除无用代码,精简代码
 
修改的过程需要注意,不停地查看函数和变量在上下文的调用关系,以免删错代码。
 
2、前端代码规范化
 
将css代码放到独立的文件中
调整代码的层次缩进格式,不同层级按照4个空格缩进
更改标准已不推荐的标签,如<center>、<b>,改为由css控制
统一命名规则
缩小变量作用域,尽量将全局变量变为局部变量
 
3、整理基础类库 
对于引入的多个框架,相同的实现可能使用的是不同类库中的功能,如DOM选择、AJAX请求等。需要统一基础方法的使用。
 
4、前端代码模块化
 
按照模块归类css代码,放到模块对应的单独css文件中
按照模块分离JavaScript代码,按照模块定义不同的命名空间
将JavaScript代码中的通用方法归类到独立的共通文件中,同时引入面向对象的思想重构JavaScript代码,进一步明确公有接口和私有接口
提高页面加载性能 
1)将不影响首页展示的JavaScript文件延迟到页面加载后加载 
2)删除页面中初始隐藏的区域,通过JavaScript按需动态生成 
3)页面中的图片延迟加载 
4)css文件放到JavaScript文件前面 
5)静态文件设置缓存 
6)使用css sprite,合并首页背景图 
7)合并和压缩发布后的css和JavaScript代码文件
 
前端重构最佳实践
重构前预估风险。若没有足够的自动化测试,先完善自动化测试代码。
明确重构的目的和范围,不要盲目修改。
先易后难,循序渐进。首先修改例如命名、格式等不涉及具体逻辑的内容,然后考虑模块化和性能提升等与具体逻辑相关的内容。
重构过程中要持续测试。在多个浏览器中测试,确保重构的部分功能正确。不要在大量重构后再测试,可能遗漏部分测试用例。
如果是性能提升,则事先检测网站的整体性能并量化,找出性能瓶颈。重构过程中持续监控性能,对比性能提升的效果。