前端技能图谱笔记
2019-06-25 16:00:25 0 举报AI智能生成
前端技能图谱
作者其他创作
大纲/内容
前端架构项
开发规范
目录规范、编码规范、按内容命名规范
开发模型
模块化方案，优化在模型中实现
开发体系
构建工具和组件化设计
项目部署
开发与部署打通
前端统计
性能统计、访问统计、用户行为统计、错误统计、安全监控
安全测试
安全意识和自动化高效开发测试等
部署流程
压缩合并
YUI Compressor
Google Clousure Complier
UglifyJS
CleanCSS
文档输出
JSDoc
Dox/Doxmate/Grunt-Doxmate
项目构建工具
make/Ant
GYP
Grunt
Gulp
Yeoman
FIS
Mod
安全
CSRF/XSS
CSP
Same-origin policy
ADsafe/Caja/Sandbox
xss（存储型、dom型、反射型）、csrf、sql注入
HTTPS原理与过程
x-content-type-options、Strict-Transport-Security、Access-Control-Allow-Origin、Public-Key-Pins、x-xss-protection、Content-Security-Policy、X-Frame-Options
性能
JSPerf
YSlow 35 rules
PageSpeed
HTTPWatch
DynaTrace's Ajax
高性能JavaScript
移动web性能优化
PWA渐进式加载
网络加载优化
图片优化
HTML渲染优化
CSS优化
本地离线存储
前端数据质量监控
用户数据统计分析
用户访问量统计：运营数据pv、uv、vv、ip访问统计
用户行为统计：点击量、点击流、用户访问路径、用户操作热力图、用户访问内容和时长用户行为统计
点击热力图clickHeat、heatMap
前端性能分析与上报
performance timing测速上报
profile分析
打点性能上报
页面资源加载timeline分析
badjs数据上报
捕获错误两种方法：onerror、try-catch。抽样上报，先onerror统计语法错误，如果是script error，再使用tryjs
后台统计方法、不同业务接入体系、抽样统计
onerror：可以捕获语法错误和运行时错误；可以拿到出错的信息，堆栈，出错文件、行号、列号；当前页面执行的js脚本出错都会捕捉到；可以捕捉任何作用域错误；如果报错文件和html不同源，直接上报script error，需要在script里面添加crossorigion属性和服务端跨域权限
try-catch：无法捕捉语法错误，只能捕捉运行时错误；可以拿到出错的信息，堆栈，出错文件、行号、列号；只能捕获当前作用域错误；需要借助工具把function块以及文件块加入try，catch，可以在这个阶段打入更多的静态信息。
js加载失败优化方案
原理：根据onload标记文件成功加载，对于失败的结果进行上报统计
失败重发机制
加载源域名服务器文件
https反劫持
cgi返回码上报统计
百度along数据上报原理
natvie/hybrid/桌面开发
Hybrid移动开发设计
性能瓶颈与流量控制
JSBridge协议原理规范
离线包更新机制
serviceworker更新
localStorage
思路：js/css本地存储字符级增量更新
优点：增量更新，省流量，少量修改少量更新
缺点：可能xss、跨域、5M大小限制、eval效率低
离线包更新和多版本增量包对比统计算法、版本覆盖率统计
web与native交互
hybrid NativeView开发方案
cordova（ionic）通用封装解决方案
基本安装打包、使用
插件的配置使用
更换webView内核方法
weex
Vue.js
Rax
react native
运行架构：js引擎
性能缺陷与内存泄露
更新机制
微信小程序
快应用
android/ios原生开发与框架
Java
Object-C、Swift
桌面应用开发
nodewebkit
atom-shell(electron)
网易Hex
pomelo（游戏服务器框架）
react desktop、reactron
appjs：appjs.com
nativescript移动开发方案
移动Web
Zeptojs/iScroll
V5/Sencha Touch
PhoneGap
jQuery Mobile
W3C Mobile Web Initiative
W3C mobileOK Checker
Open Mobile Alliance
全栈开发
express/koa+mongodb等框架
Isomorphic JavaScript
同构本质：DOM结构不同形式的表现和相互转换，包括前端模板、ViewModel、Virtual DOM、HTML文本字符串
实践思路方案
基于前后端统一模板的实现方案，如fis3-parse-swing+fis3+koa
基于MVVM的前后端解析方案，如vue+koa+node-vue
基于Virtual DOM的前后端渲染方案：如react+flux+koa
要解决的问题
前后台解析模板统一
前后台组件共享
前后台打包发布
前后端内容输出异域选择
MEAN（mongodb/express/angular/nodejs）
mongoui（mongodb的nodejs DB管理系统）
koa2.0 nodejs框架
mongoose（mongodb连接抽象模块）
bluebird（promise/A+实现）
swig、jade（视图层模板）
supervisor、nodemon热调试模块
restful(用户HTTP方法代替数据操作)
get：从服务器获取资源
post：向服务器添加资源
put：在服务器更新资源（提供完整数据）
patch：在服务器更新资源（提供单个属性数据）
delete：从服务器删除资源
head：获取资源元数据
options：获取信息，关于资源的哪些属性是客户端可以改变的
实施web开发协议
poll与long-poll方案，如实现二维码登录扫描
websocket，H5上可用，如express.io/horizon.io
DDP数据协议，如meteor
cdn与dns技术
Reactivejs原理与应用
http、https与http2协议、bigpipe、pipeline、spdy
browser-x虚拟浏览器技术cheerio等dom处理
fetch api
javascript使用http原语请求
兼容处理：浏览器支持则使用window.fetch，否则使用ajax
趋势技术
webTRC、IPFS
新领域
WebVR
例如VR直播、VR视频、VR沉浸式网页
物联网web化
网站人工智能与web人机交互
WebAssembly
浏览器直接运行字节码，更快的js执行速度，不过目前生态还不成熟
软技能
知识管理/总结分享
沟通技巧/团队协作/效率管理
需求管理/PM
交互设计/可用性/可访问性知识
前端体系
开发工具
编译器和IDE
Webstorm
HBuilder
调试工具
Firebug/Firecookie
YSlow
IEDeveloperToolbar/IETester
Fiddler
Chrome Dev Tools
Dragonfly
DebugBar
Venkman
版本管理
Git/Github/GitLab/Bitbucket
SVN
HTML、CSS与重构
svg、gif、jpg、jpeg、png、webp、apng、bpg图片
iconfont使用和实现原理
fontello、fontawesome、icomoon.io、iconfont.cn线上工具
font-awesome-animation
svg sprites
页面响应式设计
media query与平台判断
网页设计单位px、em、rem、%、vw、vh、vm
css网格布局
盒模型和flex布局
css样式统一化
reset
清除不同浏览器的默认样式保持一致
normalize
不同浏览器重写使用统一默认样式
neat
reset和normalize的折衷
scss/compass/less/stylus/postcss常用语法与使用
常用语法功能
组件化UI设计实现
构建工具实现方案
雪碧图自动合成
iconfont自动接入
浏览器
IE（Trident）
Firefox（Gecko）
Safari（WebKit）
Opera（Presto->Blink）
Chrome/Chromium（Blink）
SEO
离线存储
动画
setTimeout和setInterval直接调用
transform
animation
transition
3D加速与动画加速
requestAnimationFrame
动画库
可视化
SVG/Canvas/VML
SVG:D3/Raphaei/Snap.svg/DataV
Canvas:CreateJS/KineticJS
WebGL/Three.JS
JavaScript/Nodejs编程
面向对象编程
原型链/作用域链
JavaScript Tips
数据结构
闭包
编程范型
设计模式
函数式编程
纯函数：函数的同一个输入在任何情况下是相同且唯一的
数据处理结果临时存储、闭包的存储型函数
promise异步机制原理与使用
垃圾回收机制
标记清除（mark and sweep）
引用计数(reference counting)
JS运行机制
ES6、CoffeeScript、TypeScript
开发技巧与调试
fiddle加willow基础组合调试
常见配置与分析
结合浏览器调试
werien、vorlonjs远程调试，chrome inspect
mokejs，F.M.S（Font Mock Server）模拟调试与cgi自动调试
TDD单元测试自动化：mocha、jasmine、qunit、phantomjs、karma、should、chai、expect、unitJS
BDD功能自动化测试：nightwatch、casperjs、dalek、mightmare、WebDriver/Protractor/KamaRunner/Sahi、SourceLabs/BrowserStack
node调试：node-supervior、node-inspector、nodemon
开发发布系统流程，持续集成系统：Travis CI
代码自动化检查fecs
开发系统中台实现
gitlab、私有组件库、在线编译开发、在线应用发布部署、开发线上环境区分等
Coding Style
JSLint/JSHint/jscs
CSSLint
Markup Validation Service
HTML Validatiors
代码组织
类库模块化
commonJS/AMD/CMD
模块引入
模块定义
模块标识
UMD解决不同规范兼容性的问题，如webpack封装
模块懒执行（CMD）与预执行（AMD）
YUI3模块
业务逻辑模块化
bower/component
文件加载
LABjs
SeaJS/Require.js
模块化预加载器
Browserify
1. 从入口模块开始分析require函数使用
2. 根据依赖生成AST
3. 根据AST找到每个模块的模块名
4. 得到每个模块的依赖关系，生成一个依赖字典
5. 包装每个模块（传入依赖字典以及export和require函数），生成执行的js
构建生态
grunt/gulp/panto开发环境任务编写
文件处理插件：html、scss、es、image、font等
优化插件：雪碧图、图片压缩、iconfont构建
打包、压缩包插件：组件自动分析
自定义插件编写、白名单配置
r.js、browserify、webpack、Rollup、parcel打包工具使用
原理：根据依赖配置文件对文件进行依赖打包
webpack支持更多的规范打包，AMD，Commonjs
webpack+label/reactjs_reflux
npm、jspm、bower包管理工具
fis3构建与插件开发、构建环境配置、fis3构建离线包
web Component、Polymer、x-view、riot、novajs
brunch构建工具
前端库/框架/组件
Boostrap/Foundation/semanticUI/amazeUI/JuiceUI等UI框架
JQuery/zepto/Underscore/Mootools/Prototype.js
支持AMD、CMD、全局变量的模块化封装
$fn.method=function(){}
YUI3/Dojo/ExtJS/KISSY/echarts
Web Atoms
Dhtmlx
qooxdoo
Brick
MVC/MVVM框架原理设计，vue/angular等
前端router实现：history.pushState和hash方式
directive设计：html、text、class、attr、repeat、ref、可扩展
filter设计
表达式设计：if-else等实现
viewmodel结构设计：数据、元素、方法的挂载与作用域
数据变更检测（双向绑定）：函数触发，脏数据检测、对象hiJacking、ES6 proxy
组件化方案
状态管理方案
Polymer思想与设计思路
import技术
template和script引入方式
css样式命名空间隔离
简单复用第三方库
事件代理与事件合成：事件合成是将事件以委托的方式绑定到事件最上层，并在组件销毁时销毁事件绑定
loadJS模块化加载原理与实现
创建script标签，需要id映射到资源url
onload加载模块队列判断
全部加载完成后触发
加载失败问题优化
requirejs、seajs
polyfill、shim原理与实现
polyfill提供了开发者们希望浏览器原生提供支持的功能特性
shim将新的API引入到旧的环境中，且仅靠旧环境中已有的手段实现
Virtual DOM、Incremental DOM
1. 生成Virtual DOM：用js对象树表示dom树结构，将HTML字符串解析成JavaScript对象，涉及词法解析，而不用直接DOM解析
2. 对比差异化Virtual DOM：状态改变时，重新构建对象，和旧的对象对比，记录两个对象树差异。对比Virtual DOM其实是多叉树的遍历算法，如按照广度优先算法来对比
3. 渲染最小差异树：将对比的差异化树渲染到页面上
shadow dom
隔离外部环境用于封装组件：结构、样式、行为
实现形式：新标签、class类属性+构建编译
webworker与service worker
webwork与主线程机制，on/post
serviceworker可作为浏览器请求代理
performance timing
组件UI与js组件规范化
组件编码规范
组件目录规范：组件目录与公用目录
组件构建规范：构建环境支持
组件模块化管理：npm，browserify
组件复用性管理
第三方组件接入成本
组件化解决方案
web Component组件化
MVVM的模块管理思路
Virtual DOM的模块管理思路
基于通用目录开发通过构建来自动处理
immutable JavaScript
1. Immutable Data指一旦被创造后，就不可以被改变的数据
2. 更容易的去处理缓存、回退、数据变化检测等问题。速度约深拷贝的3.5倍
3. set操作时，immutable.js会只clone它的父级别以上的部分，其他保持不变
React
react开发环境与构建配置
react组件生命周期、props和state使用
react前后端渲染原理与实现
后端渲染的事件绑定原理
react组件规范与组件间通信
嵌套的父子组件相互通信：传state值与回调函数
Event Emmiter
Publish/Subscribe
js-signal
Redux：store.subscribe
Material design规范的前端框架
交互动效库
0 条评论
回复 删除
下一页
