前端页面的代码，写页面的速度太慢了， 有没有办法提升加快静态页面的速度 效率，

Question

前端页面的代码，写页面的速度太慢了， 有没有办法提升加快静态页面的速度 效率，
出一个单页面的设计图之后， 一个页面的用HTML CSS 写出来静态页面的时间效率 要1天半才出来， 感觉自己的写页面的速度太慢？

各位朋友有什么 好的建议吗？提升页面的建议，

https://www.zhihu.com/question/20929391

Answer 1

题主这个问题是我一直在思考的 :\

以我多年做页面得到的结论是：

1. 得先分析你收到的所有页面，并统计可重用模块（什么页头页脚、输入框、搜索等等）

2. 根据分析出来的模块写样式，这里建议再弄个样式展示页，不单只给自己看，接手项目的同事也能看！

3. 制作简单的UI逻辑及编写一下控件，例如AJAX图片上传控件这类的，然后弄到样式展示页上。

一般经过上面三步大概要化两天多一点的时间，这样做的目的是为了梳理好你需要做的工作，从而你就清楚需要哪些工具及哪些工具能更快帮助你解决问题。

当你熟练以上三步之后，你会发觉TM的3个页面我一天就干完了，因为都一个鸟样！

PS：如果你页面交互操作较多建议使用vuejs这个来处理动态变化，推荐原因是入门快有中文文档使用非常方便特别是表单的数据绑定简直爽飞了！

Answer 2

用模板引擎+预处理器会方便点

Answer 3

zen coding

Answer 4

想办法提高代码的重用性.对于一些相似的模块是用一个模块css 的。div结构也可以复制，，

Answer 5

1、适当使用ui框架，像bootstrap或者amaze提高效率
2、使用预处理器lesssass等
3、重用组件
4、多写页面啦

Answer 6

我刚实习的时候也在苦恼这个问题。现在分几点来说说吧。

• 首先你说的主要是切图方面也就是css方面，这个我尝试了scss，然后因为这个代码不是我一个人维护而且团队其他人没用这个，我没有找到好的解决方法去解决其他人直接修改css而我修改sass问题，所以放弃。

• 接着老大告诉我说写页面要注重分模块去写，也就是重用性。这一点很重要，因为维护一个公司的网站，设计师设计的时候通常会有几个不同页面有相同的模块，比如弹出层，比如按钮一类的。这个就可以注意一下，下次碰到你可以直接套用。

• bootstrap我个人感觉如果有设计稿的话用起来不是太舒服，感觉有局限性。
  总结一下，写多了自然就快了。

Answer 7

1，主要是前期考虑各种兼容问题，后边的调试工作就会减轻不少
2，以前写过的样式可以储存，进行合理地套用
3，每天多浏览前端的各个知识点，共勉吧