文章目录
  1. 1. Angular
  2. 2. Backbone
  3. 3. Console
  4. 4. D3.js
  5. 5. Express
  6. 6. Fork
  7. 7. Grunt/Gulp
  8. 8. Haslayout
  9. 9. Iconfont
  10. 10. Jsonp
  11. 11. Kissy
  12. 12. LocalStorage
  13. 13. Media Query
  14. 14. Npm
  15. 15. Opacity
  16. 16. Prototype
  17. 17. Querystring
  18. 18. Referrer
  19. 19. Seajs
  20. 20. Trim
  21. 21. Underscore
  22. 22. Vim
  23. 23. Web Worker
  24. 24. XSS
  25. 25. Yslow
  26. 26. Zepto

经常有人问我前端怎么学,怎么才能快速上手。其实我也没有标准答案。前端虽然可以简单的概括为 HTML + CSS + JavsScript, 但实际上要刨根问底儿的话远不止这些。

下面从26个字母表的顺序整理一下前端相关的知识点。

Angular

一款优秀的前端js框架,WebApp的优秀解决方案。包含MVVM模式、自动化双向绑定等特色功能。现由 google维护,每个前端不能错过的框架。

Backbone

Backbone小巧但很强大,基于MVC,上手容易,入门难度低,灵活性高。

backbone

Console

Console API虽然还没有成为一个正式标准,但是作为js调试利器,无人不知,无人不晓。
chrome下的F12、FireFox下的Firebug都有,IE8+ 在打开控制台时也可以使用该对象。

注意:在一些较老的浏览器中,只有在控制台打开时console对象才有定义。如果在控制台关闭的情况下运行那些使用 Console API 的脚本会导致错误。

D3.js

D3.js是一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象,所有方法都通过这个对象调用。

Express

Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。
官网 http://expressjs.com/

Fork

github的人都懂,fork本意是叉子之意,此处为分支分流的意思,执行fork动作后就会将别人的项目clone一份到自己的仓库,但是owner变成自己,目的是将来能够为项目贡献代码,一起 social coding.

Grunt/Gulp

前端自动化工具。
对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Haslayout

CSS布局相关知识点。
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)

Iconfont

在此之前我们使用CSS Sprite来进行碎图合并,减少http请求。现在使用的Icon font技术,是指用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。

推荐2个在线字体库:
阿里icon font字库
Font-Awesome

Jsonp

用于js跨域请求,原理是使用script标签的src属性的可跨域性质请求其他域名下的接口,使用灵活。缺点是只支持get请求,不支持post请求。

我封装过一个关于jsonp.js的类库:
fyjs.jsonp.js

Kissy

KISSY 是由淘宝前端工程师们发起创建的一个开源 JS 类库。
它遵循的原则是 小巧灵活、简洁实用、愉悦编码、快乐开发。
Keep It,Simple & Stupid, Short & Sweet, Slim & Sexy…Yeah!

LocalStorage

HTML 5新增本地存储功能。
参考:Html5中的sessionStorage和localStorage简介

Media Query

CSS3新增特性,中文称为媒体查询。Responsive Design的基础。

响应式设计示例

Npm

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准

Opacity

CSS 属性,可以设置元素滤镜和半透明效果。

Prototype

prototype既是一个js类库,又是javascript语言的核心,js是基于原型的语言。

Querystring

url中传参的好地方。

Referrer

互联网的本质是连接一切, Referrer 可以告诉搜索引擎上一个页面来自哪里。

Seajs

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。
SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯。

常与之并肩的是国外的require.js

Trim

任何编程语言都可以实现 trim 字符串的功能,与之对应还有 trimeLefttrimRight 以及 trimAll 等。

Underscore

underscorebackbone唯一依赖的js类库。
Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,它在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。

Underscore提供60多个方法,即有普通的功能,例如: map, select, invoke — 也有更多特殊的编程辅助方法,例如:函数绑定、javascript模板、绝对相等判断等待。 如果一些现代的浏览器提供了内置的 forEach, map, reduce, filter, every, some 和 indexOf方法,Underscore就委托给浏览器原生的方法。

Vim

Vim号称编辑器之神。是每个有情怀的程序员不可或缺的编辑器。

Web Worker

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据。

XSS

跨站脚本攻击(Cross Site Scripting),恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意攻击用户的特殊目的。(我的项目就被攻击过,骇客监听我的键盘事件,每秒都要发送一次请求到他的服务器,真是卑鄙啊)

Yslow

雅虎军规—— Yslow优化23条规则。每个前端必知必会。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1. 减少HTTP请求次数
合并图片、CSS、JS,改进首次访问用户等待时间。
2. 使用CDN
就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。测试
4. 为文件头指定Expires
使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
5. 使用gzip压缩内容
压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。旧文章
6. 把CSS放到顶部
7. 把JS放到底部
防止js加载对之后资源造成阻塞。
8. 避免使用CSS表达式
9. 将CSS和JS放到外部文件中
目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
11. 精简CSS和JS
12. 避免跳转
同域:注意避免反斜杠 “/” 的跳转;
跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录)
13. 删除重复的JS和CSS
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
“异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
是否存在一个是更贴切的标签可以使用?人生不仅仅是DIV+CSS
18. 避免404
有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
19. 减少Cookie的大小
20. 使用无cookie的域
比如图片 CSS 等,Yahoo! 的静态文件都在主域名以外,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
png24的在IE6半透明那种东西,别乱使,淡定的切成PNG8+jpg
22. 不要在HTML中缩放图片
23. 缩小favicon.ico并缓存

Zepto

zepto.js 是一个专为 mobile WebKit 浏览器(如:Safari和Chrome)而开发的一个JavaScript框架,移动端开发利器。
它标榜自己在其简约的开发理念,能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架,是超轻量级的,只有5KB。

zepto.js 的语法借鉴并且兼容jQuery。

文章目录
  1. 1. Angular
  2. 2. Backbone
  3. 3. Console
  4. 4. D3.js
  5. 5. Express
  6. 6. Fork
  7. 7. Grunt/Gulp
  8. 8. Haslayout
  9. 9. Iconfont
  10. 10. Jsonp
  11. 11. Kissy
  12. 12. LocalStorage
  13. 13. Media Query
  14. 14. Npm
  15. 15. Opacity
  16. 16. Prototype
  17. 17. Querystring
  18. 18. Referrer
  19. 19. Seajs
  20. 20. Trim
  21. 21. Underscore
  22. 22. Vim
  23. 23. Web Worker
  24. 24. XSS
  25. 25. Yslow
  26. 26. Zepto