前端切图与工具生成前端页面有那些区别？

从事前端切图外包行业多年，经常会有客户问及，使用现在在线的一些智能切图工具，如蓝湖、等切的前端网页和找专业前端技术人员开发的网页有什么区别？

提起这些智能工具，我想起很多年前，我们用过的网页三剑客，其中DreamWeaver（以下简称DW）就是以所见即所得著称的，也就是你在开发网页的时候，可以边写代码，边在预览框内查看实现的效果。但是后来，随着前端行业的发展，和对代码的熟练，这个功能逐渐没有多少人使用了。毕竟DW内置的预览器不如浏览器本身好使，要测试真实的前端切图的效果，还是要在真实的浏览器中进行测试。

而另一款工具，也是网页三剑客之一的Fireworks（以下简称FW），则有着将设计稿直接转为HTML页面的功能，这可能应该是最早期的智能生成HTML前端页面的工具了。通过FW的导出功能，便可以直接生成HTML和相关的样式文件。特别方便。不过局限在于，当年FW的时代，我们的认知只有HTML、CSS和JS。而现在，前端开发的大世界里有了很多的新成员，比如：Vue、React等等。百变不离其宗，诸如蓝湖等这些可以只能生成前端页面的工具，其实也就是融入了更多技术选项，优化了工具生成的代码而已。

那么，问题来了，智能工具生成的前端页面和前端开发人员手工切的页面有什么区别呢？

还是那句话，脱离场景谈应用是不科学的，我们先说智能生成前端页面的好处：

1、效率高，非常快：

把设计好的设计稿导入工具中，快则几秒，慢则几分钟，即可生成对应的前端HTML代码。而人工进行前端切图的话，少则几小时，慢则几天都是有可能的。所以说，效率高是智能生成前端最显著的特点。

2、成本低，节省费用：

使用工具生成页面，大多免费，有一些收费的工具也只是收取很少的费用。相对人工切图，根据页面的复杂程度，可能会在几百几千左右，有些复杂的页面甚至是以万元作为单位的。

说完智能生成前端页面的好处，我们在来说其弊端：

1、代码冗余，页面重：

生成的前端页面，普遍存在页面重，代码冗余的现象，因为是程序生成，很多东西都是提前预设的，所以较为死板，在页面实现过程中不是很灵活，甚至会因为程序为了全面照顾，而加载很多无用的代码或文件。

2、语义化弱，修改成本高：

因为所有的标签都是提前预设好的关键词+随机字符串组成的，所以在维护的时候，会比较吃劲。如果你想再将智能生成的页面嵌套后端程序，整合成完整的网站，那么难度是相当大的。

综上所述，智能生成的页面有优点也有缺点，当然，脱离应用场景谈利弊是不正确的，正所谓存在即合理，我们要结合实际场景才能具体的说到底是智能生成的前端页面好还是手工生成的前端页面好。

一般而言，工具生成的前端HTML页面适用于短期的宣传单页生成，比如你要做一份单页，但是只用几天甚至更短的时间，那就完全没有必要一行一行的去实现，工具生成是最佳的选择。甚至，如果你不考虑用户体验，预算充足的情况下，工具智能生成的前端页面也可以用于竞价场合。

而如果你要做的页面要长期使用，或者想搭建一个完整的站点，那么这种情况下不建议使用工具生成前端页面。

以上仅为切图匠的观念，欢迎大家一起讨论。