前端技能图谱笔记

思维导图链接: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
      • 超链接  react native
        • 运行架构:js引擎
        • 性能缺陷与内存泄露
        • 更新机制
      • 微信小程序
      • 快应用
    • 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
  • 全栈开发
    • 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与重构
  • - 浏览器兼容性问题
  • - 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
    • 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直接调用
      • 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
  • 代码组织
    • 类库模块化
      • 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. 渲染最小差异树:将对比的差异化树渲染到页面上
      • 小结: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规范的前端框架
      • 交互动效库
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值