JavaScript

关于前端开发这份工作

一直想写点关于前端开发职位本身的文字,但写了好几次都没发。最近又在持续的招聘,对应聘和招聘有些感想,零散的写多少算多少吧。

关于“前端开发工程师”这个职位
当一个词开始泛滥,就会被人忘记它的本意。我只讲我认为的解释。首先,它是“开发工程师”,也就是程序员。其工作内容的本质,就是写代码。所以,程序员应该具备的素质,比如逻辑能力,写代码的水平等等,算是它最最基础的要求。

在此之上,则是另一个要求:“界面开发”。对“看得见”的东西的感觉要敏锐。这偏偏是大多数重于理性思维的普通开发工程师,所无法具备的一项能力。坦率的说,这也是前端开发工程师与众不同,可以引以为傲的地方。前端开发职位,正是一个将看不见的逻辑转化为看得见的图形的重要角色,也可以说,一个优秀的网站产品,“最终”的成败系于前端开发这一环。

如何入行前端开发
由于现在这个劣币驱逐良币的年代,前端行业里滥竽充数太多,真正优秀的又都各占着坑不大挪窝,所以有必要仔细回答一下这个问题,以期更多有潜质的人能加入我们。我按当前状态来分类:

如果,你正在从事“网页设计”、“网页制作”方面的工作。我得先说明一下,“会做网页”不等于“前端开发”。再重复一遍:前端开发是写代码的,是用代码来构建网页界面和交互。如果还不明白,我举个例子。在宜家买个电脑桌,带回来需要自己把几块板拼成电脑桌。这个过程你会做,但绝对不会有人把你称作家具木匠。这只不过是有现成的材料,按照图纸把成品拼装起来而已。前端开发,就相当于给一块木头,要从刨木头弹墨线开始做。也不要以为今后WYSIWYG工具发达了,就没前端堆代码这碗饭。但凡纯手工打造的都是上乘精品,再过一百年,这个道理都会在的。(这样说,感觉自己好像深山里的老师傅,hoho)

如果,你正在从事“软件开发工程师”方面的工作。那你遇到的就是另一个问题了:对于界面的敏锐度。其实前端开发也不用做设计,所以不需要知道该如何“做菜”,但一定要知道好吃不好吃。能够知道什么界面的是好看,什么界面是不好,这其实并不容易。我其实也很困惑,为什么大多数人对界面好看不好看没有什么感觉。但苹果告诉我们,界面好看到极致,确实是可以比一般的产品多出一些价值的。

如果,你正在从事“前端开发”方面的工作。那就需要问问自己几个问题了:对于前端开发所必须的技术,你掌握多少?“够用就行”的知识量,是无法胜任“真正的前端开发”的。这里有一个很重要的问题:我接到的很多简历,确实可以看到对方过去一直在从事前端开发工作,但给我的案例都是非常糟糕的。如果说,过去的工作环境让你无法做出自己想做的东西,我认为这不是值得体谅的借口。我也面试过很多来自不好的公司的人,他们同样给了我他们自己平时做的实验性作品。诚然工作环境局限会让一个人很容易止步,但我真正欣赏的其实是对前端开发本身充满热情的人。之前的“堆代码”,只是我的一种戏称。如果你真的觉得前端是无聊的堆代码,那其实也无法指望在将来有不断的进步。其实,任何一份工作都是这个样子的,只有热情才能将人推向完美。

如果,你只是一个“前端开发爱好者”,比如,只是一名学生,还没有工作经验。其实我经常会遇到这个来自菜鸟的问题:怎么学CSS或JS。那,如果认真的打算作为职业来学习,有几个简单的忠告:

1. 通读权威指南。不要瞎读,外面烂书太多。倒不是说烂书学不到知识,它们之所以是烂书,是因为它们缺乏一种“正确的价值观”。什么是卓越的方法,什么是优雅的代码,这些都是有“品味”和“格调”的。由于我近期看的书不多,也不想为别人打广告,所以我只能给出一个简单但绝对不会错的答案:看《权威指南》。

2. 多做自己想做的练习。比如自己做一个简历网站或是博客,把想用的技术都用上去,做了一版再做一版。不要指望通过接外包项目之类的能给你带来技术上的提高,替他人做嫁衣其实让你很难很好的发挥的。

3. 多向他人学习。这不是说你得缠着个高手整天帮你解答问题。但凡技术高手,都是自学、google、自己琢磨+和人讨论的。计算机技术,向来不存在“教会(呃,第一个字念一声)”这一说。多和别人交流,共同提高,这才是正确的做法。

