1. 前端開發工程師必讀書籍有哪些值得推薦
1、HTML/HTML5基礎：
1.0、語義化H5標簽
1.1、H5引進了一些新的標簽，特別注意article、header、footer、aside、nav等，注意HTML的標題結構
1.2、理解瀏覽器解析HTML的過程，理解DOM的樹形結構，及相應API
1.3、理解HTML標簽在各個瀏覽器上的默認樣式（代理樣式），理解CSS中的重置樣式表的概念
1.4、理解Canvas、SVG、video等功能性標簽
1.5、理解form、iframe標簽，理解文件提交過程
推薦書籍：
A、《HTML5秘籍》
2、高健壯性CSS
2.1、學習基礎知識，包括大部分常用屬性、選擇器的用法，要對大多數標簽有個基礎概念,在日常使用的基礎上，嘗試學習瀏覽器兼容性問題，要知道兼容性的主要問題及解決方法
2.2、深入理解盒子模型，區分塊級元素、行內元素，有幾個比較重要的屬性：display、float、position，一定要弄清楚區分盒子、行內盒子的概念另外可以考慮學一些預編譯語言：sass、less，都很簡單
2.3、學習常用框架，可以使用bootstrap構建項目
2.4、學習框架的代碼組織方式包括：12格柵系統、組件化、組件的風格化等
2.5、學習CSS 3的新功能，特別是動畫效果、選擇器
2.6、認真學習一些CSS對象化思想，學習編寫簡潔性、高復用性、高健壯性的CSS
2.7、有空的話，可以看看所謂的扁平化設計，還有簡潔性
2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念
學習方法：
1、多看別人的代碼，一些設計的不錯的網站就是很好的學習素材，比如拉勾網
2、一定要學會使用grunt、gulp壓縮CSS
3、display + position + float 可以組合出很復雜的效果，多想想盒子模型
4、嘗試在不用float，且position不為absolute的情況下實現等高、等寬等布局
推薦書籍：
1、《圖靈程序設計叢書:HTML5與CSS3設計模式》
2、《Web開發技術叢書:深入理解Bootstrap》
3、《高流量網站CSS開發技術》
4、《CSS設計徹底研究》 這個一定要
5、《Web開發技術叢書:深入理解Bootstrap》
6、可以找一些專門講SASS的書，但是我沒找到
7、《CSS權威指南(第3版)》
3、深入學習js
3.1、重新學習JS語法，注意：表達式（特別是函數訪問表達式）、語句、類型（包括類型判斷)注意，這個時候主要傾向於「原生」JS哦，不要使用框架
3.2、深入理解JS的「一級函數」、對象、類的概念,學會使用函數來構造類、閉包，學會用面向對象的方式組織代碼
3.3、深入理解JS的作用域、作用域鏈、this對象（在各種調用形式中，this的指向）理解函數的各種調用方法（call、apply、bind等）
3.4、理解對象、數組的概念
理解對象的「[]」調用，理解對象是一種「特殊數組」
理解for語句的用法
深入理解JS中原始值、包裝對象的概念（重要）
3.5、學習一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分點有：backbone、angularjs、ejs、jade
通過比較多個框架的使用方法，想清楚「JS語言極其靈活」這一事實
總結常見用法，提高學習速度
學習模塊化開發（使用require.js、sea.js等）
3.6、適當看一些著名框架的源碼，比如jQuery（不建議看angularjs，太復雜了）
重要的是學習框架中代碼的組織形式，即設計模式
3.7、了解JS解釋、運行過程，理解JS的單線程概念
深入理解JS事件、非同步、阻塞概念
3.8、理解瀏覽器組成部件，理解V8的概念
學習V8的解釋-運行過程
在V8基礎上，學會如何提高JS性能
學會使用chrome的profile進行內存泄露分析
學習方法：
1、提高對自己的要求，要有代碼潔癖
2、適當的時候看看優秀框架的源碼，特別是框架的架構模式、設計模式
3、多學學設計模式
4、學習原生JS、DOM、BOM、Ajax
推薦書籍：
1、《O』Reilly精品圖書系列:JavaScript權威指南(第6版)》 必看
2、《JavaScript設計模式》
3、《WebKit技術內幕》
4、《JavaScript框架高級編程:應用Prototype YUI Ext JS Dojo MooTools》
5、《用AngularJS開發下一代Web應用》
6、跨終端
6.1、理解混合APP的概念
6.2、理解網頁在各類終端上的表現
6.3、理解網頁與原生app的區同，重在約束
6.4、理解單頁網站，特別要規避頁面的內存泄露問題
6.5、入門nodejs，對其有個基礎概念，知道它能做什麼，缺點是什麼
推薦書籍：
1、《單頁Web應用:JavaScript從前端到後端 》
2、《Web 2.0界面設計模式》
3、《響應式Web設計:HTML5和CSS3實戰》
5、工具
學會使用grunt進行JS、CSS、HTML 壓縮，特別是模塊化js開發時候的壓縮
會用PS進行切圖、保存icon
入手sublime、webstorm
學會使用chrome調試面板，特別是：console、network、profile、element
進階：
4、性能
1.1、理解資源載入的過程
包括：TCP握手連接、HTTP請求報文、HTTP回復報文
1.2、理解資源載入的性能約束，包括：TCP連接限制、TCP慢啟動
1.3、理解CSS文件、JS文件壓縮，理解不同文件放在頁面不同位置後對性能的影響
1.4、理解CDN加速
1.5、學會使用HTTP頭控制資源緩存，理解cache-control、expire、max-age、ETag對緩存的影響
1.6、深入理解瀏覽器的render過程
推薦書籍：
1、《Web性能權威指南》
2、雅虎網站頁面性能優化的34條黃金守則
5、HTTP及TCP協議族
2.1、學習http協議，理解http請求-響應模式
2.2、理解http是應用層協議，它是構建在TCP/IP協議上的
2.3、理解http報文（請求-響應報文）
2.4、理解http代理、緩存、網關等概念，指定如何控制緩存
2.5、理解http協議內容，包括：狀態碼、http頭、長連接（http1.1）
2.6、學習http伺服器的工作模型，對靜態文件、CGI、DHTML的處理流程有個大致概念
推薦書籍：
1、《HTTP權威指南》
2、《TCP/IP詳解》
3、《圖解TCP/IP(第5版)》
更多前端書籍推薦：
《JavaScript半知半解》 《Web開發實戰》
推銷自己的前端技術書籍-博客-雲棲社區-阿里雲
今天主要自我推銷兩本前端技術書籍！
《JavaScript半知半解》
《Web開發實戰》
一、《JavaScript半知半解》
為什麼寫這本書？
因為之前作者在博客上洋洋灑灑地將之前學習JavaScript的筆記整理了出來，一共17篇，感覺查找和翻閱還是不方便，所以產生了編輯成電子書的念頭，一來方便作者個人查找，二來方便後續內容的補充，三來也方便喜歡JavaScript的夥伴們閱讀。
書籍閱讀地址：《JavaScript半知半解》
大綱
二、《Web開發實戰》
書籍閱讀地址：《Web開發實戰》
為什麼寫這本書？
網上的插件雖多，但大多數並沒有深究到原理，故而產生了寫一本前端實例的書籍。主要是為了想深入學習的夥伴們，書上的內容也許不是最優秀的，但會一步步講解，會告訴你每一步的原理，讓你學習後也可以自己造輪子！
大綱
《Web開發實戰》集合了大量的前端開發案例，目前主要選擇日常開發中會用到的加入本書，分為四部分：CSS實戰篇、JavaScript實戰篇、Canvas實戰篇和移動實戰篇。
2. 2020年Web前端自學之路指南
今天小編要跟大家分享的文章是關於2020年Web前端自學之路指南。許多人可能跟著網路上的各種教程就入了前端這行的門，但大多數都只是機械的學習著資料中的內容。俗話說，選擇要比努力重要。那麼學習開發，首先應該要有一個清晰的學習路線。希望這篇文章，能為大家在選擇未來的發展方向時提供一些參考和幫助。下面來和小編一起看一看吧！
1、基礎學習
●HTML+CSS基礎：
HTML進階、CSS進階、div+css布局、排版、html+css整站開發，樣式美化和瀏覽器兼容
●JavaScript基礎：
掌握Js基本語法、條件、語句和循環、js內置對象常用方法、ECMAscript、DOM、BOM、定時器和焦點圖，並學習增強邏輯的常用演算法，實現木馬、拖放、放大鏡等常見的網路特效。
●JavaScript高級特性：
正則表達式與JSON、正則表達式案例、JavaScript原理與庫封裝、閉包、函數節流、作用域鏈、面向對象基礎、事件與運動框架封裝
●JQuery基礎使用：
DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件的基本使用，開發復雜的交互功能和效果，並能熟悉JQuery的插件開發機制。
2、HTML5+CSS3和移動Web開發
●HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket
●CSS3：
CSS3新選擇器、偽元素、顏色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作
●圖像學：
Canvas、Canvas游戲、數據可視化、Heighcharts.js
●Bootstrap：
響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS
●移動Web開發：
跨終端WEB和主流設備簡介、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、商城頁面、滾屏
3、HTTP服務和AJAX編程
●WEB伺服器基礎：
伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹
●PHP基礎：
PHP基礎語法，使用PHP處理簡單的GET/POST請求
●AJAX上篇：
Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用
●AJAX下篇：
JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI用法、使用Ajax實現瀑布流案例
4、面向對象進階
●面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器
●面向對象三大特徵：
繼承性、多態性、封裝性、介面
●設計模式：
面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程
5、封裝一個屬於自己的框架
●框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架
●框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝
●框架封裝高級和補充：
JQuery框架雛形、可擴展性、模塊化
6、模塊化組件開發
●面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序
●面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS、CommonJS、ES6Moles
7、工程化&構建、主流的框架
●Web開發工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack、打包案例
●MVC/MVVM/MVW框架：
Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、項目驅動
8、Node.js全棧開發
●快速入門：
Node.js發展、生態圈、Io.js、Linux/Windows/OS
X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試;掌握node.js全棧的解決方案和在伺服器端JS高效開發
●核心模塊和對象：
全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端、Socket.IO
●Web開發基礎：
HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。
●快速開發框架：
Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。
●資料庫：
mongoose/mongoDB、MYSQL
●Node.js開發電子商務實戰：
需求與設計、賬戶模塊注冊登錄、會員中心模塊、前台展示模塊、購物車，訂單結算、在線客服即時通訊模塊
9、微信系列
●微信公眾號
JS-SDK配置、定製菜單、回調、定製分享內容、掃一掃、地理位置、微信音頻、圖像、語音識別功能、伺服器端curl
庫、支付、卡券、微店、微信開發模式與公眾號分析、統計分析
●微信小程序
小程序項目、uni-app、mpvue
10、移動APP(Web/Native/Hybrid)
●ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API
●Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)
11、其他
●職業素養
溝通表達、團隊合作、目標管理、時間管理、心態管理
●就業指導
簡歷&投遞技巧、面試&筆試技巧
12、推薦一些編程學習網站
01、嗶哩嗶哩
這個網站如果讓我評價，可謂是上邊的視頻都是非常高質量的，你可以去搜索看一下。
02、菜鳥教程
這個網站雖然不是視頻網站，一聽名字就知道適合菜鳥的，但是基礎的知識寫的非常詳細，很清晰易懂，非常適合剛開始學習編程的小夥伴。
03、W3School
之前剛開始學WEB開發時，經常在該網站，就是結合w3school學習前端，開發時，如果遇到記不清的標簽，就去w3school搜索，平常有時間，就來慕課看前端視頻。
類似這樣的學習網站還有很多，該開始入門的話上面的網站足矣。其他的網站推薦還有騰訊課堂、實驗樓、果殼MOOC學院等、知乎、掘金......
以上就是小編今天為大家分享的關於2020年Web前端自學之路指南的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：原創前端猿前端猿指北
3. seajs是什麼
js的一種框架
追求簡單、自然的代碼書寫和組織方式，具有以下核心特性：
簡單友好的模塊定義規范：Sea.js 遵循 CMD 規范，可以像 Node.js 一般書寫模塊代碼。
自然直觀的代碼組織方式：依賴的自動載入、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣。
Sea.js 還提供常用插件，非常有助於開發調試和性能優化，並具有豐富的可擴展介面。
4. Seajs的使用
seajs.config
alias
別名配置，配置之後可在模塊中使用require調用 require('jquery');
paths
設置路徑，方便跨目錄調用。通過靈活的設置path可以在不影響base的情況下指定到某個目錄。
vars
變數配置。有些場景下，模塊路徑在運行時才能確定，這時可以使用 vars變數來配置。
vars 配置的是模塊標識中的變數值，在模塊標識中用 {key}來表示變數。
map
該配置可對模塊路徑進行映射修改，可用於路徑轉換、在線調試等。
preload
使用preload配置項，可以在普通模塊載入前，提前載入並初始化好指定模塊。
註：preload中的空字元串會被忽略掉。
註：preload中的配置，需要等到 use 時才載入。比如：
註：preload 配置不能放在模塊文件裡面：
debug
值為true時，載入器不會刪除動態插入的 script 標簽。插件也可以根據debug配置，來決策 log 等信息的輸出。
base
Sea.js 在解析頂級標識時，會相對 base 路徑來解析。
charset
獲取模塊文件時，<script> 或 <link> 標簽的charset屬性。 默認是utf-8
charset還可以是一個函數：
seajs.use
用來在頁面中載入一個或多個模塊。seajs.use(id, callback?)
注意：seajs.use 與 DOM ready 事件沒有任何關系。如果某些操作要確保在 DOM ready 後執行，需要使用 jquery 等類庫來保證。比如
注意：use方法第一個參數一定要有，但是可以是null，也可以是一個變數
seajs.cache
通過 seajs.cache，可以查閱當前模塊系統中的所有模塊信息。
比如，打開 seajs.org，然後在 WebKit Developer Tools 的 Console 面板中輸入 seajs.cache，可以看到：
seajs.reslove
類似require.resolve，會利用模塊系統的內部機制對傳入的字元串參數進行路徑解析。
seajs.data
通過 seajs.data，可以查看 seajs 所有配置以及一些內部變數的值，可用於插件開發。當載入遇到問題時，也可用於調試。
5. Seajs優缺點 什麼是CMD 和AMD 如何使用
1.簡介
Seajs，一個Web模塊載入框架，追求簡單、自然的代碼書寫和組織方式，：Sea.js 遵循 CMD 規范，模塊化JS代碼。依賴的自動載入、配置的簡潔清晰，可以讓程序員更多地專注編碼。
2.優缺點
優點：
1).提高可維護性。
2).模塊化編程。
3).動態載入，前端性能優化
缺點：
1).學習文檔偏少且混亂，會更改團隊使用JS的編寫習慣，必須使用模塊化編程。
2).不太適合團隊目前的情況，多JS文件但少改動，動態載入優勢和模塊化優勢不明顯。
3). 需要配套使用SPM工具，JS的打包和管理工具。
2.什麼是CMD 和AMD ？
非同步模塊定義（AMD）是Asynchronous Mole Definition的縮寫，是 RequireJS 在推廣過程中對模塊定義的規范化產出。
通用模塊定義（CMD）是Common Mole Definition的縮寫，是SeaJS 在推廣過程中對模塊定義的規范化產出。
RequireJS 和 SeaJS 都是模塊化框架的代表，AMD和CMD，是他們各自定義模塊化的方式，大同小異，主要是代碼風格和API不同。
3.如何使用？
代碼如下:<script src="../js/examples-master/sea-moles/seajs/seajs/2.1.1/sea.js"></script>
<script>
//配置js路徑
seajs.config({
alias:{
"jquery":"../examples-master/sea-moles/jquery/jquery/1.10.1/jquery.js"
}
});
//載入模塊
seajs.use('../js/seajs/init',function($){
$("#test_div").click(function(){alert(1);});
});
</script>
代碼如下:
//init.js
define(function(require,exports,mole){
var $ = require('jquery');
return $;
});