前端知识汇总

自动化构建工具

• Grunt
• Gulp
• fis3

包管理工具

• npm
• bower
• yarn

模块打包工具

• Browserify
• Webpack

脚本语言

• CoffeeScript
• TypeScript
• ECMAScript 6 (Babel)
• JSX

模块加载规范

• CommonJS
• AMD (request.js)
• CMD (sea.js)
• UMD

消息推送技术

• Comet
  • Long polling
    • XHR long polling
    • Script tag long polling
  • Streaming
    • Hidden iframe with "Chunked Transfer Encoding"
    • XHR onreadystatechange
• Server-Sent Events
• WebSocket
• Flash XMLSocket

前端框架

• Backbone.js（MVC）
• Angular.js（MVVM）
• Ember.js（MVVM）
• Vue.js（MVVM）
• React.js
• Redux
• Bootstrap

Javascript 工具库

• jQuery
• Underscore.js
• Zepto.js
• lodash

CSS 相关

• LESS
• SASS
• Bootstrap
• Pure

跨域解决方案

• JSONP
• CORS
• <iframe> 设置 document.domain 实现下级域名与上级域名交互
• window.postMessage

网页优化

• HTTP/2
• Sprite
• 图片延迟加载
• 脚本加载优化（加载脚本会阻塞渲染）
  • Inline script
  • </body> 标签底部加载
  • <script async>：缺点是不能实现加载顺序依赖
  • AMD
• CSS加载优化（加载CSS样式表会阻塞渲染）
  • Inline style
  • 延迟加载或异步加载
• HTML加载优化
  • Bigrender：页面一次加载全部数据，但先渲染首屏，页面滚动触发渲染后续内容
  • Bigpipe：通过"Chunked Transfer Encoding"方式，先返回网页结构，后返回数据，通过脚本将渲染内容
  • Lazyrender：页面一次加载部分数据进行渲染，页面滚动后加载后续的数据并渲染

页面布局

• Flexbox
• Grid Layout