前端工程師必備資源

lq_prototype發表於2019-01-24

前端工程師

總結了一些常用的連結大家可以按照目錄尋找自己有用的連結，希望可以幫到大家。

目錄

1.前端知識體系 
2.入門類工具類
3.綜合效果搜尋平臺 
4.團隊Blog|週報類 
5.開發中心
6.Nodejs
7.綜合API 
8.Ecmascript  
9.Js template   
10.HTML5(HTML)    
11.CSS3(CSS)   
12.Angularjs  
13.React  
14.vue   
15.移動端API  
16.jQuery  
17.D3  
18.Requriejs  
19.Seajs  
20.less,sass  
21.Markdown  
22.相容性  
23.UI相關  
24.其它API   
25.圖表類   
26.正則  
27.前端規範  
28.PHP  
29.各個公司庫  
30.H5動畫互動頁開發的工具介紹  
31.常用
32.演算法
33.移動端  
34.JSON  
35.焦點圖  
36.Ext, EasyUI, J-UI 及其它各種UI方案  
37.頁面 社會化 分享功能  
38.富文字編輯器  
39.前端概述   
40.Gulp  
41.Grunt  
42.pc圖輪  
43.移動端圖輪  
44.檔案上傳  
45.模擬select  
46.取色外掛
47.城市聯動 
48.剪貼簿  
49.簡繁轉換 
50.表格 Grid  
51.線上演示  
52.常規優化   
53.優化工具    
54.線上工具  
55.前端架構   
56.推薦作品  
57.簡歷模板  
58.面試題   
59.iconfont  
60.Fiddler   
61.Chrome   
62.Firebug  
63.移動,微信除錯  
64.線上PPT製作  
65.前端導航網站  
66.常用CDN  
67.Git  
68.其它  
69.效果類  
70.彈出層  
71.優秀JavaScript專案
複製程式碼

前端知識體系

前端知識體系

前端知識結構

Web前端開發大系概覽

Web前端開發大系概覽-中文版

免費的程式設計中文書籍索引

前端免費書籍大全

前端知識體系

免費的程式設計中文書籍索引

智慧社 - 精通JavaScript開發

重新介紹 JavaScript

麻省理工學院公開課：電腦科學及程式設計導論

JavaScript中的this陷阱的最全收集--沒有之一

JS函數語言程式設計指南

JavaScript Promise迷你書

騰訊移動Web前端知識庫

Front-End-Develop-Guide 前端開發指南

前端開發筆記本

大前端工具集 - 聶微東

前端開發者手冊

入門類

前端入門教程

瘳雪峰的Javascript教程

jQuery基礎教程

前端工程師必備的PS技能——切圖篇

結合個人經歷總結的前端入門方法

工具類

前端人的俱樂部如何優雅地使用Sublime Text

新編碼神器Atom使用紀要

css sprite 雪碧圖製作

版本控制入門 – 搬進 Github

