1. 前端必看的書籍
了解更多的前段知識請看下面我精心為您整理的前端必看的書籍,希望您喜歡!
十本學習前端必看書籍
第一本,入門
《Head first HTML&CSS》
最好的入門書。看兩遍就對HTML & CSS 有個大概印象了。
此時把w3cschool作為備查手冊收藏起來
第二本《CSS權威指南(第三版)》
最權威的CSS書籍,除了閱讀W3C的文檔外的不二選擇(就是翻譯有點操蛋,遇到感到難理解的地方可能還是要求助於網路資源)。有時間(無論是現在還是將來)可以反復看,並當做字典隨時查。
第三本《精通CSS》
廣受前輩推薦的一本書。上一本書是字典的話,這本書相當於《中學生作文大全》,匯集了一些CSS的最佳實踐。
第四本《圖解CSS3:核心技術與案例實踐》
這本書比較新,講解的是最新的CSS3(前三本書停留在CSS2.1時代),CSS3也是必學的,不是什麼可學可不學的最新技術。
HTML CSS值得看的書就這些(之後會有一本《CSS秘密花園》,尚在翻譯中,也很值得期待),剩下的就是自己寫還有看技術博客了。接下來是JavaScript,HTML和CSS都是沒有邏輯的標記型語言,JS才是真正的編程語言,評價前端工程師的水平就看這個了。
第五本《JavaScript DOM編程藝術》
最好的JS入門書籍,一目瞭然地告訴你如何用JS操作DOM(這是瀏覽器端編程的基本功),還灌輸了最符合標準的編程理念。可惜有點老,最新一版是2010年的,以至於部分內容有點過期,例如本書內經常提到“某某方法瀏覽器不一定支持,需要小心使用”,而這些歷史遺留問題當今已經不存在了,閱讀過程中無視就好。
第六本《JavaScript高級程序設計》
每個前端必看的書,此書是前端工程師科技樹的關鍵一環。看完此書後再看看之後各類進階書籍會比較好。
俗稱紅寶書,也算入門書籍,雖然是大部頭(七百多頁),但至少通讀一遍。
全部掌握了,你可以在網路社區里談笑風生了,經過實踐的鍛煉後,面試個前端工程師的崗位應該都沒問題了。
第七本《JavaScript語言精粹》
也是前端必看。薄薄一百來頁,對JS的去粗取精。
第八本《你不知道的JavaScript》
這是一套叢書, 目前為止僅翻譯了第一卷。每本都挺薄,深入介紹了JS中的重要概念。
第九本《JavaScript設計模式》
“設計模式”是軟體工程的重要課題,相當於高考時候的答題套路。前人總結出來的應對各種問題的模板。也算是必看書籍。關於JavaScript設計模式的書籍目前也有好幾本,也有國人寫的,挑一兩本看看就好。
第十本《高性能網站建設指南》(及其續篇《高性能網站進階》)
告訴你真正的商業公司的前端是怎麼優化一個網站的。當然優化的問題不是看看書就能解決的,最好時刻了解你的同行們的經驗。
第一階段:HTML和CSS的學習
HTML就不多說了,基礎中的基礎,這個都不會的小夥伴請參見HTML手冊,認真學習W3C課程,稍有基礎之後可以跟著視頻學習《HTML+CSS基礎課程》。
前端開發必看的14本書
1、《CSS權威指南》第三版
這本書實在太適合小白用戶了,是一本為初學者清掃障礙的書籍。同行一致認為這本書是學習CSS基礎的首選。CSS界權威Meyer大師的作品,翻譯水平也灰常贊!
2、《CSS那些事兒》
不用於一般技術類書籍的枯燥乏味,這本書很有意思。作者是藍色理想經典論壇標准版榮譽版主林小志,具有多年網站設計和網站重構經驗,在CSS、XHTML等前台技術方面有著深厚功底。
全書以傳達CSS布局思維為中心,通過頁面中的文字、圖片、表格、表單等常見元素的處理及各種頁面布局方式的使用,使讀者能深入了解到如何在頁面中更好地運用CSS布局。閱讀本書之後將會發現,原來CSS樣式居然是這么好玩的東西。
3、《精通CSS:高級Web標准解決方案》第二版
前段學習必備書籍,作者Andy Budd是國際頂尖的網頁設計師,著名的Web標准倡導者,網頁咨詢公司Clearleft的創始人之一。
本書將最有用的CSS技術匯總在一起,總結了CSS設計中的最佳實踐,討論了解決各種實際問題的技術,重點講解了一系列的css開發技巧,是前端開發人員必備的手冊。
4、《CSS禪意花園》
這是一本令人驚嘆的書!必須用一個字形容的話,那就是:美!內容編排合理,文字生動有趣引人入勝,通過一個個實例引導讀者閱讀,強烈推薦!
作者是世界著名的網站設計師,書中的範例來自網站設計領域最著名的網站——CSS Zen Garden(CSS禪意花園)。童鞋們自己去領略吧。
第二階段——JavaScript的學習
Javascript的書籍當然還是要看老外的,你懂得~
5、《JavaScriptDOM編程藝術》
此書絕對是入門好書,簡潔優美的文筆簡直是工具書中的典範啊有木有!
這本書講述了JavaScript和DOM的基礎知識,但重點放在DOM編程技術背後的思路和原則,然後將這些概念貫穿在書中的所有代碼示例中,使你看到用來創建圖片庫頁面的腳本、用來創建動畫效果的腳本和用來豐富頁面元素呈現效果的腳本,最後結合所講述的內容創建了一個實際的網站。
6、《JavaScript權威指南》第6版
這本書非常適合初級、中級程序員,是學習核心JavaScript語言和由Web瀏覽器定義的JavaScript API的指南和綜合參考手冊。
第6版涵蓋HTML 5和ECMAScript 5。很多章節完全重寫,緊跟當今最佳Web開發實踐。本書新增章節描述了jQuery和伺服器端JavaScript。
7、《JavaScript高級程序設計》第三版
《javascript權威指南》比較像一本字典,而這本《javascript高級程序設計》可以算是一本由淺入深的好讀物。這兩本書看完後,對javascript一定會有較為深入的了解。
作者Nicholas C. Zakas是世界頂級Web技術專家,現為雅虎公司界面呈現架構師,負責My Yahoo!和雅虎首頁等大訪問量站點的設計。這本書,看一遍不能算看過,至少讀兩三遍,每一遍都會讓你有新的收獲。
8、《高性能JavaScript》
本書從性能角度全面分析js,含金量非常大,很多知識都是作者通過實踐總結出來的,都是經驗的積累,強烈推薦!
同是Nicholas C. Zakas所寫,如果看《JS高級程序設計》覺得理解不太透徹,學習較為吃力,那麼我強烈建議你看看這本書,真的是極好的一本實踐類書籍,言簡意賅,灰常實用!
9、《JavaScript王者歸來》
這本《JavaScript王者歸來》不僅是一本傳播知識的書,更是一本求道的書。O(∩_∩)O 有追求的程序員一定不要錯過!願神力與你同在!
它揭開了JavaScript的面紗,繞過誤解和虛幻的表象,引領你探索程序王國的奧妙。這是一本探尋程序設計思想本源的“魔法典籍”,也是一本Web開發工程師們需要的案頭參考書。
10、《JavaScript模式》
它絕對不是一本入門級別的書,適用於希望將自身的Javascript技巧提高到一個新層次的專業的開發人員和程序員。
《JavaScript模式》包含了實現每個討論的模式的實踐建議,並附有數個可以立即上手的範例;同時還可以學到一些反模式。短小精悍,進階必讀!
11、《JavaScript設計模式》
進階教程,得有一定功底才能看懂。反之,如果你輕而易舉就能拿下此書,說明你已非等閑之輩~
本書共有兩部分。第一部分給出了實現具體設計模式所需要的面向對象特性的基礎知識,第二部分則專注於各種具體的設計模式及其在JavaScript語言中的應用,主要介紹了工廠模式、橋接模式、組合模式、門面模式等幾種常見的模式。
第三階段——jQUery的學習
12、《鋒利的jQuery》第二版
入門首選,簡單易懂,非常實在。《鋒利的jQuery(第2版)》循序漸進地對jQuery的各種函數和方法調用進行了介紹,對jQuery分析的邏輯非常值得學習。
第四階段—學無止境!
如果以上書籍你全都搞定了,那麼,恭喜你,你真的很厲害!到這種程度,相信你也不太需要別人推薦書籍了,不過我還是厚著臉皮推薦兩本吧。
13、《高性能網站建設指南》
前端開發可以優化網站剩餘70%~80%性能,這本書不算厚,幾個小時就能看完,推薦前端開發工程師看看。在《高性能網站建設指南》中,作者給出了14條具體的優化原則,每一條原則都配以範例佐證,並提供了在線支持。
14、《Web開發敏捷之道》第二版
Web開發敏捷之道》曾榮獲Jolt大獎“最佳技術圖書”獎。在第1版的內容架構基礎上,第2版增加了對Rails 1.2中新特性和最佳實踐的介紹。此書覆蓋了rails1.2的方方面面,其本身也很"敏捷",翻譯也非常好。
2. 前端性能優化(一)
最近跟同事一直忙於關於前端項目的性能分析以及性能優化,前端性能直接影響了用戶洞穗的體驗,針對於前端性能問題,一滾顫磨直是一個大家熱議的話題,也並沒有一個比較完整通用的解決方案,以下是我個人的一些認識與實踐。
1.DNS 解析
2.TCP 連接
3.HTTP 請求拋出
4.服務端處理請求,HTTP 響應返回
5.瀏覽器拿到響應數據,解析響應內容,把解析的結果展示給用戶
⼀般當我們的腳本與 DOM 元素和其它腳本之間的依賴關系不強時,我們會選⽤ async;當腳本依賴於 DOM
元素和大斗其它腳本的執⾏結果時,我們會選⽤ defer。
缺點: ⾮常吃硬體資源
編碼能力
3. 前端框架有哪些
1、Bootstrap是最流行的前端開發框架,可以讓不是前端工程師也能開發出優美的頁面,更加快捷、方便的開發web頁面和移動端應用。也能開發響應式web頁面,上手也非常快。
中文官網:http://www.bootcss.com/
4. 前端書籍推薦
《JavaScript權或跡威指南(第6版)》
淘寶前端團隊翻譯的,看譯者列表都是一堆大神。這本書又叫犀牛書,號稱Javascript開發者的聖經,網上對此書評價很多,大概意思都是說這本書是一本JavaScript文檔手冊,沒有完整看過一遍此書的都不能算是一名合格的前端工程師。
豆瓣評分:8.8
推薦指數:
2?1?5?6?6《JavaScript高級程序設計(第3版)》
又稱紅寶書,雅虎首席前端架構師,YUI的作者Zakas出品。雖然書名帶了「高級」二字,但是講得衫困並也很基礎,而且行文風格很流暢,每一小節就像是一篇博客,讀起來並不枯燥,個人感覺比上面那本犀牛書可讀性更強。
豆瓣評分:9.3
推薦指數:
3?1?5?6?6《JavaScriptDOM編程藝術(第2版)》
嫌前兩本太厚尺缺的可以看這本,深入淺出的佳作。
豆瓣評分:8.7
推薦指數:
4?1?5?6?6《JavaScript設計模式與開發實踐》
之前看過《javascript模式》一書,那是一本頗受好評的書籍。而本書則是在設計模式上對模式一書的進一步擴充。本書的一大特點就是結合實際,代碼較完整,能直接應用到實際開發中。
豆瓣評分:9.1
推薦指數:
5?1?5?6?6《Web性能權威指南》
本書是谷歌公司高性能團隊核心成員的權威之作,堪稱實戰經驗與規范解讀完美結合的產物。本書目標是涵蓋Web開發者技術體系中應該掌握的所有網路及性能優化知識。
豆瓣評分:8.8
推薦指數:
HTML、CSS不推薦看書,因為新增點比較頻繁,看基礎的在線教程就好。比如:菜鳥教程離線版下載鏈接PDF、EPUB、MOBI、chm格式
5. 求資深詳細解說下Web前端開發內情、行情。。。及未來這個行業的發展~~~~~工資待遇方面怎麼樣
任何行業都有前景,只是看個人的能力在什麼水平,才能夠得到什麼樣的待遇。
6. 從URL到頁面,如何優化性能
從輸入URL之後,瀏覽器先做DNS解談棗析,即將URL解析為唯一的ip地址,全互聯網伺服器都各自有一個唯一的ip地址,但一個ip地址可能是對應對台伺服器,因此在獲取資源是通過唯一的ip地址定位的。
DNS解析也是有一個過程的。以www.taobao.com為例,大致解析過程為:
①本機向local dns請求www.taobao.com
②local dns向根域請求www.taobao.com,根域返回com.域的伺服器IP
③向com.域請求www.taobao.com,com.域返回taobao.com域的伺服器IP
④向taobao.com請求www.taobao.com。
這里會涉及到一個重定向問題,比如輸入的URL為https://taobao.com會被重定向到https://www.taobao.com。
為什麼要這么做,第一是為了可以把兩種方式的訪問量累計到一起在一些搜索方面積累優勢,
第二則是如果兩個地址去訪問的話對緩存問題存在一些不友好。
定位到ip地址後,向該伺服器發起http請求,下載網頁資源。
瀏覽器工作是邊解析邊渲染,其實下載html資源時間消耗很小,主要時間用於構建DOM樹。
獲取到HTML文件資源後:
眾所周知,瀏覽器引起載入解析是自上而下的。
一、瀏覽器開始顯示HTML,在沒有接受全部HTML的時候已經開始顯示;
二、瀏覽器發送獲取嵌入HTML中的對象請求,比如CSS文件,JS文件,圖片等等的資源。
這些請求其實也都和HTML獲取經歷一個類似的過程,也有DNS解析等等。
但和動態資源不同的是,這些靜態資含羨拆源可以做緩存,不需要每次都從伺服器去獲取。
三、最後展現完整的頁面。
這三個步驟中,大家應該知道一下兩點:
1.CSS文件會阻塞所有DOM渲染,但不阻塞DOM解析;
2.JS文件不僅阻塞其後面的DOM渲染也阻塞DOM解析。因為JS和UI是共用一個線程的。
因此要在HTML載入之前把CSS載入解析完畢,在最後才引入JS,則不會影響在它之前的流程,也能夠顯示頁面(優雅降級,即使JS出錯)。
另外也存在js中會有改變某個DOM元素的樣派敬式,但若CSS還未解析,如style.width等屬性還未生成則會報錯。
這也就是為什麼外部JS文件放在body之後引入,CSS文件放在head內引入。
那麼基於這些過程,能夠如何優化性能呢?
首先,我們應該了解瀏覽器渲染過程中,有reflow和repain兩個概念。
reflow是改變盒子大小,成本極高,應該會改變整個DOM布局;repain則是改變顏色等一些隻影響本身的屬性,成本較低。
一、因此在初始化過程中盡量避免用JS去reflow導致性能受較大的影響。
二、CSS選擇器匹配機制是自右向左的!!!什麼意思呢,很多人往往寫樣式的時候會習慣#id .xx .xx .xx p a等等,
查找步驟其實是先全頁中匹配到a標簽,然後再向上遍歷到根節點#id為止。
這樣的寫法是比較消耗性能的,那麼很明顯,最右邊的選擇器是標簽選擇器必然會消耗很大的性能要避免;同時,如果是唯一的id選擇器那麼速度則會很快。
三、本文上面也有講到,對於一些靜態資源可以做緩存來提高頁面載入速度和性能,關於http請求緩存相關內容,可出門左拐哈=>http請求緩存
四、減少http請求,壓縮代碼等等,雅虎前端優化規則等等之類的可以逐一進行學習。
7. 如何進行web前端性能優化
提起Web前端性能優化的問題,前端開發人員非常熟悉,對於一個網站而言,即使內容和功能再優秀,如果用戶需要花費很久的時間才能打開,這樣遲早會消耗用戶的耐心,並最終失去用戶。
那如何才能優化前端性能?歸納為三步
一、關鍵資源位元組數
位元組數也就是通常說的減少資源文件(js、css、image、video...)的大小。
1、壓縮衫螞
前端使用uglify混淆壓縮
後端開啟gzip
對圖片進行壓縮,使用壓縮比例更高的格式(WebP)
2、緩存
強緩存(http狀態碼:200),不用請求服務運納器直接使用本地緩存,協商緩存(http狀態碼:304),使用時先請求伺服器若被告知緩存沒過期則使用本地緩存,不用下載資源,使用localstorage對數據進行存儲。
3、針對首屏優化
對非關鍵資源延遲載入、非同步載入,減少首屏資源大小
二、關鍵資源連接數
1、合並請求
使用http2.0的多路復用合並請求配置combo,在無法使用http2.0的情況下作為一種合並資源請求的手段。
2、減少圖片請求數
使用spite圖,使用svg-symbol。
3、針對一些場景採用css、js內聯的方式。
4、使用強緩存減少了一次伺服器請求。
5、非關鍵資源延遲、非同步載入,減少了首屏資源連接數。
三、關鍵渲染路徑
1、bigpipe分塊輸出
這里主要是因為要完成一整個頁面的輸出後端需要處理很多個任務,我們可以將這些多個任務進行分塊,誰先完成誰就先輸出,最終通過JS回填的方式輸出DOM節點,這種方式主要解決了直出頁面阻塞的問題。
2、bigrender分塊渲染
常規的手段就是採用前端模板渲染頁面,針對首屏時間主要減少了首次構建DOM樹時的節點數
3、針對reflow,repaint,composit路徑處理。
4、涉及到動畫時關於layer的概旁塌沒念renderlayer、graphicslayer。
5、css放在頭部、js放底部避免阻塞DOM樹的構建,關於css、js的位置對於頁面渲染的影響大家可以關注下相關的文章。核心:css資源不會阻塞DOM樹的構建但會阻塞DOM的渲染,JS會阻塞DOM樹的構建,CSS會阻塞JS的執行。
8. BAT 前端工程師面試對演算法一般有怎樣的要求
當我是實習生時,我遇到了BAT三,所以我對演算法沒有要求。當然,實習生的要求也可能比較低。
阿裡面試:
一邊使用電腦直接連接到互聯網看到面試官網站,博客之類的,然後選擇一些問,並幫助考背後的標簽組件的實現和JS類繼承,等等。在第二個方面,我也看到了,GitHub,博客等等。
實際上,在工作的前端使用的演算法並不多,即使像jQuery這樣的公共庫的實現對演算法的應用也不是很好。至於何時使用,請使用NodeJs偶爾編寫自動化工具,前端WebGL矩陣操作,圖像處理,如需要,但我認為這些都超出了一般前端工程師的能力。
9. 前端書籍推薦
初級讀物
《JS高級程序設計》:一本非常完整的經典入門書籍,被譽為JS聖經之一,詳解的非常詳細,最新版第三版已經發布了,建議購買。
《JS王者歸來》網路的一個Web開發項目經理寫的,作為初學者准備的入門級教程也不錯。
中級讀物
《JS權威指南》:另外一本JS聖經,講解的也非常詳細,屬於中級讀物,建議觀看。
《JS.The.Good.Parts》:Yahoo大牛,JS精神領袖Douglas Crockford的大作,雖然才100多頁,但是字字珠璣啊!強烈建議閱讀。
《高性能JS》:《JS高級程序設計》作者Nicholas C. Zakas的又一大作。
《Eloquent JS》:這本書才200多頁,非常短小,通過幾個非常經典的例子(艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子游戲等等)來介紹JS方方面面的知識和應用方法。
高級讀物
《JSPatterns 》:書中介紹到了各種經典的模式,如構造函數、單例、工廠等等,值得學習。
《Pro.JS.Design.Patterns》:Apress出版社講解JS設計模式的書,非常不錯。
《DevelopingJSWeb Applications》:構建富應用的好書,針對MVC模式有較為深入的講解,同時也對一些流程的庫進行了講解。
《Developing Large Web Applications》:不僅有JS方面的介紹,還有CSS、HTML方面的介紹,但是介紹的內容卻都非常不錯,真正考慮到了一個大型的Web程序下,如何進行JS架構設計,值得一讀。
結語
要做優秀的前端工程師,還需要繼續努力:《高性能網站建設指南》、《Yahoo工程師的網站性能優化的建議》、「YSLOW」性能優化建議、《網站重構》、《Web開發敏捷之道》、「 jQuery 庫」、「前端框架」、「HTML5」、「CSS3」。。。 這些都要深入研究!
萬事開頭難!如果你能到這個境界,剩下的路自己就可以走下去了。
10. web前端看哪些書籍好,前端開發書籍大全_web前端開發自學書籍推薦這5本
1、HTML/HTML5基礎:
《HTML5秘籍》
2、CSS
推薦書籍:
1、《圖靈程序設計叢書:HTML5與CSS3設計模式》
2、《Web開發技術叢書:深入理解Bootstrap》
3、《高流量網站CSS開發技術》
4、《CSS設計徹底研究》這個一定要
5、《Web開發技術叢書:深入理解Bootstrap》
6、可以找一些鬧搜專門講SASS的書,但是我沒找到
7、《CSS權威指南(第3版)》
3、深入學習JS
推薦書籍:
1、《單頁Web應用:JavaScript從源彎冊前端到後端》
2、《Web2.0界面設計模式》
3、《響應式Web設計:HTML5和CSS3實戰》
5、工具
學會使用grunt進行JS、CSS、HTML壓縮,特別是模塊化js開發時候的壓縮
會用PS進行切圖、保存icon
入手sublime、webstorm
學會使用chrome調試面板,特別是:console、network、profile、element
進階:
4、性能
推薦書籍:
1、《Web性能權威指南》
2、雅虎網雹宏站頁面性能優化的34條黃金守則
5、HTTP及TCP協議族
推薦書籍:
1、《HTTP權威指南》
2、《TCP/IP詳解》
3、《圖解TCP/IP(第5版)》