前端架構(gòu)體系技術(shù)

前端架構(gòu)體系技術(shù)一、框架與組件 bootstrap等UI框架設(shè)計與實現(xiàn)伸縮布局：grid網(wǎng)格布局基礎(chǔ)UI樣式：元素 reset、按鈕、圖片、菜單、表單組件UI樣式：按鈕組、字體圖標(biāo)、下拉菜單、輸入框組、導(dǎo)航組、面包屑、分頁、標(biāo)簽、輪播、彈出框、列表、多媒體、警告響應(yīng)式布局：布局、結(jié)構(gòu)、樣式、媒體、 javascript響應(yīng)式第三方插件：插件管理jQuery、zepto使用原理以及插件開發(fā)支持amd、cmd、全局變量的模塊化封裝$.fn.method=function(){}mvc/mvvm框架原理設(shè)計directive設(shè)計：html、text、class、html、attr、repeat、ref，可擴(kuò)展filter設(shè)計：bool、upperCase、lowerCase，可擴(kuò)展表達(dá)式設(shè)計：if-else等實現(xiàn)viewmodel結(jié)構(gòu)設(shè)計：例如數(shù)據(jù)，元素，方法的掛載與作用域數(shù)據(jù)更變檢測：函數(shù)觸發(fā)，臟數(shù)據(jù)檢測、對象 hijackingpolymer/angular2思想與設(shè)計思路import技術(shù)template和script引入方式css樣式命名空間隔離簡單復(fù)用第三方庫reactjs原理與使用virtualdom單向數(shù)據(jù)綁定js執(zhí)行語法方式UI由狀態(tài)控制commonJS/AMD/CMD模塊引入模塊定義模塊標(biāo)識UMD解決不同規(guī)范兼容性的問題，例如 webpack封裝模塊懶執(zhí)行(CMD)與與預(yù)執(zhí)行(AMD)loadJs模塊化加載原理與實現(xiàn)創(chuàng)建script標(biāo)簽，需要 id映射到資源 urlonload加載模塊隊列判斷全部加載完成后觸發(fā)加載失敗問題優(yōu)化requirejs、modjs、seajspolyfill、shim原理與實現(xiàn)polyfill 提供了開發(fā)者們希望瀏覽器原生提供支持的功能特性shim將新的API引入到舊的環(huán)境中 ,且僅靠舊環(huán)境中已有的手段實現(xiàn)virtualDom、IncrementalDOM1.用js對象樹表示 dom樹結(jié)構(gòu)，根據(jù)該對象樹構(gòu)建 dom樹2.狀態(tài)改變時，重新構(gòu)建對象，和舊的對象對比，記錄兩個對象樹差異3.將對象樹差異應(yīng)用到 dom中小結(jié):js對象模擬dom(elem.js)，virtualdomdiff 算法(diff.js)、差異渲染dom(patch.js)incrementaldom在狀態(tài)改變時掃描舊對象樹將差異直接應(yīng)用到dom中shadowdom隔離外部環(huán)境用于封裝組件：結(jié)構(gòu)、樣式、行為實現(xiàn)形式：新標(biāo)簽、 class類屬性 +構(gòu)建編譯webwork與serviceWorkerwebwork與主線程機(jī)制， on/postserviceworker可作為瀏覽器請求代理應(yīng)用場景ES6轉(zhuǎn)ES5、Babel與ES6開發(fā)規(guī)范體系ES6編碼規(guī)范全ES6在babel下兼容性ES6在node下兼容性與性能ES6新特性：看編碼規(guī)范aureliaES6前端框架IsomorphicJavaScript同構(gòu)原理同構(gòu)方案 Rendrnodejs:服務(wù)器hapi:應(yīng)用服務(wù)backbone.js:后臺mvcrequirejs:模塊加載jquery:dom處理reactjs同構(gòu):React+Flux+Koa雙向數(shù)據(jù)綁定函數(shù)觸發(fā):vuejs臟數(shù)據(jù)檢測:angular對象hijacking:avalonbrowserify運(yùn)行原理1.從入口模塊開始分析 require函數(shù)調(diào)用2.根據(jù)依賴生成 AST3.根據(jù)AST找到每個模塊的模塊名4.得到每個模塊的依賴關(guān)系，生成一個依賴字典5.包裝每個模塊（傳入依賴字典以及 export和require函數(shù)），生成執(zhí)行的 jsperformancetimingperformancetimingapiperformancetiming 過程performancetiming 性能計算performanceTrace庫組件UI與js組件規(guī)范化組件編碼規(guī)范組件目錄規(guī)范：組件目錄與公用目錄組件構(gòu)建規(guī)范：構(gòu)建環(huán)境支持組件模塊化管理： spm，bowserify組件復(fù)用性管理第三方組件接入成本immutableJavaScriptgenerator與promise原理與使用二、構(gòu)建生態(tài)grunt/gulp開發(fā)環(huán)境任務(wù)編寫文件處理插件： html、scss、js、image、font、其它優(yōu)化插件：雪碧圖、圖片壓縮、 iconfont構(gòu)建發(fā)布替換插件打包、壓縮包插件：組件自動分析白名單配置自定義插件編寫npm、jspm、bower包管理工具 r.js、browserify、webpack、webpack2、Rollup打包工具使用原理：根據(jù)依賴配置文件對文件進(jìn)行依賴打包webpack支持更多的規(guī)范打包， AMD,Commonjswebpack+babel/reactjs+refluxfis3構(gòu)建與插件開發(fā)、構(gòu)建環(huán)境、 fis3構(gòu)建離線包 webComponent：rosetta-org、x-view、Q、riot、novabrunch構(gòu)建工具三、開發(fā)技巧與調(diào)試fiddler加willow基礎(chǔ)組合調(diào)試常見配置與分析結(jié)合瀏覽器調(diào)試werien、vorlonjs遠(yuǎn)程調(diào)試，chromeinspectmockjs，F(xiàn).M.S(FrontMockServer)模擬調(diào)試使用與 cgi自動調(diào)試macha/phantomjs/casperjs/karma測試自動化任務(wù)使用自動化UI測試，海豚node-supervior、node-inspector、karma開發(fā)發(fā)布系統(tǒng)流程 sublime高效插件emmet工具使用、sublimelinter、babelsnippets、sublimeLint、SassBeautify、emmet快速編輯、jsxlint、SideBarEnhancements、SnippetsMaker、SublimeCodeIntel、csssnippets、ColorPicker、html/css/jsPretty、SpinnetMacker、DocBlockr、MultiEditUtils、javascript&nodespinnet、JavaScript&NodeJSSnippets、jsLint、cssLint代碼自動化檢查 fecs四、html、css與重構(gòu)jpeg、webp、apng、bpg圖片編碼原理特點與優(yōu)劣勢適用場景iconfont使用與實現(xiàn)原理自動打包構(gòu)建方法iconfont兼容性寫法fonthello、fontawesome、icomoon.io、線上工具頁面響應(yīng)式設(shè)計layout布局響應(yīng)式html結(jié)構(gòu)響應(yīng)式css樣式響應(yīng)式image媒體響應(yīng)式j(luò)avascript響應(yīng)式mediaquery與平臺判斷css重置resetnomalizeneatsass/compass/less/postcss常用語法與使用常用語法功能組件化UI設(shè)計管理構(gòu)建工具實現(xiàn)方案雪碧圖自動合成iconfont自動接入等等mediaquery與常見頁面尺寸了解媒體類型引入和媒體特性引入device-width適應(yīng)retina屏幕適應(yīng)em,rem原理與實現(xiàn)rem計算：width*retina/10，相當(dāng)于屏幕寬度為 10rem字體在rem情況下仍然使用 pxcode4ui、code4app、初頁、maka等前端dom操作即使刷新前端頁面根據(jù)dom操作生成組件 config配置保存到 db根據(jù)config配置使用 r.js或webpack打包發(fā)布打包后輸出文件css3動畫transformanimationtransiction3D加速與動畫加速動畫庫緩動函數(shù)速查表： eing/easeing/Ceaser：cubic-bezier：css網(wǎng)格布局susyResponsiveGridSystemFluid960Grid(adaptjs)SimpleGrid搜索引擎與前端 SEOtdk優(yōu)化頁面內(nèi)容優(yōu)化唯一的H1標(biāo)題img設(shè)置alt屬性nofollowurl優(yōu)化統(tǒng)一鏈接跳轉(zhuǎn)canonicalrobot優(yōu)化robots.txtmetarobotssitemapSEO工具各種站長工具等瀏覽器緩存種類， resources,webSQL,indexDB,localstorage,cookie,appcache,cachestoragestore.js、cookie.jsUI框架bootstrap、jqwidgets、semanticui、amazeui微信手Qui:frozenui、weui、blenduiextjs、echart圖表ui五、native/hybrid/桌面開發(fā)ionic移動開發(fā)方案運(yùn)行架構(gòu)hybrid混合開發(fā)cordova交互離線包更新性能瓶頸nativescript移動開發(fā)方案 reactNative移動開發(fā)方案運(yùn)行架構(gòu)：js引擎性能缺陷與內(nèi)存泄露更新機(jī)制使用場景android/ios原生開發(fā)與框架javaoc、swiftweb與native交互屏幕旋轉(zhuǎn)搖一搖錄像，拍照，選取本地圖片打電話，發(fā)短信電池電量地理位置日期選擇開啟硬件加速桌面應(yīng)用開發(fā)nodewebkitatom-shell(后改名為 electron)網(wǎng)易Hexpomelo(游戲服務(wù)器框架 )reactdesktopappjs:六、前端/H5優(yōu)化(另一個圖已給出 )yslow、pagespeed移動web性能優(yōu)化手機(jī)瀏覽器”省流量”原理增量更新原理及注意事項本地存儲的應(yīng)用加載優(yōu)化圖片優(yōu)化單頁面及路由實現(xiàn)業(yè)內(nèi)著名站點案例分析七、全棧/全端開發(fā)express/nodeclub+mongodb、thinkjs等框架node.js直出實時web開發(fā)，meteor/express.ioMEAN(mongodb/express/angular/nodejs)http與http2協(xié)議、bigpipe、pipeline離線緩存，cookie、localstorage、indexdbcdn與dns動態(tài)域名加速cdn原理與cdncombo八、研究實驗 WebAssembly、webTRC、typescriptMaterialdesign規(guī)范的前端框架交互動效庫AMP-HTML 規(guī)范使用受限HTML以及緩存技術(shù)來提高移動網(wǎng)絡(luò)中靜態(tài)內(nèi)容的性能添加自定義的元素代替禁用掉的元素： amp-audio,amp-img、amp-video等九、數(shù)據(jù)分析與監(jiān)控 badjs數(shù)據(jù)上報捕獲錯誤兩種方法： onerror、try-catch。抽樣上報，先onerror統(tǒng)計語法錯誤，如果是 scripterror，再使用tryjs。后臺統(tǒng)計方法、不同業(yè)務(wù)接入體系、抽樣統(tǒng)計onerror:可以捕捉語法錯誤和運(yùn)行時錯誤； 可以拿到出錯的信息，堆棧，出錯文件、行號、列號；當(dāng)前頁面執(zhí)行的 js腳本出錯都會捕捉到；跨域的資源需要特殊頭部支持。try-catch:無法捕捉語法錯誤，只能捕捉運(yùn)行時錯誤；可以拿到出錯的信息，堆棧，出錯文件、行號、列號；需要借助工具把function塊以及文件塊加入try,catch，可以在這個階段打入更多的靜態(tài)信息。點擊熱力圖 clickHeat、heatMapjs加載失敗優(yōu)化方案失敗重發(fā)機(jī)制加載源域名服務(wù)器文件https反劫持百度alog