网站重构
网站重构
PHODAL

什么是重构

重构,一言以蔽之,就是在不改变外部行为的前提下,有条不紊地改善代码。

相似的

代码重构(英语:Code refactoring)指对软件代码做任何更动以增加可读性或者简化结构而不影响输出结果。

网站重构

与上述相似的是:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。

基础网站重构

过去人们所说的网站重构

把"未采用CSS,大量使用HTML进行定位、布局,或者虽然已经采用CSS,但是未遵循HTML结构化标准的站点"变成"让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现,使页面的实际内容与它们呈现的格式相分离的站点。"的过程就是网站重构(Website Reconstruction)

依照我做过的一些案例,对于传统的网站来说重构通常是

  • 表格(table)布局改为DIV+CSS
  • 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
  • 对于移动平台的优化
  • 针对于SEO进行优化

高级网站重构

过去的网站重构

所谓的网站重构就是“DIV+CSS”,想法固然极度局限。但也不是另一部分的人认为是“XHTML+CSS”,因为“XHTML+CSS”只是页面重构。

而真正的网站重构

应包含结构、行为、表现三层次的分离以及优化,行内分工优化,以及以技术与数据、人文为主导的交互优化等。

深层次的网站重构应该考虑的方面

  • 减少代码间的耦合
  • 让代码保持弹性
  • 严格按规范编写代码
  • 设计可扩展的API
  • 代替旧有的框架、语言(如VB)
  • 增强用户体验

通常来说对于速度的优化也包含在重构中

  • 压缩JS、CSS、image等前端资源(通常是由服务器来解决)
  • 程序的性能优化(如数据读写)
  • 采用CDN来加速资源加载
  • 对于JS DOM的优化
  • HTTP服务器的文件缓存

可以应用的的方面

  • 使用Ngx_pagespeed优化前端
  • 解耦复杂的模块
  • 对缓存进行优化
  • 针对于内容创建或预留API
  • 需要添加新API,如(weChat等的支持)
  • 用新的语言、框架代码旧的框架(如VB.NET,C#.NET)

网站重构目的

希望自己的网站

  • 成本变得更低
  • 运行得更好
  • 访问者更多
  • 维护愈加简单
  • 功能更强

网站重构参考

适用于一般网站优化

适用于高级网站重构

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享