我还会其他的技能
我也时常会接到简历,声称会设计,会flash,会PHP或.NET。淘宝倒是一直要求应聘的前端开发一定要会一门非前端编程语言。我想他们的本意或许是在强调我开篇的第一点:前端开发是开发工程师。回到开初的问题,会一些周边的技能,对前端开发是否有帮助?答案当然是肯定的。但我在面试时从来对这些方面只字不问。对于一个优秀的前端开发,最重要的仍然是对前端技能本身的精通,而我相信,当你全身心投入在前端技能上时,是不大可能将其他的技能也同样做到精通的。既然不精通,我也没必要测试了。如果来者说会这些,我知道了,我也相信,就可以了。反过来,如果你真是对前端技能精通,是不可能对这些周边知识一无所知的。其实,它们都是和前端开发工作紧密结合的,很容易触类旁通。就像一个优秀的网页UI设计师,是不可能对HTML一窍不通的。

只会CSS或只会JS
一般而言,前一种情况比较多:CSS简单嘛。aoao同学说,百度是愿意要的,当前前提是“足够精通”。而淘宝的招聘广告则是狠狠的说:两者都要好。我个人是觉得,可以容许在前端开发中再细分为界面工程师和JS工程师的。但前提是,这个team已经有足够的钱来养一个大大的前端开发团队。至少对于小公司(比如偶们公司),仍然希望来者身上有足够多的剩余价值可以被榨取(hoho)。

先写这么些吧。其实,还有一些关于前端开发职业发展的想法,等我下次无事可做时再说吧。

本文来源:小麦的自习教室



HTML中的iframe

虽说iframe对seo不够友好,但也不失为一种没有办法的方法。记得以前从哪里看过一篇文章说Google AdSense就是利用iframe插入到各种各样千奇百怪的网页中去的。
—————————————————-
iframe生成文档中的浮动帧。浮动帧与普通帧不同,是另一HTML文档中可以独立操作的元素。

代码示例:
<IFRAME   align=left   border=0   frameborder=0   framespacing=0
marginheight=0   marginwidth=0   width=774   height=60
noResize   scrolling=no   src=”HTTP://WWW.163.COM”>
</IFRAME

代码示例:
<IFRAME    border=0   frameborder=0   framespacing=0 marginheight=0 marginwidth=0 width=774   height=60  scrolling=no  src=”http://WWW.chesanqi.COM”>
</IFRAME>

属性:
order=”n”                  //指定浮动帧的边框厚度(像素);

BorderColor=”#ccc”    //指定浮动帧的边框颜色(可以是颜色名和16进制代码);

FrameBorder=0   //指定浮动帧是否显示边框,0为不显示,1为显示;

FrameSpacing=”n”       //表示相同浮动帧之间的间距(像素);

Height=”n”                 //指定浮动帧竖直方向的尺寸(像素);

HSpace=”n”               //指定浮动帧内左右边界的大小(像素);

ID=”…”                     //指定<IFRAME>标志实例的唯一ID选择符,可以此ID为它指定样式;

MarginHeight=”n”       //指定浮动帧上下边界的大小(像素);

MarginWidth=”n”        //指定浮动帧左右边界的大小(像素);

Name=”…”            //指定帧的唯一名称,可以在其它帧中向这个帧名装入新文档或操作其属性;

NoreSize           //指定浮动帧不可调整其尺寸,此属性只在IE中有用;

Scrolling=no     //指定浮动帧是否有滚动条;yes为有,no为没有。

Src=”url”           // 指定装入浮动帧的文档文件的相对或绝对路径;

Style=”…”         //指定浮动帧中内容所采用的样式单命令;

Width=”n”         //指定浮动帧的水平尺寸(像素);

VSpale=”n”       //指定浮动帧中上下边界的尺寸(像素);

IFRAME 元素也就是文档中的文档,或者好像浮动的框架(FRAME)。frames 集合提供了对 IFRAME 内容的访问。

使用 frames 集合读写 IFRAME 内包含的元素。例如,如果要访问 iframe 内 body 对象的 backgroundColor 样式,语法应为:

sColor = document.frames(“sFrameName”).document.body.style.backgroundColor;

通过 iframe 对象所在页面的对象模型,你可以访问 iframe 对象的属性,但不能访问其内容。例如,访问 iframe 对象的 border 样式的语法应为:

sBorderValue = document.all.oFrame.style.border;

