前端开发那些事

正邪

前端开发工程师@非你莫属

@姚劲波:我们技术负责人发来:前几期《非你莫属》里提到了web前端工程师,现在行业里分得比较细,一般指利用(X)HTML/CSS/JavaScript/DOM/FLASH等各种技术进行产品的界面开发,后台开发语言熟悉最好,但一般仅需了解即可。。。不熟悉啊,所以那哥们我没有招到,看来得继续学习技术。有志前端同学别被我误导了。

这深度!其实比马总强多了!!!
浏览器大战
第一個浏览器WorldWideWeb (1990)
流行开来的Mosaic (1993)

支持IMG标签

第一款商业浏览器Navigator (1994)
Internet Explorer首次发布 (1995)
Opera(2.0)首次发布 (1996)
网景被收购,Mozilla项目成立 (1998)
IE6 (2000)
Safari首次发布 (2003)
Firefox 1.0 (2004)
IE7 (2006)
Chrome参战 (2008)
HTML5是什么?
维基百科中文站

包括HTML、CSS和JavaScript的一套技术组合。

希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。

维基百科英文站

互联网上用于构造和展现内容的一个标记语言。

还在开发当中。目的是支持多媒体;增强代码可读性;便于机器理解。

Mozilla社区

HTML的新版,拥有新的元素,属性和行为。

是一个很大的技术集合,帮助构建强大的网站和应用。

虽不明 但觉厉
你肯定是这么想的

浏览器中那些amazing的东西就是

HTML5
比如这张幻灯片
又比如
Loading...

WebGL Water

Made by Evan Wallace

Interactions:

  • Draw on the water to make ripples
  • Drag the background to rotate the camera
  • Press S to pause and unpause
  • Drag the sphere to move it around
  • Press the D key to set the light direction
  • Press the G key to toggle gravity

Features:

  • Raytraced reflections and refractions
  • Analytic ambient occlusion
  • Heightfield water simulation *
  • Soft shadows
  • Caustics **

* requires the OES_texture_float extension
** requires the OES_standard_derivatives extension

Tile texture from zooboing on Flickr

HTML(5)的发展史
  • HTML1
  • HTML2
  • CSS1 + JavaScript
  • HTML4
  • CSS2
  • AJAX
  • HTML5
其实
HTML5

意味着一个时代的到来

前端工程师在干嘛?
切图
复原设计稿
复原交互原型

github语言排行榜

兼容IE6
兼容IE7
兼容其它浏览器
提升网站性能

80%-90%用户的等待时间是来自于前端的页面加载

页面慢500ms 销售额下降20% - Google

页面慢100ms 销售额下降1% - Amazon

我们的实践
代码预览
实时文档
自动化工具
CDN资源合并, 减少HTTP请求数
性能分析
Thank You!
Fork me on GitHub