何谓网页重构

前端重构平时做什么

1. 前端架构：文件结构规划、结构样式模块化
2. 页面制作：稳健、保真（交互、视觉）、可扩展
   如何去读一个视觉稿：最高境界是眼中有图，手中无图（用代码实现效果）
3. 规范整理：代码的复用性、易用性、对交互和设计规范的支持
4. 性能优化：节省带宽、提高加载速度
   bigpipe
   减少http请求
   预先加载
   延迟加载
   按需加载
   文件加载顺序
   repaint/reflow
   filter
5. 工具开发：提高工作效率
6. 设计顾问：可以利用的新技术、成本和可实现性评估

前端重构如何完成这些工作

1. 语言
   关心W3C（box属性的支持性变化）
   HTML：HTML5(canvas 其他tag) DTD/DOCTYPE
   XML
   CSS：CSS3/4、动画、LESS、SCSS
   Javascript：ajax json API jquery jQmobile（处理交互） 
   SVG
   正则表达式
2. 技术（技术之间都是有联系的，而非孤立的技术）
   带宽优化：图片/文件的压缩
   加载优化：减少请求（减少http请求、预先加载、延迟加载、按需加载、利用缓存）；优化体验（文件加载顺序）
   渲染优化：减少repaint/reflow（动画中改变top值和改变translateY的区别）、避免filter等
   代码规范：代码规范（xhtml1.0规范、css的border:none和border:0的区别等）
   兼容规范：兼容范围
   业务规范：架构、z-index、设计、浮层、动画
   图片技术：格式（GIF/JPG/PNG(8,8a,24,32)/WBMP/WebP）、压缩（节省带宽）、base64（减少请求）、sprite（减少请求）、retina兼容（img/background-image/border-image）
   字体技术：font-face(google font、字蛛)、字符icon
   PC端浏览器兼容：Chrome(-webkit-)、Safari(-webkit-)、Firefox(-moz-)、Opera(-o-)、IE(-ms-)；IE filter；内核：trident(IE)、webkit(Safari)、blink(chrome/opera)、Gecko(firefox)、Presto(opera前内核，现blink)
   移动端技术：Viewport、事件（tap和click的区别）、媒体查询等
   移动设备兼容：ios4(fix) android2.3.3(圆角) android2.3.5(动画) android4.0（字体）等
3. 工具 
   环境：LAMP(Linux, Apache, MySQL, PHP)、IIS 
   编辑器：Sublime Text（插件）、Dreamweaver（Adobe在响应式设计上的努力）
   库和组件：Bootstrap、jQuery、Github
   设计工具：PS、FW、AI、FL（可转HTML5）、Sketch、Axure、Mindjet、MU、Animate 
   设计思想（含技术）：栅格系统（Grid System）、响应式设计(移动优先、工作流程、性能考虑、RESS)、视差滚动、大背景(视频)、字符icon（IcoMoon、Font-awesome（bootstrap））
   流程优化工具：CSSGaga、Grunt、Bower
   版本管理工具：SVN、Git
   PC端浏览器调试工具：浏览器开发者工具(Firebug、F12开发人员工具、开发者工具、难用的Dragonfly)、Yslow、Fiddler(Willow)、BeyondCompare 
   移动设备调试工具：Weinre MIHTool、EdgeInspect 
   模拟器：XCode、AndroidSDK 
   图片压缩工具：PNGgauntlet、优图、imageOptim(Mac)
4. 其他效率工具
   云同步：GoogleDrive、OneDrive、Dropbox、Box、微云
   Evernote
   浏览器书签同步
   RSS（Feedly、从前的Google Reader）
   花瓣（Pinterest）
   Instapaper

本文转载自：http://bennychia.com/design/2015/03/27/%E4%BD%95%E8%B0%93%E7%BD%91%E9%A1%B5%E9%87%8D%E6%9E%84/