网站前端开发的“规则”

在设计师设计完网页平面之后，下一个工作流程是给前端开发工程师。网站前端制作负责根据SEO优化等标准进行平面裁剪和HTML静态页面生成。前端开发包括交互设计、可视化设计、前端流程的实现和前端架构的构建，使网站界面更好地呈现在用户面前。所以前端开发工作非常重要。接下来，让我们来看看网站前端开发的注意事项。

页面结构的编译就如同建造房屋的基础结构。它的质量将直接影响CSS代码的质量、JS开发、后台开发以及未来的页面扩展、迭代和页面调整。拿到视觉手稿后，不要忙于开头，多观察、多思考。首先分析布局，划分框架，然后规划结构并编写代码。特别是在大型工程中，合理使用模块化开发无论从整体还是扩展维护上都具有相当的优势。当然，这也要求前端开发工程师有一个坚实的基础，掌握HTML/CSS/Client java。同时，我们需要熟悉一些开发框架。

沟通很重要。前端开发需要充分理解设计师（包括美工和界面设计师）的设计意图，并将其实现。让我们从几个问题开始：我们是否与设计师讨论过一些效果对低端浏览器的渲染效率有很大影响？我们是否讨论过CSS3可以达到一些效果，使结构更加简洁明了？我们是否追求过代码和愿景的平衡？页面前端的开发是面向基础用户的，我们编写的代码也直接影响到浏览器。我们有义务负责页面的稳定性和渲染效率。我们经常会遇到项目的设计和页面前端开发是在整体进度的压力下同步进行的。此时，更需要尽可能多地获取项目信息，了解我们需要做什么，这可以帮助我们充分考虑重用和框架扩展。同时，还要与产品经理和项目经理沟通，了解他们期望的网站终效果和功能，从用户的角度思考问题，考虑如何为用户提供有价值的功能，终平衡这四类人的需求和期望，然后在此基础上提出解决方案。

实际上，在初次编写代码时，您可以开始考虑元素的样式是否会导致其他浏览器的兼容性问题，并加以防范。举一个常见的例子：如果IE中的float元素同时设置了margin值，margin的值将加倍。解决方案是添加元素显示：内联。考虑到错误解决方案，我们可以养成编写代码的习惯。例如，当我们向元素添加浮点数和边距值时，我们会添加显示：内联此可以有效避免页面上的双页边距错误。因此，在工作中要不断记录和总结浏览器bug的处理方法，并思考其规律和特点。在接下来的代码编写中，我们应该提前添加相应的兼容bug处理代码。通过不断的经验积累，我们会逐渐发现我们编写的代码可以正常地显示在每个浏览器中。

页面级优化，包括减少HTTP请求的数量，在底部设置外部脚本（加载页面信息内容后加载脚本内容），优化内联脚本的位置，减少不必要的HTTP跳转，避免重复的资源请求等；代码级优化，包括DOMJava操作优化、CSS选择器优化、图像优化、HTML结构优化、图像压缩等。有时我们不知道在哪里优化。此时，您可以使用Yahoo的Yslow或Google页面速度来检测页面的一些问题，例如是否启用了gzip、是否压缩、合并、minifyjs代码等。我们还应该使用网络等工具在加载页面时查看和优化一些更分散的资源文件。在某些情况下，您需要使用诸如chrome的timline和profiel之类的工具来查看可以在哪里进行优化。

除了实战经验和代码习惯的形成可以帮助我们提快捷率外，还有很多辅助工具可以帮助我们开发页面，以提高我们自身开发的进度控制能力。例如：simpless，它可以自动检测代码更改；csswrap，它是CSS文本路径生成工具；layerstyles，它允许您轻松配置阴影、背景、边框和边界半径。Bookmarklet，把你的Java代码转换成一个小书签，帮助你进行代码压缩和URL编码；浏览器，一个实用的浏览器沙盒，你可以运行任何浏览器；Pingdom，你可以测试网站的加载时间，并对其进行分析，帮助你找到瓶颈；html5test，使用这些辅助工具测试浏览器对HTML5标准和规范的支持，将大大提高前端开发的进度。

总之，要想成为一名合格的Web前端开发工程师，我们需要不断提高自己，学习和快速掌握几乎每天都在变化的新技术和新模式。我们必须跟上网络发展的步伐，不断提高自己，多写，多看，多学其他产品。