注意 iframe 的属性必须使用前缀 document.all 访问,例如

document.all.iframeId.marginWidth。



Yahoo给出的34条网站加速方法

Yahoo给出的包括Yslow规则(22条)的34条 详细说明 ,通过这此规则对自己页面进行一次全面的分析优化,可以提高你网站的加载速度。

1.Minimize HTTP Requests 减少HTTP请求
图片、CSS、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。

2.Use a Content Delivery Network 利用CDN技术
CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。

3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存
浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

4.Gzip Components Gzip压缩
Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到这里 做下测试。

5.Put Stylesheets at the Top 把CSS放顶部
让浏览者能尽早的看到网站的完整样式。

6.Put Scripts at the Bottom 把JS放底部
网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。

7.Avoid CSS Expressions 避免CSS Expressions
CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死!~

8.Make JavaScript and CSS External 将JS和CSS外链
前面讲到了缓存这个事情,一些较为公用的JS和CSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~

9.Reduce DNS Lookups 减少DNS查找
貌似是要减少网站从外部调用资源,我的Google分析和picasa的外链图片都算在里面了。

10.Minify JavaScript and CSS 减小JS和CSS的体积
写JS和CSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。

11. Avoid Redirects 避免重定向
再写入链接时,虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

12. Remove Duplicate Scripts 删除重复脚本
重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费。

13. Configure ETags 配置ETags
搞不清楚咋回事,总之我是在. htaccess里把它删除了。

14. Make Ajax Cacheable 缓存Ajax
Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率。

15. Flush the Buffer Early 尽早的释放缓冲
当用户进行页面请求时,服务器端需要花费200到500毫秒时间来拼合HTML,将写在head与body之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率。

16. Use GET for AJAX Requests 用GET方式进行AJAX请求
Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。

17. Post-load Components 延迟加载组件
最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader 是很好的例子。

18. Preload components 预加载组件
提前加载以后可能用到的东西,和延迟加载并不冲突,它的目的是为后续请求提供更快的响应,参见Google首页上的CSS sprites应用。

19. Reduce the Number of DOM Elements 减少DOM元素数量
复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。

20. Split Components Across Domains 跨域分离组件
页面组件多个来源可以增大你的平行下载量,但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费。

21. Minimize the Number of iframes 减少iframe数量
需要更有效的利用 ifames。
iframe 优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本
iframe 缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义

22. No 404s 不要出现404页面
站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源。

23. Reduce Cookie Size 减小Cookie
Cookie在服务器及浏览器之间的通过文件头进行交换,尽可能减小Cookie体积,设置合理的过期时间,能够很好的提高效率。

24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名
对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放你的静态组件式一个好方法,或者也可以在Cookie中只存放带www的域名。

25. Minimize DOM Access 减少DOM的访问次数
JS访问DOM是很慢的,尽量不要用JS来设置页面布局。

26. Develop Smart Event Handlers 开发灵活的事件处理句柄
DOM树上过多的元素被加入事件句柄的话,反应效率肯定会低,YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

27. Choose < link >over @import 使用< link >而非 @import
在IE中使用@import就和在页面底部用< link >一样,我们前面说要把< link >放顶部的。

28. Avoid Filters 避免过滤器的使用
如果需要Alpha透明,不要使用AlphaImageLoader,它效率低下而且只对IE6及以下的版本适用,用PNG8图片。如果你非要使用,加上_filter以免影响IE7+用户。

29. Optimize Images 优化图片
将你的GIF转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPG及PNG图片以达到优化效果。

30. Optimize CSS Sprites 优化CSS Sprites
在CSS Sprites中竖直并尽量紧凑的排列图片,尽量将颜色相似的图片排在一起,会减小图片本身的大小及提高页面图片显示速度。

31. Don’t Scale Images in HTML 不要在HTML中缩放图片
图片要用多大的就用多大的,1000X1000的图片被width=”100″ height=”100″以后,本身的KB数是不会减少的。

32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它
站点的浏览器ICO应该不是经常换吧,那就长时间的缓存它,并且最好控制在1K以下。

33. Keep Components under 25K 保证组件在25K以下
iPhone不能缓存25K以上的组件,并且这还是要在被压缩前。

34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中
就好像在邮件中加入附件一样,一个HTTP请求就够了,但是这一技术需要确保你的代理支持,iPhone就不支持。

译文:http://paranimage.com/yahoo-given-34-web-acceleration/


Copyright © 2008-2012 Chesanqi's Web World. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress