作為一名前端工程師——這些技能你掌握多少?

NO IMAGE

一、框架與元件

bootstrap等UI框架設計與實現

  1. 伸縮佈局:grid網格佈局
  2. 基礎UI樣式:元素reset、按鈕、圖片、選單、表單
  3. 元件UI樣式:按鈕組、字型圖示、下拉選單、輸入框組、導航組、麵包屑、分頁、標籤、輪播、彈出框、列表、多媒體、警告
  4. 響應式佈局:佈局、結構、樣式、媒體、javascript響應式
  5. 第三方外掛:外掛管理

jQuery、zepto使用原理以及外掛開發

  1. 支援amd、cmd、全域性變數的模組化封裝
  2. $.fn.method = function(){}

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

  1. directive設計:html、text、class、html、attr、repeat、ref,可擴充套件
  2. filter設計:bool、upperCase、lowerCase,可擴充套件
  3. 表示式設計:if-else等實現
  4. viewmodel結構設計:例如資料,元素,方法的掛載與作用域
  5. 資料更變檢測:函式觸發,髒資料檢測、物件hijacking

polymer/angular2思想與設計思路

  1. import技術
  2. template和script引入方式
  3. css樣式名稱空間隔離
  4. 簡單複用第三方庫

reactjs原理與使用

  1. virtual dom單向資料繫結
  2. js執行語法方式
  3. UI由狀態控制

commonJS/AMD/CMD

  1. 模組引入
  2. 模組定義
  3. 模組標識
  4. UMD解決不同規範相容性的問題,例如webpack封裝
  5. 模組懶執行(CMD)與與預執行(AMD)

loadJs模組化載入原理與實現

  1. 建立script標籤,需要id對映到資源url
  2. onload載入模組佇列判斷
  3. 全部載入完成後觸發
  4. 載入失敗問題優化
  5. requirejs、modjs、seajs

polyfill、shim原理與實現

  1. polyfill提供了開發者們希望瀏覽器原生提供支援的功能特性
  2. 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)

  1. incremental dom在狀態改變時掃描舊物件樹將差異直接應用到dom中

shadow dom

  1. 隔離外部環境用於封裝元件:結構、樣式、行為

  2. 實現形式:新標籤、class類屬性 構建編譯

webwork與service Worker

  1. webwork與主執行緒機制,on/post

  2. serviceworker可作為瀏覽器請求代理

  3. 應用場景

ES6轉ES5、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原理與使用

二、構建生態

grunt/gulp開發環境任務編寫

檔案處理外掛:html、scss、js、image、font、其它

優化外掛:雪碧圖、圖片壓縮、iconfont構建

釋出替換外掛

打包、壓縮包外掛:元件自動分析

白名單配置

自定義外掛編寫

npm、jspm、bower包管理工具

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

原理:根據依賴配置檔案對檔案進行依賴打包

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

webpack babel/reactjs reflux

fis3構建與外掛開發、構建環境、fis3構建離線包

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

brunch構建工具

三、開發技巧與除錯

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

四、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加速與動畫加速

動畫庫

緩動函式速查表: 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

atom-shell(後改名為electron)

網易Hex

pomelo(遊戲伺服器框架)

react desktop

appjs:appjs.com

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

yslow、pagespeed

移動web效能優化

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

增量更新原理及注意事項

本地儲存的應用

載入優化

圖片優化

單頁面及路由實現

業內著名站點案例分析

七、全棧/全端開發

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

八、研究實驗

WebAssembly、webTRC、typescript

Material design規範的前端框架

互動動效庫
AMP-HTML規範

使用受限HTML以及快取技術來提高行動網路中靜態內容的效能

新增自定義的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等

九、資料分析與監控

badjs資料上報

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

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

onerror:可以捕捉語法錯誤和執行時錯誤;可以拿到出錯的資訊,堆疊,出錯檔案、行號、列號;當前頁面執行的js指令碼出錯都會捕捉到;跨域的資源需要特殊頭部支援。

try-catch:無法捕捉語法錯誤,只能捕捉執行時錯誤;可以拿到出錯的資訊,堆疊,出錯檔案、行號、列號;需要藉助工具把function塊以及檔案塊加入try,catch,可以在這個階段打入更多的靜態資訊。

點選熱力圖clickHeat、heatMap

js載入失敗優化方案

失敗重發機制

載入源域名伺服器檔案

https反劫持

百度alog資料上報

十、其它軟技能

axure 原型圖設計

xmind腦圖管理

效率管理

can i use、github

知識管理/總結分享

產品思維與技能

十一、前端技術網站

技術社群

w3c tech、w3c plus、w3 help

div.io、nodeParty

稀土掘金、前端早讀課

alloyteam、html5基地

W3 help

行業會議

segmentfault會議

深js、杭js

GMIC(全球移動網際網路大會)

D2、webrebuild

infoQ內容、Qcon、velocity