你不能不知道的前端知識體系

1、框架與組件

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由狀態控制

commonJS/AMD/CMD

模塊引入

模塊定義

模塊標識

UMD解決不一樣規範兼容性的問題，例如webpack封裝

模塊懶執行(CMD)與與預執行(AMD)

loadJs模塊化加載原理與實現

建立script標籤，須要id映射到資源url

onload加載模塊隊列判斷

所有加載完成後觸發

加載失敗問題優化

requirejs、modjs、seajs

polyfill、shim原理與實現

polyfill提供了開發者們但願瀏覽器原生提供支持的功能特性

shim將新的API引入到舊的環境中,且僅靠舊環境中已有的手段實現

virtual Dom、Incremental DOM

1.用js對象樹表示dom樹結構，根據該對象樹構建dom樹

2.狀態改變時，從新構建對象，和舊的對象對比，記錄兩個對象樹差別

3.將對象樹差別應用到dom中

小結:js對象模擬dom(elem.js)，virtual dom diff算法(diff.js)、差別渲染dom(patch.js)

incremental dom在狀態改變時掃描舊對象樹將差別直接應用到dom中

shadow dom

隔離外部環境用於封裝組件：結構、樣式、行爲

實現形式：新標籤、class類屬性 + 構建編譯

webwork與service Worker

webwork與主線程機制，on/post

serviceworker可做爲瀏覽器請求代理

應用場景

ES6轉ES五、Babel與ES6開發規範體系

ES6編碼規範全

ES6在babel下兼容性

ES6在node下兼容性與性能

ES6新特性：看編碼規範

aurelia ES6前端框架

Isomorphic JavaScript

同構原理

同構方案 Rendr

nodejs: 服務器

hapi: 應用服務

backbone.js: 後臺mvc

requirejs: 模塊加載

jquery: dom處理

reactjs同構:React + Flux + Koa

雙向數據綁定

函數觸發:vuejs

髒數據檢測:angular

對象hijacking:avalon

browserify運行原理

1.從入口模塊開始分析require函數調用

2.根據依賴生成AST

3.根據AST找到每一個模塊的模塊名

4.獲得每一個模塊的依賴關係，生成一個依賴字典

5.包裝每一個模塊（傳入依賴字典以及export和require函數），生成執行的js

performance timing

performance timing api

performance timing 過程

performance timing 性能計算

performanceTrace庫

組件UI與js組件規範化

組件編碼規範

組件目錄規範：組件目錄與公用目錄

組件構建規範：構建環境支持

組件模塊化管理：spm，bowserify

組件複用性管理

第三方組件接入成本

immutable JavaScript

generator與promise原理與使用

2、構建生態

grunt/gulp開發環境任務編寫

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

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

發佈替換插件

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

白名單配置

自定義插件編寫

npm、jspm、bower包管理工具

r.js、browserify、webpack、webpack 二、Rollup打包工具使用

原理：根據依賴配置文件對文件進行依賴打包

webpack支持更多的規範打包，AMD,Commonjs

webpack+babel/reactjs+reflux

fis3構建與插件開發、構建環境、fis3構建離線包

web Component：rosetta-org、x-view、Q、riot、nova

brunch構建工具

3、開發技巧與調試

fiddler加willow基礎組合調試

常見配置與分析

結合瀏覽器調試

werien、vorlonjs遠程調試，chrome inspect

mockjs，F.M.S(Front Mock Server)模擬調試使用與cgi自動調試

macha/phantomjs/casperjs/karma測試自動化任務使用

自動化UI測試，海豚

node-supervior、node-inspector、karma

開發發佈系統流程

sublime高效插件

emmet工具使用、 sublimelinter、 babel snippets、 sublimeLint、 SassBeautify 、 emmet 快速編輯、 jsxlint、 SideBarEnhancements、 SnippetsMaker、 SublimeCodeIntel、 css snippets、 ColorPicker、 html/css/js Pretty、 SpinnetMacker、 DocBlockr、 MultiEditUtils、 javascript & node spinnet、 JavaScript & NodeJS Snippets、 jsLint、cssLint

代碼自動化檢查fecs

4、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原理與實現

rem計算：width*retina/10，至關於屏幕寬度爲10rem

字體在rem狀況下仍然使用px

code4ui、code4app、初頁、maka等

前端dom操做即便刷新前端頁面

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

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

發佈打包後輸出文件

css3動畫

transform

animation

transiction

3D加速與動畫加速

動畫庫

緩動函數速查表： www.xuanfengge.com/easeing/eas…

Ceaser： xuanfengge.com/easeing/cea…

cubic-bezier：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

5、native/hybrid/桌面開發

ionic移動開發方案

運行架構

hybrid混合開發

cordova交互

離線包更新

性能瓶頸

nativescript移動開發方案

react Native移動開發方案

運行架構：js引擎

性能缺陷與內存泄露

更新機制

使用場景

android/ios原生開發與框架

java

oc、swift

web與native交互

屏幕旋轉

搖一搖

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

打電話，發短信

電池電量

地理位置

日期選擇

開啓硬件加速

桌面應用開發

nodewebkit

atom-shell(後更名爲electron)

網易Hex

pomelo(遊戲服務器框架)

react desktop

appjs:appjs.com

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

yslow、pagespeed

移動web性能優化

手機瀏覽器」省流量」原理

增量更新原理及注意事項

本地存儲的應用

加載優化

圖片優化

單頁面及路由實現

業內著名站點案例分析

7、全棧/全端開發

express/node club + mongodb、thinkjs等框架

node.js直出

實時web開發，meteor/express.io

MEAN(mongodb/express/angular/nodejs)

http與http2協議、bigpipe、pipeline

離線緩存，cookie、localstorage、indexdb

cdn與dns

動態域名加速

cdn原理與cdn combo

8、研究實驗

WebAssembly、webTRC、typescript

Material design規範的前端框架

交互動效庫

AMP-HTML規範

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

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

9、數據分析與監控

badjs數據上報

捕獲錯誤兩種方法：onerror、try-catch。抽樣上報，先onerror統計語法錯誤，若是是script error，再使用tryjs。

後臺統計方法、不一樣業務接入體系、抽樣統計

onerror:能夠捕捉語法錯誤和運行時錯誤；能夠拿到出錯的信息，堆棧，出錯文件、行號、列號；當前頁面執行的js腳本出錯都會捕捉到；跨域的資源須要特殊頭部支持。

try-catch:沒法捕捉語法錯誤，只能捕捉運行時錯誤；能夠拿到出錯的信息，堆棧，出錯文件、行號、列號；須要藉助工具把function塊以及文件塊加入try,catch，能夠在這個階段打入更多的靜態信息。

點擊熱力圖clickHeat、heatMap

js加載失敗優化方案

失敗重發機制

加載源域名服務器文件

https反劫持

百度alog數據上報

10、其它軟技能

axure 原型圖設計

xmind腦圖管理

效率管理

can i use、github

知識管理/總結分享

產品思惟與技能

11、前端技術網站

技術社區

w3c tech、w3c plus、w3 help

div.io、nodeParty

稀土掘金、前端早讀課

alloyteam、html5基地

W3 help

行業會議

segmentfault會議

深js、杭js

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

D二、webrebuild

infoQ內容、Qcon、velocity

————————————————

原文連接：blog.csdn.net/iteye_18153…