[Grunt-beginner前端自動化工具

IntelliJ IDEA 簡體中文專題教程

Webstorm,InterllIdea,Phpstorm

visual studio code

綜合效果搜尋平臺

JavaScript 資源大全中文版

100+ 超全的web開發工具和資源

zoommyapp.com 高質量相簿

unsplash.com 高質量相簿

www.pinterest.com 相簿

New Old Stock 復古風相簿

常用的JavaScript程式碼片段

團隊Blog|週報類

WEB前端開發

A JS tip per day!

騰訊全端 AlloyTeam

平安科技移動開發二隊技術週報

開發中心

mozilla js參考

chrome開發中心

safari開發中心

Nodejs

nodejs 篇幅比較巨大

Node.js 包教不包會

篇幅比較少

node express 入門教程

nodejs定時任務

一個nodejs部落格

【NodeJS 學習筆記04】新聞釋出系統

過年7天樂，學nodejs 也快樂

七天學會NodeJS

Nodejs學習筆記（二）--- 事件模組

angularjs nodejs

從零開始nodejs系列文章

nodejs事件輪詢

Node初學者入門，一本全面的NodeJS教程

NodeJS的程式碼除錯和效能調優

綜合API

各種流行庫搜尋

runoob.com-包含各種API集合

開源中國線上API文件合集

devdocs 英文綜合API網站

Ecmascript

Understanding ECMAScript 6 - Nicholas C. Zakas

exploring-es6翻譯

exploring-es6翻譯後預

阮一峰 Javascript

ECMA-262，第 5 版

Js template

template-chooser

淘寶模板juicer模板

Fxtpl v1.0 繁星前端模板引擎

mozilla - nunjucks

HTML5(HTML)

深入理解HTML5標籤

如何寫出高效率的HTML

HTML meta標籤總結與屬性使用介紹

CSS3(CSS)

CSS 語法參考

如何編寫可維護的CSS

CSS3動畫手冊

騰訊css3動畫製作工具

志爺css小工具集合

css3 js 移動大雜燴

bouncejs 觸控庫)

css3 按鈕動畫

全域性CSS的終結(狗帶

Angularjs

Angular.js 的一些學習資源

angularjs中文社群

Angularjs原始碼學習

Angularjs原始碼學習

angular對bootstrap的封裝

angularjs + nodejs

呂大豹 Angularjs

AngularJS 最佳實踐

Angular的一些擴充套件指令

Angular資料繫結原理

一些擴充套件Angular UI元件

Ember和AngularJS的效能測試

帶你走近AngularJS - 基本功能介紹

Angularjs開發指南

Angularjs學習

不要帶著jQuery的思維去學習AngularJS

angularjs 學習筆記

angularjs 開發指南

angularjs 英文資料

angular bootstrap

angular jq mobile

整合jQuery Mobile+AngularJS經驗談

有jQuery背景，該如何用AngularJS程式設計思想

AngularJS線上教程

angular學習筆記

React

react.js 中文論壇

react.js 官方網址

react.js 官方文件

react.js material UI

react.js TouchstoneJS UI

react.js amazeui UI

React 入門例項教程 - 阮一峰

React Native 中文版

Webpack 和 React 小書 - 前端亂燉

Webpack 和 React 小書 - gitbook

Webpack，101入門體驗

webpack入門教程

基於webpack搭建前端工程解決方案探索

React原創實戰視訊教程

vue

Vue 入門指南

Vue 的一些資源索引

移動端API

99移動端知識集合

移動端前端開發知識庫

移動前端的一些坑和解決方法（外觀表現）

【原】移動web資源整理

zepto 1.0 中文手冊

zepto 1.0 中文手冊

zepto 中文註釋 )

jqmobile 手冊

移動瀏覽器開發集合 )

移動開發大雜燴

jQuery

jQuery API 中文文件

hemin 線上版

css88 jqui api )

jquery 原始碼查詢

Web前端資源彙總(jQuery,Js,Css3等)

D3

Requriejs

Javascript模組化程式設計（一）：模組的寫法

Javascript模組化程式設計（二）：AMD規範

Javascript模組化程式設計（三）：require.js的用法

RequireJS入門（一）

RequireJS入門（二）

RequireJS進階（三）

requrie原始碼學習

requrie 入門指南

requrieJS 學習筆記

requriejs 其一

require backbone結合

Seajs

seajs 中文手冊

Less,sass

sass教程-sass中國 )

Sass 中文文件

Markdown

