前端工程師技能整理

前端工程師技能整理

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

• 動畫庫

• 緩動函數速查表： 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

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

 

---

今天先到這兒,部份內容來自網絡, 但願對您有參考做用, 您可能感興趣的文章:
構建高效的研發與自動化運維
某大型電商雲平臺實踐
互聯網數據庫架構設計思路
IT基礎架構規劃方案一(網絡系統規劃)
餐飲行業解決方案之客戶分析流程
餐飲行業解決方案之採購戰略制定與實施流程
餐飲行業解決方案之業務設計流程
供應鏈需求調研CheckList
企業應用之性能實時度量系統演變

若有想了解更多軟件設計與架構,系統 IT,企業信息化 資訊，請關注個人微信訂閱號：

做者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
該文章也同時發佈在個人獨立博客中-Petter Liu Blog。