w3ctech

2015-2016前端知识体系图谱

2015-2016前端知识体系图谱

  总结下这两年前端需要的一下必备知识体系,一部分深入挖掘过总结了一下,有些还没来得及研究,也列出来了,分享一下~

获取原图

博客原地址

一、框架与组件

 bootstrap等UI框架设计与实现

  • 伸缩布局:grid网格布局
  • 基础UI样式:元素reset、按钮、图片、菜单、表单
  • 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
  • 响应式布局:布局、结构、样式、媒体、javascript响应式
  • 第三方插件:插件管理

 jQuery、zepto使用原理以及插件开发

  • 支持amd、cmd、全局变量的模块化封装
  • $.fn.method = function(){}

 mvc/mvvm框架原理设计,vue/angular/avalon等

  • directive设计:html、text、class、html、attr、repeat、ref,可扩展
  • filter设计:bool、upperCase、lowerCase,可扩展
  • 表达式设计:if-else等实现
  • viewmodel结构设计:例如数据,元素,方法的挂载与作用域
  • 数据更变检测:函数触发,脏数据检测、对象hijacking

 polymer/angular2思想与设计思路

  • import技术
  • template和script引入方式
  • css样式命名空间隔离
  • 简单复用第三方库

 reactjs原理与使用

  • virtual dom单向数据绑定
  • js执行语法方式
  • UI由状态控制

 commonJS/AMD/CMD

  • 模块引入
  • 模块定义
  • 模块标识
  • UMD解决不同规范兼容性的问题,例如webpack封装
  • 模块懒执行(CMD)与与预执行(AMD)

 loadJs模块化加载原理与实现

  • 创建script标签,需要id映射到资源url
  • onload加载模块队列判断
  • 全部加载完成后触发
  • 加载失败问题优化
  • requirejs、modjs、seajs

 polyfill、shim原理与实现

  • polyfill提供了开发者们希望浏览器原生提供支持的功能特性
  • shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现

 virtual Dom、Incremental DOM

  • 1.用js对象树表示dom树结构,根据该对象树构建dom树
  • 2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异
  • 3.将对象树差异应用到dom中
  • 小结:js对象模拟dom(elem.js),virtual dom diff算法(diff.js)、差异渲染dom(patch.js)
  • incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中

 shadow dom

  • 隔离外部环境用于封装组件:结构、样式、行为
  • 实现形式:新标签、class类属性 + 构建编译

 webwork与service Worker

  • webwork与主线程机制,on/post
  • serviceworker可作为浏览器请求代理
  • 应用场景

 ES6转ES5、Babel与ES6开发规范体系

  • ES6编码规范全
  • ES6在babel下兼容性
  • ES6在node下兼容性与性能
  • ES6新特性:看编码规范
  • aurelia ES6前端框架

 Isomorphic JavaScript

  • 同构原理
  • 同构方案 Rendr
  • nodejs: 服务器
  • hapi: 应用服务
  • backbone.js: 后台mvc
  • requirejs: 模块加载
  • jquery: dom处理
  • reactjs同构:React + Flux + Koa

 双向数据绑定

  • 函数触发:vuejs
  • 脏数据检测:angular
  • 对象hijacking:avalon

 browserify运行原理

  • 1.从入口模块开始分析require函数调用
  • 2.根据依赖生成AST
  • 3.根据AST找到每个模块的模块名
  • 4.得到每个模块的依赖关系,生成一个依赖字典
  • 5.包装每个模块(传入依赖字典以及export和require函数),生成执行的js

 performance timing

  • performance timing api
  • performance timing 过程
  • performance timing 性能计算
  • performanceTrace库

 组件UI与js组件规范化

  • 组件编码规范
  • 组件目录规范:组件目录与公用目录
  • 组件构建规范:构建环境支持
  • 组件模块化管理:spm,bowserify
  • 组件复用性管理
  • 第三方组件接入成本

 immutable JavaScript

 generator与promise原理与使用

二、构建生态

 grunt/gulp开发环境任务编写

  • 文件处理插件:html、scss、js、image、font、其它
  • 优化插件:雪碧图、图片压缩、iconfont构建
  • 发布替换插件
  • 打包、压缩包插件:组件自动分析
  • 白名单配置
  • 自定义插件编写

 npm、jspm、bower包管理工具

 r.js、browserify、webpack、webpack 2、Rollup打包工具使用

  • 原理:根据依赖配置文件对文件进行依赖打包
  • webpack支持更多的规范打包,AMD,Commonjs
  • webpack+babel/reactjs+reflux

 fis3构建与插件开发、构建环境、fis3构建离线包

 web Component:rosetta-org、x-view、Q、riot、nova

 brunch构建工具

三、开发技巧与调试

 fiddler加willow基础组合调试

  • 常见配置与分析
  • 结合浏览器调试

 werien、vorlonjs远程调试,chrome inspect

 mockjs,F.M.S(Front Mock Server)模拟调试使用与cgi自动调试

 macha/phantomjs/casperjs/karma测试自动化任务使用

 自动化UI测试,海豚

 node-supervior、node-inspector、karma

 开发发布系统流程

 sublime高效插件

  • emmet工具使用、 sublimelinter、 babel snippets、 sublimeLint、 SassBeautify 、 emmet 快速编辑、 jsxlint、 SideBarEnhancements、 SnippetsMaker、 SublimeCodeIntel、 css snippets、 ColorPicker、 html/css/js Pretty、 SpinnetMacker、 DocBlockr、 MultiEditUtils、 javascript & node spinnet、 JavaScript & NodeJS Snippets、 jsLint、cssLint

 代码自动化检查fecs

