前端应避免的一些误区

遗憾,在国内互联网行业大环境下,前端工程师包括javascript是被完全的轻视乃至误解,而后端php,java,c#工程师地位和薪资相对于前端工程师来说要好很多。

我个人认为,一个合格的前端工程师需要不断的学习,充实并且必须具备和掌握如下几个技能:

1,扎实的PHOTOSHOP技术,有独力设计能力。

2,写出高效且兼容各种浏览器的div+css。

3,精通javascript来实现各种客户端表现,可以利用各类javascript框架来加快开发。

4,精通Ajax,并且精通各种主流语言和javascript的通信,比如javascript和flash as的通信。

5,应该掌握整个项目或web产品的架构,并且能在团队开发之前提出希望其他团队配合前端工作的项目优化方案,比如GZIP,CDN,因为前端的优化不仅成效快,而且成本是最低的。

6,应该掌握一些服务器配置技能,比如GZIP,Expires等。

当然还有一些其他的关于性能提升的相关知识,我认为这才是前端的发展之路。好了,说了这么多我们现在来看下,工作中前端容易进入的一些误区。

误区1:css选择器。

很多前端认为:

1
.main div {width:100px};

这段代码是选择器先找到class名问main的dom元素,然后再找到这个元素下的div标签进行设置width宽度。实则不然,CSS选择器其实是从右向左的,真实的选择器工作流程是这样的:

选择器先遍历整个页面,找到所有div元素,然后在这些div元素找他们的父类,如果没找到class=”main”,则继续寻找父类的父类,直到找到class=”main”元素,然后将这些符合要求的div元素设置宽度样式。所以一旦页面上div很多,并且和class=”main”的元素层级很深时,就会影响到CSS选择器效率,所以我们尽量避免这样写。完全可以为这类div单独定义一个样式。

误区2:网站中的gif图片

很多前端认为网站的gif图片的应用不仅可以实现透明,更比jpg体积要小,所以很多网站使用了大量的gif图片。但是其实情况不是这样的,我们知道png图片有一种格式叫png-8,我曾经做过一个实验,同样的图片,png-8其实比gif图片占用空间更小,所以建议大家使用png-8来代替gif图片,它也支持透明和ie6。

误区3:网站内的为多个图片

很多网站都有小icon或者一些背景图之类的图片,前端把他们保存为不同的图片,殊不知这样做将会使请求变多,而且这些图片加起来的体积也会很庞大。正确的做法是按照页面或者模块,将那些图片整合到一张图片内,通过定义background-position来输出,这样不仅请求减少到了1次,而且整合后的体积要比单独的这么多图片要小很多。我们称这样的技术叫:CSS Sprites!

误区4:css expression

这样的代码称之为 css expression:

1
_top:expression(documentElement.scrollTop +100+ "px")

在这里我们强烈建议不要使用 css expression,这样做不仅把JS和CSS混为一谈,更加可怕的是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。这样的开销是非常吓人的,给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。所以我们推荐直接使用js给元素绑定事件,而非使用css expression。