Markdown 語法說明 (簡體中文版

markdown入門參考

gitbook 國外的線上markdown可編輯成書

mdeditor 一款國內的線上markdown編輯器

stackedit 國外的線上markdown編輯器，功能強大，同步雲盤

mditor 一款輕量級的markdown編輯器

markdown-editor

相容性

esma 相容列表

W3C CSS驗證服務

線上測相容-移動端

UI相關

其它API

HTTP API 設計指南

javascript流行庫彙總

underscore 中文手冊

underscore原始碼分析

underscore原始碼分析-亞里士朱德的部落格

underscrejs en api

lodash - underscore的代替品

backbone 中文手冊

svg 中文參考

svg 匯出 canvas

localStorage 庫

圖表類

Highcharts 中文API

Highcharts 英文API

ECharts 百度的圖表軟體

開源的向量圖指令碼框架

正則

JS正規表示式元字元

正規表示式30分鐘入門教程

MDN-正規表示式

ruanyifeng - RegExp物件

小鬍子哥 - 進階正規表示式

正則線上測試

前端規範

通過分析github程式碼庫總結出來的工程師程式碼書寫習慣

HTML&CSS編碼規範 by @mdo

團隊合作的css命名規範-騰訊AlloyTeam前端團隊

前端編碼規範之js - by yuwenhui

前端編碼規範之js - by 李靖前端開發規範手冊

Airbnb JavaScript 編碼規範（簡體中文版）

AMD與CMD規範的區別

AMD與CMD規範的區別

KISSY 原始碼規範

規範加強版

前端程式碼規範及最佳實踐

百度前端規範

百度前端規範

百度前端規範

ECMAScript6 編碼規範--廣發證券前端團隊

JavaScript 風格指南/編碼規範（Airbnb公司版）

網易前端開發規範

前端規範資源列表

PHP

最流行的PHP 程式碼規範

最流行的PHP 程式碼規範

各個公司庫

Facebook Projects

百度web前端研發部

alloyteam-github

alloyteam-AlloyGameEngine

H5動畫互動頁開發的工具介紹

AEditor H5動畫互動頁開發的工具

值得訂閱的weekly

奇舞團開源專案

常用

ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性

中國個人身份證號驗證

演算法

資料結構與演算法 JavaScript 描述. 章節練習

常見排序演算法（JS版）

常見排序演算法-js版本

JavaScript 演算法與資料結構精華集

面試常考演算法題精講

移動端

【敏捷開發】Android團隊開發規範

Android 開發規範與應用

JSON

模擬生成JSON資料

返回跨域JSONAPI

焦點圖

myfocus-官方演示站

SuperSlidev2.1 -- 大話主席

Ext, EasyUI, J-UI 及其它各種UI方案

jquery easyui 未壓縮原始碼

MUI-最接近原生APP體驗的高效能前端框架

淘寶 HTML5 前端框架

KISSY - 阿里前端JavaScript庫

網易Nej - Nice Easy Javascript

Kendo UI MVVM Demo

雅虎UI - CSS UI

頁面社會化分享功能

百度分享 pc端

社會化分享元件移動端

ShareSDK 輕鬆實現社會化功能移動端

友盟分享移動端

富文字編輯器

功能齊全 tinymce

經典的ckeditor

經典的kindeditor

一個有情懷的編輯器。Bach's Editor

tower用的編輯器

summernote 編輯器

Quilljs編輯器

前端概述

前端工具大全

什麼是前端工程化

前端攻略-從路人甲到英雄無敵

###Gulp

[Gulp官網 ]( ]( gulpjs.com)

gulp資料收集

Gulp：任務自動管理工具 - ruanyifeng

Gulp探究折騰之路(I)

Gulp折騰之路(II)

Gulp不完全入門教程

為什麼使用gulp?

Gulp安裝及配合元件構建前端開發一體化

Gulp 入門指南

Gulp 入門指南 - nimojs

Gulp開發教程（翻譯）

前端構建工具gulpjs的使用介紹及技巧

Grunt

Fis

pc圖輪

單屏輪播sochange

左右按鈕多圖切換

fullpage全屏輪播

移動端圖輪

單個圖片切換

[單個全屏切換

百度的切換庫

單個全屏切換

旋轉拖動設定

類似於swipe切換

支援多種形式的觸控滑動

大話主席pc移動圖片輪換

基於zepto的fullpage

定寬網頁設計下，固定寬度佈局開發WebApp並實現多終端下WebApp佈局自適應

判斷微信客戶端的那些坑

可以通過javascript直接呼叫原生分享的工具

JiaThis 分享到微信程式碼

聊聊移動端跨平臺開發的各種技術

前端自動化測試

多種輪換圖片

滑動側邊欄

檔案上傳

百度上傳元件

flash 頭像上傳

圖片上傳預覽

圖片裁剪-shearphoto

jQuery圖片處理

模擬select

[糖餅 select ]( ]( aui.github.io/popupjs/doc…)

取色外掛

類似 Photoshop 的介面取色外掛

取色外掛集合

farbtastic 圓環＋正方形

城市聯動

jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果

剪貼簿

clipboard 最新的剪下方案

不是Flash的剪貼簿

簡繁轉換

表格 Grid

類似於Excel編輯表格-handsontable

bootstrap-table外掛

線上演示

js 線上編輯 - runjs

js 線上編輯 - jsbin

js 線上編輯 - codepen

js 線上編輯 - jsfiddle

java 線上編輯 - runjs

js 線上編輯 - hcharts

js 線上編輯 - jsdm

sql 線上編輯 - sqlfiddle

mozilla 線上編輯器

常規優化

Javascript高效能動畫與頁面渲染

移動H5前端效能優化指南

5173首頁前端效能優化實踐

給網頁設計師和前端開發者看的前端效能優化

複雜應用的 CSS 效能分析和優化建議

前端效能監控總結

前端技術：網站效能優化之CSS無圖片技術

瀏覽器的載入與頁面效能優化

頁面載入中的圖片效能優化

Yslow——效能優化

YSLOW中文介紹

轉一篇Yahoo關於網站效能優化的文章，兼談本站要做的優化

Yahoo!團隊實踐分享：網站效能

網站效能優化指南：什麼使我們的網站變慢？

網站效能優化實踐，減少載入時間，提高使用者體驗

淺談網站效能優化前端篇

前端重構實踐之如何對網站效能優化？

前端效能優化：使用媒體查詢載入指定大小的背景圖片

網站效能系列博文

載入，不只是少一點點

前端效能的測試與優化

分享網頁載入速度優化的一些技巧？

頁面載入中的圖片效能優化

web前端優化(基於Yslow

網站效能優化工具大全

【高效能前端1】高效能HTML

【高效能前端2】高效能CSS

由12306談談網站前端效能和後端效能優化

毫秒必爭，前端網頁效能最佳實踐

網站效能工具Yslow的使用方法

前端工程與效能優化（上）：靜態資源版本更新與快取

前端工程與效能優化（下）：靜態資源管理與模板框架

HTTPS連線的前幾毫秒發生了什麼

Essential Web Performance Metrics — A Primer, Part 1

Essential Web Performance Metrics — Part 2

YUISlide,針對移動裝置的動畫效能優化

Improving Site Performance

讓網站提速的最佳前端實踐

Why Website Speed is Important

Need for Speed – How to Improve your Website Performance

阿里無線前端效能優化指南 (Pt.1 載入期優化

優化工具

JavaScript 效能分析新工具 OneProfile

JavaScript 堆記憶體分析新工具 OneHeap

線上工具

[google線上工具

阿里-免費測試服務

阿里-F2etest多瀏覽器相容性測試解決方案

前端架構

如何成為前端架構師

關於前端架構-張克軍

百度騰訊offer比較（騰訊遊戲VS百度基礎架構）

推薦作品

winter程式碼片段需要FQ

岑安作品集

當耐特demo集合

米空格 js作品

顏海鏡作品

腳兒網作品

javascript個人作品

妙味的雷東昇遊戲作品

javascript作品集

雲五筆，灰度產生生成工具

個性的作品主頁

ucren js demos 集

例項陳列架

jyg 遊戲案例

很多jquery外掛

[不羈蟲 - soJs 作品系列

Html5 VideoPlayer

簡歷模板

動畫方式的簡歷

元件豐富簡歷

haorooms部落格

面試題

那幾個月在找工作（百度，網易遊戲）

2014最新面試題

2016校招內推 -- 阿里巴巴前端 -- 三面面試經歷

年後跳槽那點事：樂視+金山+360面試之行

Interviewing a front-end developer

拉勾網js面試題

Web開發筆試面試題大全

前端開發面試題

2014最新前端面試題

前端工作面試問題

前端開發面試題

)

最全前端面試問題及答案總結

如何面試一名前端開發工程師？

史上最全前端開發面試問題及答案整理

前端實習生面試總結

史上最全前端開發面試問題及答案整理

BAT及各大網際網路公司2014前端筆試面試題：JavaScript篇

前端開發面試題大收集

收集的前端面試題和答案

如何面試前端工程師

前端開發面試題

牛客網-筆試面經

iconfont

淘寶字型檔

zhangxinxu-icommon

用字型在網頁中畫ICON圖示(推薦教程

字型壓縮工具

Fiddler

Fiddler調式使用知多少(一深入研究

Chrome

Google Chrome 官方

Chrome - 基礎

Chrome - 進階

Chrome - 效能

Chrome - 效能進階

Chrome - 移動

Chrome - 使用技巧

Chrome - Console控制檯不完全指南

Chrome - Workspace使瀏覽器變成IDE

chrome開發工具快捷鍵

chrome除錯工具常用功能整理

Chrome 開發工具 Workspace 使用 )

Chrome神器Vimium快捷鍵學習記錄 )

sass除錯-w3cplus )

如何更專業的使用Chrome開發者工具-w3cplus )

chrome除錯canvas )

chrome profiles1 )

chrome profiles2 )