四、html、css与重构

 jpeg、webp、apng、bpg图片

  • 编码原理
  • 特点与优劣势
  • 适用场景

 iconfont使用与实现原理

  • 自动打包构建方法
  • iconfont兼容性写法
  • fonthello、fontawesome、icomoon.io、iconfont.cn线上工具

 页面响应式设计

  • layout布局响应式
  • html结构响应式
  • css样式响应式
  • image媒体响应式
  • javascript响应式
  • media query与平台判断

 css重置

  • reset
  • nomalize
  • neat

 sass/compass/less/postcss常用语法与使用

  • 常用语法功能
  • 组件化UI设计管理
  • 构建工具实现方案
  • 雪碧图自动合成
  • iconfont自动接入等等

 media query与常见页面尺寸了解

  • 媒体类型引入和媒体特性引入
  • device-width适应
  • retina屏幕适应

 em,rem原理与实现

  • rem计算:width*retina/10,相当于屏幕宽度为10rem
  • 字体在rem情况下仍然使用px

 code4ui、code4app、初页、maka等

  • 前端dom操作即使刷新前端页面
  • 根据dom操作生成组件config配置保存到db
  • 根据config配置使用r.js或webpack打包
  • 发布打包后输出文件

 css3动画

  • transform
  • animation
  • transiction
  • 3D加速与动画加速
  • 动画库

 css网格布局

  • susy
  • Responsive Grid System
  • Fluid 960 Grid(adaptjs)
  • Simple Grid

 搜索引擎与前端SEO

  • tdk优化
  • 页面内容优化
  • 唯一的H1标题
  • img设置alt属性
  • nofollow
  • url优化
  • 统一链接
  • 301跳转
  • canonical
  • robot优化
  • robots.txt
  • meta robots
  • sitemap
  • SEO工具
  • 各种站长工具等
  • store.js、cookie.js

 UI框架

  • bootstrap、jqwidgets、semantic ui、amaze ui
  • 微信手Q ui: frozenui、weui、blend ui
  • extjs、echart图表ui

五、native/hybrid/桌面开发

 ionic移动开发方案

  • 运行架构
  • hybrid混合开发
  • cordova交互
  • 离线包更新
  • 性能瓶颈

 nativescript移动开发方案

 react Native移动开发方案

  • 运行架构:js引擎
  • 性能缺陷与内存泄露
  • 更新机制
  • 使用场景

 android/ios原生开发与框架

  • java
  • oc、swift
  • web与native交互
  • 屏幕旋转
  • 摇一摇
  • 录像,拍照,选取本地图片
  • 打电话,发短信
  • 电池电量
  • 地理位置
  • 日期选择
  • 开启硬件加速

 桌面应用开发

  • nodewebkit
  • atom-shell(后改名为electron)
  • 网易Hex
  • pomelo(游戏服务器框架)
  • react desktop
  • appjs:appjs.com

六、前端/H5优化(另一个图已给出)

 yslow、pagespeed

 移动web性能优化

  • 手机浏览器"省流量"原理
  • 增量更新原理及注意事项
  • 本地存储的应用
  • 加载优化
  • 图片优化
  • 单页面及路由实现
  • 业内著名站点案例分析

七、全栈/全端开发

 express/node club + mongodb、thinkjs等框架

 node.js直出

 实时web开发,meteor/express.io

 MEAN(mongodb/express/angular/nodejs)

 http与http2协议、bigpipe、pipeline

 cdn与dns

  • 动态域名加速
  • cdn原理与cdn combo

八、研究实验

 WebAssembly、webTRC、typescript

 Material design规范的前端框架

  • 交互动效库

 AMP-HTML规范

  • 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能
  • 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等

九、数据分析与监控

 badjs数据上报

  • 捕获错误两种方法:onerror、try-catch。抽样上报,先onerror统计语法错误,如果是script error,再使用tryjs。
  • 后台统计方法、不同业务接入体系、抽样统计
  • onerror:可以捕捉语法错误和运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;当前页面执行的js脚本出错都会捕捉到;跨域的资源需要特殊头部支持。
  • try-catch:无法捕捉语法错误,只能捕捉运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;需要借助工具把function块以及文件块加入try,catch,可以在这个阶段打入更多的静态信息。

 点击热力图clickHeat、heatMap

 js加载失败优化方案

  • 失败重发机制
  • 加载源域名服务器文件
  • https反劫持

 百度alog数据上报

十、其它软技能

 axure 原型图设计

 xmind脑图管理

 效率管理

 can i use、github

 知识管理/总结分享

 产品思维与技能

十一、前端技术网站

 技术社区

  • w3c tech、w3c plus、w3 help
  • div.io、nodeParty
  • 稀土掘金、前端早读课
  • alloyteam、html5基地
  • W3 help

 行业会议

  • segmentfault会议
  • 深js、杭js
  • GMIC(全球移动互联网大会)
  • D2、webrebuild
  • infoQ内容、Qcon、velocity
w3ctech微信

扫码关注w3ctech微信公众号

共收到1条回复

  • 感觉很多 “ fiddler加willow基础组合调试 ” 是为了 windows 工作者。。。

    回复此楼