前端技能图谱笔记
思维导图链接：http://v3.processon.com/view/link/5c5c2794e4b056ae2a04a78e
前端体系
- 前端架构项
- 开发规范
- 目录规范、编码规范、按内容命名规范
- 开发模型
- 模块化方案，优化在模型中实现
- 开发体系
- 构建工具和组件化设计
- 项目部署
- 开发与部署打通
- 前端统计
- 性能统计、访问统计、用户行为统计、错误统计、安全监控
- 安全测试
- 安全意识和自动化高效开发测试等
- 开发规范
- 部署流程
- 压缩合并
- 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协议原理规范
- H5通过iframe或prompt调用Native；Native通过loadUrl等调用JavaScript
- 推荐协议串格式：jsbridge://className:callbackMethod/methodName?jsonObj
- 离线包更新机制
- serviceworker更新
- localStorage
- 思路：js/css本地存储字符级增量更新
- 优点：增量更新，省流量，少量修改少量更新
- 缺点：可能xss、跨域、5M大小限制、eval效率低
- 离线包更新和多版本增量包对比统计算法、版本覆盖率统计
- web与native交互
- hybrid NativeView开发方案
- 超链接 cordova（ionic）通用封装解决方案
- 基本安装打包、使用
- 插件的配置使用
- 更换webView内核方法
- weex
- 超链接 Vue.js
- Rax
- 超链接 react native
- 运行架构：js引擎
- 性能缺陷与内存泄露
- 更新机制
- 微信小程序
- 快应用
- 超链接 cordova（ionic）通用封装解决方案
- android/ios原生开发与框架
- Java
- Object-C、Swift
- - [IOS教程](http://www.runoob.com/ios/ios-tutorial.html)
- - [Swift教程](https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html)
- - [IOS开发全套教程](https://study.163.com/course/introduction.htm?courseId=1002858003#/courseDetail?tab=1)
- 桌面应用开发
- 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
- Hybrid移动开发设计
- 全栈开发
- 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人机交互
- WebVR
- WebAssembly
- 浏览器直接运行字节码，更快的js执行速度，不过目前生态还不成熟
- 软技能
- 知识管理/总结分享
- 沟通技巧/团队协作/效率管理
- 需求管理/PM
- 交互设计/可用性/可访问性知识
- 开发工具
- 编译器和IDE
- Webstorm
- HBuilder
- 调试工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- Chrome Dev Tools
- Dragonfly
- DebugBar
- Venkman
- 版本管理
- Git/Github/GitLab/Bitbucket
- SVN
- 编译器和IDE
- HTML、CSS与重构
- - 浏览器兼容性问题
- - css hack技巧
- - 条件注释：仅适用于IE
- - 特定符号：适用于能识别特定符号的浏览器
- - 内核符号：针对不同浏览器内核
- - 语义化
- - webworker
- - websocket
- - 新API、新标签、新属性
- - css优先级：!important > id > class > tag
- **一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？**
- 1. 浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
- 2. 调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
- 3. 通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
- 4. 进行HTTP协议会话，客户端发送报头(请求报头);
- 5. 进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
- 6. 进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
- 7. 处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
- 8. 浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
- 9. 文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
- 10. 页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。
-
- svg、gif、jpg、jpeg、png、webp、apng、bpg图片
- - svg：矢量图
- - gif：支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
- - jpg：支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
- - png：支持透明，半透明，不透明。不支持动画，无损图像格式。
- - webp，谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，如google39+，safari7+
- - [APNG](http://littlesvr.ca/apng/)（Animated Portable Network Graphics）, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。高版本的FF/Sarari才支持。
- - [BPG](https://bellard.org/bpg/)（Better Portable Graphics）:高压缩比的新图像格式
- iconfont使用和实现原理
- 超链接 fontello、fontawesome、icomoon.io、iconfont.cn线上工具
- - [fontello](http://fontello.com/)
- - [fontawesome](http://www.fontawesome.com.cn/)
- - [icomoon.io](https://icomoon.io/)
- - [iconfont](https://www.iconfont.cn/)
- font-awesome-animation
- svg sprites
- 超链接 页面响应式设计
- media query与平台判断
- 网页设计单位px、em、rem、%、vw、vh、vm
- 超链接 rem计算：width*retina/10，相当于屏幕宽度为10rem
- css网格布局
- 盒模型和flex布局
- 超链接 css样式统一化
- reset
- 清除不同浏览器的默认样式保持一致
- normalize
- 超链接 不同浏览器重写使用统一默认样式
- neat
- 超链接 reset和normalize的折衷
- reset
- scss/compass/less/stylus/postcss常用语法与使用
- LESS、Scss、Stylus的异同之处的综合对比：
- 1. 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；
- 2. Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系；
- 3. Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；
- 4. Scss和Stylus就具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；
- 5. Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
- 6. 使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。
- 常用语法功能
- 组件化UI设计实现
- 构建工具实现方案
- 雪碧图自动合成
- iconfont自动接入
- 浏览器
- 浏览器由外壳和内核组成，内核由渲染引擎和JS引擎组成。
- **浏览器是怎样解析CSS选择器的？**
- 从后往前判断。
- 浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到整个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
- **浏览器是如何渲染页面的？**
- 渲染的流程如下：
- 1.解析HTML文件，创建DOM树。
- 自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
- 2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式
- 3.将CSS与DOM合并，构建渲染树（Render Tree）
- 4.布局和绘制，重绘（repaint）和重排（reflow）
- 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为重排(reflow)。每个页面至少需要一次重排，就是在页面第一次加载的时候。在重排的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
-
- IE（Trident）
- 微软开发的渲染引擎，市场占有率高，但与W3C标准脱节，大量Bug等安全问题没有得到解决。
- Firefox（Gecko）
- 功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是要消耗很多的资源，比如内存。
- Safari（WebKit）
- Opera（Presto->Blink）
- Chrome/Chromium（Blink）
- SEO
- **Web 搜索引擎优化（Search Engine Optimization）**
- 搜索引擎优化 (SEO) 是提高一个网站在搜索引擎中的排名（能见度）的过程。如果网站能够在搜索引擎中有良好的排名，有助于网站获得更多的流量。
- SEO主要研究搜索引擎是工作的原理，是什么人搜索，输入什么搜索关键字）。优化一个网站，可能涉及内容的编辑，增加关键字的相关性。推广一个网站，可以增加网站的外链数量。
- 离线存储
- 浏览器缓存种类，resources，webSQL，indexDB，localStorage，sessionStorage，cookie，app cache, cache storage, flash, file api, ie user Data
- store.js, cookie.js
- 动画
- setTimeout和setInterval直接调用
- transform
- animation
- transition
- 3D加速与动画加速
- requestAnimationFrame
- css3动画太少，无法全程控制；
- 定时器动画有性能问题；
- requestAnimationFrame是浏览器专门优化处理动画的api
- 动画库
- - [缓动函数速查表](http://www.xuanfengge.com/easeing/easeing/)：缓动函数指定动画效果在执行时的速度，使其看起来更加真实。
- - [Ceaser](https://xuanfengge.com/easeing/ceaser/)
- - [2018年值得期待11个Javascript动画库](http://www.sohu.com/a/244060306_655394)
- - [前端必须收藏的CSS3动效库](https://www.cnblogs.com/roashley/p/7752598.html)
- 可视化
- SVG/Canvas/VML
- SVG:D3/Raphaei/Snap.svg/DataV
- Canvas:CreateJS/KineticJS
- WebGL/Three.JS
- JavaScript/Nodejs编程
- 面向对象编程
- 超链接 - POP--面向过程编程(Process-oriented programming )
- - OOP--面向对象编程(Object Oriented Programming)
- - SOA--面向服务架构，面向服务设计的三大原则是无状态、单一实例和明确的服务接口。
- - AOP--面向切面编程(Aspect Oriented Programming) 。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高了开发的效率。主要的功能是：日志记录，性能统计，安全控制，事务处理，异常处理等等。
- 原型链/作用域链
- 原型链：每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
- 作用域链：
- 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
- 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。
- 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
- JavaScript Tips
- 数据结构
- 闭包
- 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
- 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
- 编程范型
- 设计模式
- 函数式编程
- 纯函数：函数的同一个输入在任何情况下是相同且唯一的
- 数据处理结果临时存储、闭包的存储型函数
- 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
- fiddle加willow基础组合调试
- 代码组织
- 类库模块化
- commonJS/AMD/CMD
- 模块引入
- 模块定义
- 模块标识
- UMD解决不同规范兼容性的问题，如webpack封装
- 模块懒执行（CMD）与预执行（AMD）
- YUI3模块
- commonJS/AMD/CMD
- 业务逻辑模块化
- bower/component
- 文件加载
- LABjs
- SeaJS/Require.js
- 模块化预加载器
- Browserify
- 1. 从入口模块开始分析require函数使用
- 2. 根据依赖生成AST
- 3. 根据AST找到每个模块的模块名
- 4. 得到每个模块的依赖关系，生成一个依赖字典
- 5. 包装每个模块（传入依赖字典以及export和require函数），生成执行的js
- Browserify
- 类库模块化
- 构建生态
- 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构建工具
- 更快、更简洁、文件分片、更方便
- grunt/gulp/panto开发环境任务编写
- 前端库/框架/组件
- 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. 渲染最小差异树：将对比的差异化树渲染到页面上
- 小结：js对象模拟dom（elem.js）,virtual dom diff算法（diff.js）、差异渲染dom（patch.js）
- 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规范的前端框架
- 交互动效库