chrome profiles3 )

chrome移動版除錯

chrome的除錯

chrome console 命令詳解

檢視事件繫結1

檢視事件繫結2

神器——Chrome開發者工具(一

奇趣百科效能優化(Chrome DevTools 中的 Timeline Profils 等工具使用介紹

chrome 開發者工具的 15 個小技巧

Chrome開發者工具不完全指南

Chrome 開發者工具使用技巧

Firebug

[firebug視訊教程 ]( ]( www.imooc.com/learn/137)

firefox 模擬器

console.log 命令詳解

Firebug入門指南

Firebug控制檯詳解

移動,微信除錯

瀏覽器端除錯安卓

移動端前端開發除錯

使用 Chrome 遠端除錯 Android 裝置

mac移動端除錯

mac移動端除錯

無線除錯攻略

無線除錯攻略

屌爆了,完美除錯微信webview(x5

微信除錯工具

各種真機遠端除錯方法彙總

線上PPT製作

Cleaver快速製作網頁PPT

前端導航網站

介面清爽的前端導航

前端網址導航

前端開發資源

前端開發倉庫 - 眾多效果的收集地

前端資源導航

F2E 前端導航

常用CDN

百度靜態資源公共庫

360網站衛士常用前端公共庫CDN服務

Bootstrap中文網開源專案免費 CDN 服務

開放靜態檔案 CDN - 七牛

CDN加速 - jq22

Google jQuery CDN

Git

廖雪峰-Git教程

GitHub 新增 SSH keys

git常規命令練習

git的資料整理

我所記錄的git命令（非常實用）

企業開發git工作流模式探索部分休整

GitHub 漫遊指南

使用git和github進行協同開發流程

動畫方式練習git

其它

Mock.js 是一款模擬資料生成器

特色的HTML框架可以建立精美的iOS應用

Avalon新一代UI庫： OniUI

avalon.oniui-基於avalon的元件庫

生成二維碼(草料)

效果類

焦點圖輪播特效

HTML5 有哪些讓你驚豔的 demo？

彈出層

[artDialog 最新版

artDialog 文件

google code 下載地址

賢心彈出層

響應式使用者互動元件庫

sweetalert-有css3動畫彈出層

優秀JavaScript專案

Angular和Webpack種子檔案

Fis3面向前端的工程構建系統

前端JQuery系列:原始碼剖析

Microsoft ChakraCore 微軟的Chakra引擎

Quintus HTML遊戲引擎

一個用node.js搭建的有趣部落格

Web前端助手--FeHelper（Chrome擴充套件）

百度前端技術學院

Cheerio（node.js中的jQuery）

nodejs的一個聊天軟體類似微信

使用html5和node.js構建的網易雲音樂

babel ES6轉換為ES5

一個JS富文字編輯器

一個JS腦圖視覺化工具

一個JS寫的Flappy Bird Game

一個JS寫的GBA模擬器

SegmentFault寫的Markdown解析器

基於node.js的Ghost部落格

學習react的demos

相關文章

2019前端工程師必備前端開發資源必備
2019-10-30
前端工程師
前端工程師必備：前端的模組化
2019-04-12
前端工程師
web前端工程師必備技能
2022-10-11
Web前端工程師
六個前端開發工程師必備的Web設計模式/模組資源
2014-07-31
前端工程師Web設計模式
前端工程師必備技能彙總
2014-04-11
前端工程師
前端工程師面試必備（持續更新中）
2019-05-06
前端工程師面試
高階前端工程師面試必備（持續更新中）
2019-05-06
前端工程師面試
前端開發工程師必備系列-10個JavaScript難點
2018-01-18
前端工程師JavaScript
一份資料工程師必備的學習資源，乾貨滿滿（附連結）
2019-01-25
工程師
前端必備框架/工具
2020-03-30
前端框架
前端必備 Nginx 配置
2019-09-15
前端Nginx
前端必備效率工具
2019-01-21
前端
JavaScript 開發者必備的7個資源
2014-09-30
JavaScript
Swift開發必備資源薈萃
2014-08-30
Swift
建立前端資料模型，vue開發必備
2018-07-09
前端模型Vue
前端切圖必備技能
2020-04-10
前端
前端必備-less 的使用
2020-12-08
前端
前端開發者必備思維
2018-03-28
前端
Java工程師必備書單
2017-06-13
Java工程師
29個前端工程師和設計師必備的Chrome外掛
2016-01-08
前端工程師Chrome
前端工程師必備：細數那些好用的網站開發工具
2013-04-18
前端工程師網站
JavaScript 開發者必備：七大資源共享
2017-11-15
JavaScript
新時代下前端工程師的推薦書籍和必備知識
2019-02-23
前端工程師
怎麼做一名高薪前端工程師，必備哪些技術工具？
2019-07-22
高薪前端工程師
HTTP 火鍋【高階前端必備】
2018-10-03
HTTP前端
前端必備知識點—SVG
2018-07-12
前端SVG
前端開發必備網站
2018-02-27
前端網站
區塊鏈百寶庫【必備資源集合】
2018-03-06
區塊鏈
Android程式設計師必備精品資源
2014-08-15
Android程式設計師
2018年末最後一輪乾貨：資料工程師必備的學習資源（附連結）
2019-01-27
工程師
Flutter 必備開源專案
2019-12-02
Flutter
軟體測試工程師必備技
2009-05-22
工程師
前端開發者必備的程式碼開源平臺，記得收藏轉發！
2021-04-14
前端
web前端必備技術有哪些？
2022-03-08
Web前端
怎麼做一名高薪前端工程師需要必備哪些技術和工具
2019-10-06
高薪前端工程師
BetterDisplay Pro 破解最新資源：屏顯效果調整必備
2023-11-28
最全的Android開發資源整理--進階必備
2014-06-30
Android
前端工程師必須掌握的設計模式
2018-04-18
前端工程師設計模式