前端技能图谱笔记

最新推荐文章于 2024-05-13 00:08:59 发布

Fighting_No1

最新推荐文章于 2024-05-13 00:08:59 发布

阅读量554

点赞数

分类专栏： web前端文章标签： html5 css3 javascript es6

本文链接：https://blog.csdn.net/fighting_no1/article/details/108964197

版权

web前端专栏收录该内容

45 篇文章 3 订阅

订阅专栏

思维导图链接：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引擎
    - 性能缺陷与内存泄露
    - 更新机制
  - 微信小程序
  - 快应用
- 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
    - 超链接 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直接调用
  - 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规范的前端框架
  - 交互动效库

Fighting_No1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端技能图谱笔记

思维导图链接：http://v3.processon.com/view/link/5c5c2794e4b056ae2a04a78e前端体系前端架构项开发规范目录规范、编码规范、按内容命名规范开发模型模块化方案，优化在模型中实现开发体系构建工具和组件化设计项目部署开发与部署打通前端统计性能统计、访问统计、用户行为统计、错误统计、安全监控安全测试安全意识和自动化高效开发测试等部署流.
复制链接

扫一扫

专栏目录