高效前端:Web高效編程與優(yōu)化實(shí)踐
定 價(jià):89 元
叢書名:Web開發(fā)技術(shù)叢書
- 作者:李銀城
- 出版時(shí)間:2018/3/1
- ISBN:9787111590217
- 出 版 社:機(jī)械工業(yè)出版社
- 中圖法分類:TP393.09
- 頁(yè)碼:
- 紙張:膠版紙
- 版次:1
- 開本:16開
這不是一本單純講解前端編程技巧的書,而是一本注重思想提升和內(nèi)功修煉的書。
全書以問題為導(dǎo)向,精選了前端開發(fā)中的34個(gè)疑難問題,從分析問題的原因入手,逐步給出解決方案,并分析各種方案的優(yōu)劣,*后針對(duì)每個(gè)問題總結(jié)出高效編程的*實(shí)踐和各種性能優(yōu)化的方法。
全書共7章,內(nèi)容從邏輯上大致可以分為兩大類:
*類,偏向?qū)嵺`,圍繞HTML、CSS、JavaScript等傳統(tǒng)前端技術(shù),以及PWA等新興前端技術(shù),講解如何進(jìn)行HTML優(yōu)化、CSS優(yōu)化、JavaScript優(yōu)化、頁(yè)面優(yōu)化等,以此幫助前端工程師們提升高效編程和應(yīng)用優(yōu)化的能力。
第二類,注重基礎(chǔ),講解了前端工程師必須掌握的數(shù)據(jù)處理、網(wǎng)絡(luò)協(xié)議、文件操作、測(cè)試等基礎(chǔ)性的開發(fā)技,目的是幫助前端工程師們修煉內(nèi)功,打下扎實(shí)的基礎(chǔ)。
希望通過本書,不僅能幫助前端工程師們夯實(shí)基礎(chǔ),而且還能寫出簡(jiǎn)潔、優(yōu)美的代碼,為應(yīng)用帶來(lái)良好的用戶體驗(yàn)。
(1)知乎著名前端專欄作者/前端類話題優(yōu)秀答主/人人網(wǎng)資深前端工程師經(jīng)驗(yàn)總結(jié)
(2)《ES6 標(biāo)準(zhǔn)入門》作者/著名技術(shù)博客作者阮一峰、W3cplus.com
站長(zhǎng)大漠大力推薦
(3)從技能修煉和思想提升2個(gè)維度總結(jié)出34個(gè)高效編程和應(yīng)用優(yōu)化的完美實(shí)踐
Preface?前 言為何寫作本書?本書通過介紹前端的優(yōu)化實(shí)踐以達(dá)到高效編程之功效,這里并不是教你怎么用CSS的某個(gè)屬性,如display:grid,或者怎么用JS的ES6,而是重點(diǎn)教你一些前端的思想,如怎么提高用戶體驗(yàn),怎么寫出簡(jiǎn)潔優(yōu)美的代碼等。注重思想而不注重形式,注重功底而不注重框架是本書的特色。本書有一大部分篇幅在介紹怎么提升編程的功底,怎么修煉內(nèi)功,從而達(dá)到高效編程的目的。
全書以問題為導(dǎo)向,例如有些頁(yè)面為什么打開會(huì)比較卡頓,從怎么解決這種問題,有哪些方法,這些方法的優(yōu)缺點(diǎn)是什么,一步步由淺入深地分析和解決問題。學(xué)會(huì)解決問題,比學(xué)會(huì)知識(shí)更為重要。
本書主要內(nèi)容本書分為七章,第1~4章和第7章的實(shí)踐性比較強(qiáng),第5章和第6章注重基礎(chǔ)。
第1章介紹如何使用瀏覽器提供的便利進(jìn)行開發(fā),能使用HTML/CSS解決的問題就不要使用JS,因?yàn)橛肏TML/CSS解決一般會(huì)更加簡(jiǎn)單,用戶體驗(yàn)也會(huì)更好。
第2章介紹怎么樣寫出簡(jiǎn)潔高效的JS代碼,怎么組織代碼邏輯,讓代碼更加優(yōu)美,具有更好的擴(kuò)展性。
第3章介紹頁(yè)面整體的優(yōu)化,包括怎么加快頁(yè)面的打開速度,怎么避免頁(yè)面的卡頓,怎么從一些細(xì)節(jié)之處提升用戶的體驗(yàn),怎么更好地使用調(diào)試工具。
第4章結(jié)合實(shí)際經(jīng)驗(yàn),介紹HTML5的一些實(shí)用技術(shù),如使用history改善AJAX體驗(yàn)、圖標(biāo)字體和SVG、裁剪壓縮圖片、如何做一個(gè)PWA應(yīng)用等。
第5章回歸技術(shù)基礎(chǔ),以WebSocket、wasm、Web Workers等HTML5的新技術(shù)為出發(fā)點(diǎn)回歸到計(jì)算機(jī)基礎(chǔ),如網(wǎng)絡(luò)協(xié)議、程序編譯、多線程等。特別介紹了它們和前端的聯(lián)系,只有掌握這些基礎(chǔ),才能更好地解決問題,做一個(gè)優(yōu)秀的前端開發(fā)人員。
第6章討論了諸如跨域、上傳文件、CSS布局等前端技術(shù)支柱,特別是有些很常用但卻是前端知識(shí)盲點(diǎn)的部分。
第7章介紹前端的單元測(cè)試與自動(dòng)化測(cè)試,以及怎么使用可視化工具制作網(wǎng)頁(yè)動(dòng)畫,還介紹了其他一些前端開發(fā)常用的工具,作為本書的一個(gè)補(bǔ)充內(nèi)容。
在寫作的過程中,我都是結(jié)合實(shí)際的經(jīng)驗(yàn)進(jìn)行闡述,并不像很多大學(xué)課本那樣只講理論。所以相對(duì)來(lái)說,本書看起來(lái)應(yīng)該會(huì)比較生動(dòng),并且很多章節(jié)都是圖文并茂的。
本書讀者對(duì)象本書適用于以下讀者對(duì)象:
具有一定的前端基礎(chǔ),想要找一本高階的、能提升水平的書;剛畢業(yè),沒有什么實(shí)踐經(jīng)驗(yàn),需要一本有實(shí)踐指導(dǎo)作用的書;已經(jīng)工作了,想要學(xué)習(xí)一下其他人的前端開發(fā)經(jīng)驗(yàn);不是做前端開發(fā),但是有編程基礎(chǔ),想要深入理解前端是怎么運(yùn)作的,或者是想加深理解HTTP之類的計(jì)算機(jī)基礎(chǔ)知識(shí)。
如何閱讀本書如果你一點(diǎn)編程經(jīng)驗(yàn)都沒有,可能不太適合閱讀本書,你要是不知道什么是變量,什么是HTML,應(yīng)該先讀一些編程入門書籍。
讀者可以從頭看到結(jié)尾,我相信每一篇看完都會(huì)有收獲的;蛘哂嗅槍(duì)性地看,例如,你覺得自己在計(jì)算機(jī)基礎(chǔ)里的網(wǎng)絡(luò)協(xié)議、數(shù)據(jù)結(jié)構(gòu)算法等方面比較薄弱,可以直接看第5章;如果你對(duì)HTML5比較感興趣可以直接看第4章。在閱讀的過程中,建議讀者都實(shí)際操作一遍,而不僅僅是當(dāng)作睡前讀物,因?yàn)橹挥凶约簞?dòng)手實(shí)踐才能識(shí)別書中的真?zhèn)尾⑶壹由罾斫。所以本書不提供相關(guān)源碼等資源,讀者可自行根據(jù)書中描述動(dòng)手練習(xí)。
致謝在本書的寫作和出版過程中得到了很多人的幫助,感謝我的家人對(duì)我寫作的支持和鼓勵(lì),感謝人人網(wǎng)同事在寫作過程中提出的建議和對(duì)錯(cuò)誤的修正,感謝機(jī)械工業(yè)出版社華章分社對(duì)本書出版付出的努力,特別是楊福川編輯對(duì)本書的策劃以及李雷鳴老師的認(rèn)真審閱、還要感謝阮一峰、大漠老師在百忙之中審閱本書、認(rèn)可本書,并為本書寫推薦語(yǔ)。
由于水平有限,書里難免會(huì)有一些不足和錯(cuò)誤的地方,雖經(jīng)過幾番修改,可能還會(huì)有些許問題,歡迎讀者朋友對(duì)本書的內(nèi)容積極討論,提出意見。我的郵箱是liyincheng@m.scnu.edu.cn。
李銀城 2017年12月17日
李銀城(網(wǎng)名:會(huì)編程的銀豬)
資深前端工程師,現(xiàn)就職于人人網(wǎng)。
知乎著名的專欄作者,前端類話題知名答主,在知乎前端圈有一定的影響力。樂于分享。喜歡寫博客,他的知乎專欄Effective前端,累計(jì)已經(jīng)超過20萬(wàn)字,文章被大量轉(zhuǎn)發(fā)和轉(zhuǎn)載。
目 錄?Contents
前 言
第1章 HTML/CSS優(yōu)化 1
Effective前端1:能用HTML/CSS
解決的問題就不要用JS 2
Effective前端2:優(yōu)化HTML標(biāo)簽 16
Effective前端3:用CSS畫一個(gè)三角形 22
Effective前端4:盡可能地使用偽元素 28
第2章 JS優(yōu)化 34
Effective前端5:減少前端代碼耦合 34
Effective前端6:JS書寫優(yōu)化 47
第3章 頁(yè)面優(yōu)化 59
Effective前端7:避免頁(yè)面卡頓 59
Effective前端8:加快頁(yè)面打開速度 67
Effective前端9:增強(qiáng)用戶體驗(yàn) 85
Effective前端10:用好Chrome Devtools 91
第4章 HTML5優(yōu)化實(shí)踐 109
Effective前端11:使用H5的history改善AJAX列表請(qǐng)求體驗(yàn) 109
Effective前端12:使用圖標(biāo)替代雪碧圖 118
Effective前端13:理解和使用CSS3動(dòng)畫 128
Effective前端14:實(shí)現(xiàn)前端裁剪壓縮圖片 136
Effective前端15:實(shí)現(xiàn)跨瀏覽器的HTML5表單驗(yàn)證 145
Effective前端16:使用Service Worker做一個(gè)PWA離線網(wǎng)頁(yè)應(yīng)用 151
第5章 前端與計(jì)算機(jī)基礎(chǔ) 164
Effective前端17:理解WebSocket和TCP/IP 164
Effective前端18:理解HTTPS連接的前幾毫秒發(fā)生了什么 185
Effective前端19:弄懂為什么0.1 0.2不等于0.3 203
Effective前端20:明白WebAssembly與程序編譯 209
Effective前端21:理解JS與多線程 221
Effective前端22:學(xué)會(huì)JS與面向?qū)ο? 231
Effective前端23:了解SQL 248
Effective前端24:學(xué)習(xí)常用的前端算法與數(shù)據(jù)結(jié)構(gòu) 266
第6章 掌握前端基礎(chǔ) 291
Effective前端25:掌握同源策略和跨域 291
Effective前端26:掌握前端本地文件操作與上傳 299
Effective前端27:學(xué)會(huì)常用的CSS居中方式 310
Effective前端28:學(xué)會(huì)常用的CSS布局技術(shù) 320
Effective前端29:理解字號(hào)與行高 327
Effective前端30:使用響應(yīng)式開發(fā) 336
Effective前端31:明白移動(dòng)端click及自定義事件 344
Effective前端32:學(xué)習(xí)JS高級(jí)技巧 355
第7章 運(yùn)用恰當(dāng)?shù)墓ぞ? 372
Effective前端33:前端的單元測(cè)試與自動(dòng)化測(cè)試 372
Effective前端34:使用AE bodymovin制作網(wǎng)頁(yè)動(dòng)畫 390