前端技能图谱笔记
思維導圖鏈接：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。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<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
- 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規范的前端框架
- 交互動效庫
總結
- 上一篇： Linux—常用十大命令
- 下一篇： openGL es2.0 粒子系统之烟花