一、框架與組件

**bootstrap等UI框架設計與實現

• 伸縮布局：grid網格布局

• 基礎UI樣式：元素reset、按鈕、圖片、菜單、表單

• 組件UI樣式：按鈕組、字體圖標、下拉菜單、輸入框組、導航組、面包屑、分頁、標簽、輪播、彈出框、列表、多媒體、警告

• 響應式布局：布局、結構、樣式、媒體、javascript響應式

• 第三方插件：插件管理

**jQuery、zepto使用原理以及插件開發

• 支持amd、cmd、全局變量的模塊化封裝

• $.fn.method = function(){}

**mvc/mvvm框架原理設計，vue/angular/avalon等

• directive設計：html、text、class、html、attr、repeat、ref，可擴展

• filter設計：bool、upperCase、lowerCase，可擴展

• 表達式設計：if-else等實現

• viewmodel結構設計：例如數據，元素，方法的掛載與作用域

• 數據更變檢測：函數觸發，臟數據檢測、對象hijacking

**polymer/angular2思想與設計思路

• import技術

• template和script引入方式

• css樣式命名空間隔離

• 簡單復用第三方庫

**reactjs原理與使用

• virtual dom單向數據綁定

• js執行語法方式

• UI由狀態控制

……

二、構建生態

**grunt/gulp開發環境任務編寫

• 文件處理插件：html、scss、js、image、font、其它

• 優化插件：雪碧圖、圖片壓縮、iconfont構建

• 發布替換插件

• 打包、壓縮包插件：組件自動分析

• 白名單配置

• 自定義插件編寫

……

三、開發技巧與調試

**fiddler加willow基礎組合調試

• 常見配置與分析

• 結合瀏覽器調試

werien、vorlonjs遠程調試，chrome inspect ?代碼自動化檢查fecs

……

四、html、css與重構

**jpeg、webp、apng、bpg圖片

• 編碼原理

• 特點與優劣勢

• 適用場景

**iconfont使用與實現原理

• 自動打包構建方法

• iconfont兼容性寫法

• fonthello、fontawesome、icomoon.io、iconfont.cn線上工具

**頁面響應式設計

• layout布局響應式

• html結構響應式

• css樣式響應式

• image媒體響應式

• javascript響應式

• media query與平臺判斷

**css重置

• reset

• nomalize

• neat

**sass/compass/less/postcss常用語法與使用

• 常用語法功能

• 組件化UI設計管理

• 構建工具實現方案

• 雪碧圖自動合成

• iconfont自動接入等等

**media query與常見頁面尺寸了解

• 媒體類型引入和媒體特性引入

• device-width適應

• retina屏幕適應

**em,rem原理與實現

**code4ui、code4app、初頁、maka等

• 前端dom操作即使刷新前端頁面

• 根據dom操作生成組件config配置保存到db

• 根據config配置使用r.js或webpack打包

• 發布打包后輸出文件

**css3動畫

• transform

• animation

• transiction

• 3D加速與動畫加速

• 動畫庫

• 緩動函數速查表：?http://www.xuanfengge.com/easeing/easeing/

• Ceaser：?http://xuanfengge.com/easeing/ceaser/

• cubic-bezier：http://cubic-bezier.com/

**css網格布局

• susy

• Responsive Grid System

• Fluid 960 Grid(adaptjs)

• Simple Grid

**搜索引擎與前端SEO

• tdk優化

• 頁面內容優化

• 唯一的H1標題

• img設置alt屬性

• nofollow

• url優化

• 統一鏈接

• 301跳轉

• canonical

• robot優化

• robots.txt

• meta robots

• sitemap

• SEO工具

• 各種站長工具等

**瀏覽器緩存種類，resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage

• store.js、cookie.js

**UI框架

• bootstrap、jqwidgets、semantic ui、amaze ui

• 微信手Q ui: frozenui、weui、blend ui

• extjs、echart圖表ui

……

五、native/hybrid/桌面開發

**ionic移動開發方案

• 運行架構

• hybrid混合開發

• cordova交互

• 離線包更新

• 性能瓶頸

**nativescript移動開發方案

**react Native移動開發方案

• 運行架構：js引擎

• 性能缺陷與內存泄露

• 更新機制

• 使用場景

**android/ios原生開發與框架

• java

• oc、swift

• web與native交互

• 屏幕旋轉

• 搖一搖

• 錄像，拍照，選取本地圖片

• 打電話，發短信

• 電池電量

• 地理位置

• 日期選擇

• 開啟硬件加速

**桌面應用開發

• nodewebkit

• 網易Hex

• pomelo(游戲服務器框架)

• react desktop

• appjs:appjs.com

……

六、前端/H5優化(另一個圖已給出)

**yslow、pagespeed

**移動web性能優化

• 單頁面及路由實現

• 業內著名站點案例分析

……

七、全棧/全端開發

**express/node club + mongodb、thinkjs等框架

**cdn與dns

• 動態域名加速

• cdn原理與cdn combo

……

八、研究實驗

**WebAssembly、webTRC、typescript

**Material design規范的前端框架

• 交互動效庫

**AMP-HTML規范

• 使用受限HTML以及緩存技術來提高移動網絡中靜態內容的性能

• 添加自定義的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等

……

九、數據分析與監控

**badjs數據上報

**點擊熱力圖clickHeat、heatMap

**js加載失敗優化方案

• 失敗重發機制

• 加載源域名服務器文件

• https反劫持

**百度alog數據上報

……

十、其它軟技能

**axure 原型圖設計

**xmind腦圖管理

**效率管理

**can i use、github

**知識管理/總結分享

**產品思維與技能

……

十一、前端技術網站

**技術社區

• alloyteam、html5基地

• W3 help

**行業會議

• segmentfault會議

• 深js、杭js

• GMIC(全球移動互聯網大會)

• D2、webrebuild

• infoQ內容、Qcon、velocity

完整版地址?http://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html

總結

以上是生活随笔為你收集整理的2015-2016前端架构体系技术的全部內容，希望文章能夠幫你解決所遇到的問題。

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