思维导图链接：http://v3.processon.com/view/link/5c5c2794e4b056ae2a04a78e
前端体系
前端架构项 开发规范 目录规范、编码规范、按内容命名规范开发模型 模块化方案，优化在模型中实现开发体系 构建工具和组件化设计项目部署 开发与部署打通前端统计 性能统计、访问统计、用户行为统计、错误统计、安全监控安全测试 安全意识和自动化高效开发测试等部署流程 压缩合并 YUI CompressorGoogle Clousure ComplierUglifyJSCleanCSS文档输出 JSDocDox/Doxmate/Grunt-Doxmate项目构建工具 make/AntGYPGruntGulpYeomanFISMod安全 CSRF/XSSCSPSame-origin policyADsafe/Caja/Sandboxxss（存储型、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性能 JSPerfYSlow 35 rulesPageSpeedHTTPWatchDynaTrace'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.jsRax超链接 react native 运行架构：js引擎性能缺陷与内存泄露更新机制微信小程序快应用android/ios原生开发与框架 JavaObject-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)桌面应用开发 nodewebkitatom-shell(electron)网易Hexpomelo（游戏服务器框架）react desktop、reactronappjs：appjs.comnativescript移动开发方案移动Web Zeptojs/iScrollV5/Sencha TouchPhoneGapjQuery MobileW3C Mobile Web InitiativeW3C mobileOK CheckerOpen 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.ioDDP数据协议，如meteorcdn与dns技术Reactivejs原理与应用http、https与http2协议、bigpipe、pipeline、spdybrowser-x虚拟浏览器技术cheerio等dom处理fetch api javascript使用http原语请求兼容处理：浏览器支持则使用window.fetch，否则使用ajax趋势技术 webTRC、IPFS新领域 WebVR 例如VR直播、VR视频、VR沉浸式网页物联网web化网站人工智能与web人机交互WebAssembly 浏览器直接运行字节码，更快的js执行速度，不过目前生态还不成熟软技能 知识管理/总结分享沟通技巧/团队协作/效率管理需求管理/PM交互设计/可用性/可访问性知识开发工具 编译器和IDE WebstormHBuilder调试工具 Firebug/FirecookieYSlowIEDeveloperToolbar/IETesterFiddlerChrome Dev ToolsDragonflyDebugBarVenkman版本管理 Git/Github/GitLab/BitbucketSVNHTML、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-animationsvg sprites超链接 页面响应式设计 media query与平台判断网页设计单位px、em、rem、%、vw、vh、vm超链接 rem计算：width*retina/10，相当于屏幕宽度为10remcss网格布局盒模型和flex布局超链接 css样式统一化 reset 清除不同浏览器的默认样式保持一致normalize 超链接 不同浏览器重写使用统一默认样式neat 超链接 reset和normalize的折衷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。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式； 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直接调用transformanimationtransition3D加速与动画加速requestAnimationFramecss3动画太少，无法全程控制；定时器动画有性能问题；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/VMLSVG:D3/Raphaei/Snap.svg/DataVCanvas:CreateJS/KineticJSWebGL/Three.JSJavaScript/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 inspectmokejs，F.M.S（Font Mock Server）模拟调试与cgi自动调试TDD单元测试自动化：mocha、jasmine、qunit、phantomjs、karma、should、chai、expect、unitJSBDD功能自动化测试：nightwatch、casperjs、dalek、mightmare、WebDriver/Protractor/KamaRunner/Sahi、SourceLabs/BrowserStacknode调试：node-supervior、node-inspector、nodemon开发发布系统流程，持续集成系统：Travis CI代码自动化检查fecs开发系统中台实现 gitlab、私有组件库、在线编译开发、在线应用发布部署、开发线上环境区分等Coding Style JSLint/JSHint/jscsCSSLintMarkup Validation ServiceHTML Validatiors代码组织 类库模块化 commonJS/AMD/CMD 模块引入模块定义模块标识UMD解决不同规范兼容性的问题，如webpack封装模块懒执行（CMD）与预执行（AMD）YUI3模块业务逻辑模块化 bower/component文件加载 LABjsSeaJS/Require.js模块化预加载器 Browserify 1. 从入口模块开始分析require函数使用2. 根据依赖生成AST3. 根据AST找到每个模块的模块名4. 得到每个模块的依赖关系，生成一个依赖字典5. 包装每个模块（传入依赖字典以及export和require函数），生成执行的js构建生态 grunt/gulp/panto开发环境任务编写 文件处理插件：html、scss、es、image、font等优化插件：雪碧图、图片压缩、iconfont构建打包、压缩包插件：组件自动分析自定义插件编写、白名单配置r.js、browserify、webpack、Rollup、parcel打包工具使用 原理：根据依赖配置文件对文件进行依赖打包webpack支持更多的规范打包，AMD，Commonjswebpack+label/reactjs_refluxnpm、jspm、bower包管理工具fis3构建与插件开发、构建环境配置、fis3构建离线包web Component、Polymer、x-view、riot、novajsbrunch构建工具更快、更简洁、文件分片、更方便前端库/框架/组件 Boostrap/Foundation/semanticUI/amazeUI/JuiceUI等UI框架JQuery/zepto/Underscore/Mootools/Prototype.js 支持AMD、CMD、全局变量的模块化封装$fn.method=function(){}YUI3/Dojo/ExtJS/KISSY/echartsWeb AtomsDhtmlxqooxdooBrickMVC/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映射到资源urlonload加载模块队列判断全部加载完成后触发加载失败问题优化requirejs、seajspolyfill、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/postserviceworker可作为浏览器请求代理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 EmmiterPublish/Subscribejs-signalRedux：store.subscribeMaterial design规范的前端框架 交互动效库
