售前咨询:021-61521326
在线咨询:992173850
AM 9:00 - PM 18:00
13 2017-03

做好前端开发的六个必要条件

发布日期:2017-03-13
浏览数: 0

设计师设计出网页平面后,接下来的工作流程就到前端开发工程师这里,由网站前端制作负责将平面切图,并按照SEO优化等标准生成HTML静态页面,前端开发包括交互式设计、视觉设计、前端程序的实现以及前端架构的搭建,能让网站界面更好地呈现在用户面前。所以网站前端开发的工作非常的重要。接下来,我们一起看下网站前端开发的注意事项。

141900007a4a2d1d987c.jpg

1.良好的页面结构

页面结构的编写好比盖房的地基建设,其好坏会直接影响到 CSS 代码的质量、js 开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后,不要忙着动手开始,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。特别在大型项目中,合理使用模块化的开发不论从整体进行还是拓展维护都有相当大的好处。当然这也要求前端开发工程师拥有牢固的基础,需要熟练掌握HTML/CSS/客户端JavaScript。同时也需要熟练使用一些开发框架。

2.与项目相关人员的沟通

沟通很重要。前端开发需要完全了解设计师(包括美工和UI设计师)的设计意图,并将其完美实现。先抛出几个问题:我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大?有没有探讨过部分效果可以用 CSS3 实现从而使得结构更加简洁清晰?有没有在代码和视觉中寻追求过平衡?页面前端的开发向基本用户,编写的代码也直接作用在浏览器上,我们有义务对页面的稳定性和渲染效率负责。我们也经常碰到项目在总体进度压力下导致的设计与页面前端开发同步进行,这时更有必要尽量多地获取项目信息,了解我们还要做些什么,这些可以帮助我们充分考虑重用和框架拓展。同时也要做好与产品经理和项目经理之间的沟通,了解他们预期中网站最终呈现的效果和功能,并站在用户的角度上思考问题,考虑如何给用户提供有价值的功能,最终做到能平衡这四类人的需求和预期,然后在此基础上拿出最佳解决方案。

3.浏览器兼容

其实在第一次编写代码时,就已经可以开始考虑元素的样式是否会引起其他浏览器的兼容问题,防范于未然。举个常见的例子:IE中float元素如果同时设置了margin值,此时margin的值会变为双倍,解决办法是在该元素中加入display:inline。已知了BUG的解决办法,我们就可以在代码编写时养成一个习惯。比如说我们在为元素添加了float和margin值时,就为这个元素补上一个display:inline 这样就可以有效的避免页面出现双倍边距的BUG。所以在工作中要不断的记录与总结浏览器BUG的处理方式,并思考其规律与特性,在下一次编写代码时,提前加上相应的兼容性BUG处理的代码。通过不断的经验积累,慢慢的会发现自己所写的代码可以正常的在各浏览器中展现。

5.优化页面和代码

页面级别的优化,包括减少HTTP请求数、 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)、内联脚本的位置优化、减少不必要的 HTTP跳转、避免重复的资源请求等 ;代码级别的优化,包括 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化、Image压缩等等。有时候我们不知道哪些地方可以优化。这时候就可以使用Yahoo的YSlow,或者Google PageSpeed来检测页面的一些问题,如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。我们还应该借助于NetWork这一类的工具,查看页面加载时,一些比较漫的资源文件,并对其进行优化。在一些情况下,还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。

 6.善用辅助工具

除了实战经验和代码习惯的形成可以帮助我们提高效率外,想要提高自己开发的进度掌控能力还有很多辅助工具可以帮助我们进行页面开发。比如:Simpless,能够自动检测代码变化;CSSWrap ,CSS文本路径生成工具;LayerStyles ,能让你轻松配置阴影、背景、边框和边界半径。 Bookmarkleter,将你的JavaScript代码转换成一个小书签,帮助你进行代码压缩和URL编码;Browsers,实用的浏览器沙箱,你可以运行任何浏览器; Pingdom,可以测试网站的加载时间,并分析,帮助你找出瓶颈;HTML5 Test,测试浏览器对HTML5标准和规范的支持情况……运用好这些辅助工具,将大大提高前端开发的进度。

总之在web前端开发中,上海网站建设公司魅匠网络建议要想成为一个合格的前端开发工程师,需要不断的提升自己,学习并快速的掌握新技术,新模式,这些技术几乎每天都在变化,我们必须要赶上web发展的步伐,不断提升自己,多写,多看,多借鉴其他产品。


感觉好就要分享哦: