思維導圖鏈接：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規范的前端框架
    • 交互動效庫

總結

以上是生活随笔為你收集整理的前端技能图谱笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。