1. 程式人生 > >2019年最新的Web前端技能樹,看看你要學些什麼?

2019年最新的Web前端技能樹,看看你要學些什麼?

Web前端是指,利用Web技術進行使用者介面開發。並增加與後臺的互動動態功能,同時結合後臺開發技術模擬整體效果,進行豐富網際網路的Web開發,致力於通過技術改善使用者體驗。而一個好的Web前端開發工程師又需要具備哪些技能呢?小編分享一份比較全面的Web前端技能樹,看看你需要學習什麼?

一、語言基礎

JavaScript:

作用域鏈、閉包、執行時上下文、this

原型鏈、繼承

NodeJS基礎和常用API

CSS:

選擇器

瀏覽器相容性及常見的hack處理

CSS佈局的方式和原理(盒子模型、BFC、IFC等等)

CSS 3,如animation、gradient、等等

HTML:

語義化標籤

學習資料的話可以加下web前端開發學習裙:659加上479再加上860自己去群裡下載下。

二、進階

JavaScript:

非同步控制(Promise、ES6 generator、Async)

模組化的開發方式(AMD、CMD、KMD等等)

JavaScript直譯器的一些相關知識

非同步IO實現

垃圾回收

事件佇列

常用框架使用及其原理

jQuery:基於選擇器的框架,但個人認為不能叫框架,應該算工具庫,因為不具備模組載入機制,其中原始碼很適合閱讀鑽研

AngularJS/Avalon等MVVM框架:著重理解MVVM模式本身的理念和雙向繫結的實現,如何解耦

underscore:優秀的工具庫,方便的理解常用工具程式碼片段的實現

polymer/React:元件化開發,面向未來,理解元件化開發的原理

CSS和HTML:主要是CSS3的特性和HTML5的特性,以及瀏覽器處理的流程和繪製原理

DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程

解析HTML、CSS、JavaScript時造成的阻塞

HTML5相關

SVG及向量圖原理

Canvas開發及動畫原理(幀動畫)

Video和Audio

flex box佈局方式

icon fonts的使用

常用NodeJs的package:

koa

express

underscore

async

gulp

grunt

connect

request

一些理念:

響應式Web

優雅降級、漸進增強

don`t make me think

網頁可用性、可訪問性、其中的意義

SEO搜尋引擎優化,瞭解搜尋引擎的原理

SPA的好處和問題

效能優化:

減少請求數量(sprite、combo)

善用快取(application cache、http快取、CDN、localstorage、sessionstorage,備忘錄模式)

減少選擇器消耗(從右到左),減少DOM操作(DOM和JavaScript直譯器的分離)

CSS的迴流與重繪

三、專案

版本管理:(首推Git,用過Git都不會想用SVN了)

Git:本地版本管理的機制

SVN:遠端中心的版本管理機制

自動化構建:主要就是less、模板、coffee等的預處理以及對程式碼壓縮和合並

Gulp:基於流構建,速度快、模組質量好

Grunt:獨立任務構建,速度慢,配置蛋疼,靈活性高

預處理和模板引擎

less:語法簡單,但功能有限

jade、ejs、velocity等模板引擎,各有各的長處

coffee:python工程師最愛,我沒用過

環境搭建:主要是將線上程式碼對映到本地,並在本地啟動一個demo伺服器,至於模擬資料的mock,見仁見智了

本地代理:ihosts

自動化測試:在業務較為穩定的情況下,可以通過自動化測試來減少測試的事件,但需求較多的時候,維護測試用例的成本會很高,可能用自動化測試會起到反效果

jasmine

mocha

生態系統

npm

bower

spm

搭建一個屬於自己的部落格

git pages

hexo

jekyll

Web Componets:面向未來的元件化開發方式

HTML模板

Shadow DOM

Custom Elements

HTML Import

移動端Native開發:這也是需要了解的,以後Web前端工程師會經常地和Webview打交道,也要了解native開發。

當然,以上小編分享的技能能夠幫助你成為一個合格的Web前端工程師。不管學習什麼內容,基礎是很重要的,學習Web前端技術也是一樣的,技術知識打牢,多看多問多敲程式碼。相信堅持就可以學會這門技術,也可以去全面系統學習一下。。