常用的前端文件的组织结构：
.js(放置javascript代码)
.lib(放置框架javascript文件)
.custom.js
.css(放置CSS样式代码)
.lib(放置框架CSS文件)
.images(放置用于样式中的背景图)
.reset.css(统一元素默认样式的样式文件)
.custom.css(业务相关样式文件)
.resource(放置页面图片文件以及其他类型资源文件)
.index.html
代码文件命名：
代码文件命名需要表明文件对应的模块内容、对应的版本号和文件格式等，例如：jquery的命名为：jquery-1.8.2.min.js，其中，jquery表明文件的内容，1.8.2表明文件的版本号，min表明此文件为文件的压缩格式版本。
前端代码重构过程：
1.删除无用的代码，精简代码。
无用的代码主要集中在CSS和javascript文件中，包括已经不起作用的CSS样式和废弃的javascript函数。
2.前端代码规范化。
页面HTML标签中还有大量的内联CSS样式，有些页面的head部分也有CSS样式，需要把这些样式放到独立的文件中；
调整代码的层次缩进格式，不同层级按照4个空格来缩进；
更改标准已不推荐的标签，如<center>、<b>等，改为由CSS样式控制；
统一命名规则，这里主要涉及HTML中的id和class名称；
在javascript中集中定义局部变量，并把部分全局变量转变为局部变量，缩小变量作用域。
3.整理基础库类
重构的内容是统一UI插件的使用，统一基础方法的使用。
4.前端代码模块化
按照模块归类CSS代码，放到模块对应的单独的CSS文件中
按照模块分离javascript代码，按照模块定义不同的命名空间
将javascript代码中的公共方法归类到独立的共通文件中，同时引入面向对象的思想来重构javascript代码，进一步明确公有接口和私有接口
5.提高页面的加载性能
将部分不影响首页展示的javascript文件延迟到页面加载后加载
删除页面中初始隐藏的区域，改为通过javascript按需动态生成
页面中的部分图片延迟加载
调整CSS和javascript文件中的引用顺序，即CSS在前javascript在后
给静态文件设置缓存
使用CSS sprint，合并首页背景图
合并和压缩发布后的CSS和javascript代码文件
前端重构最佳实践
1、重构前一定要预估风险，如果没有足够的自动化测试，最好是先完善自动化测试代码
2、重构的目的和范围要明确，重构的目的主要是提高代码的可维护性、可读性和性能
3、最好是先易后难，循序渐进。首先修改诸如命名、格式等不涉及具体逻辑哦内容，然后考虑模块化和性能提升等与具体逻辑相关的内容
4、重构过程中要持续测试，在多个浏览器中测试，确保重构部分功能正确
5、如果性能提升，要事先检测网站的整理性能并量化，找出性能瓶颈，重构过程中要持续检测性能，并对比性能提升的效果