高效前端 Web高效編程與優化實踐 作者:李銀城
高效前端 Web高效編程與優化實踐 出版社:機械工業出版社
高效前端 Web高效編程與優化實踐 內容簡介
香蕉小视频app這不是一本單純講解前端編程技巧的書,而是一本注重思想提升和內功修煉的書。
全書以問題為導向,精選了前端開發中的34個疑難問題,從分析問題的原因入手,逐步給出解決方案,并分析各種方案的優劣,最后針對每個問題總結出高效編程的*佳實踐和各種性能優化的方法。
香蕉小视频app全書共7章,內容從邏輯上大致可以分為兩大類:
第一類,偏向實踐,圍繞HTML、CSS、JavaScript等傳統前端技術,以及PWA等新興前端技術,講解如何進行HTML優化、CSS優化、JavaScript優化、頁面優化等,以此幫助前端工程師們提升高效編程和應用優化的能力。
第二類,注重基礎,講解了前端工程師必須掌握的數據處理、網絡協議、文件操作、測試等基礎性的開發技,目的是幫助前端工程師們修煉內功,打下扎實的基礎。
香蕉小视频app希望通過本書,不僅能幫助前端工程師們夯實基礎,而且還能寫出簡潔、優美的代碼,為應用帶來良好的用戶體驗。
高效前端 Web高效編程與優化實踐 目錄
前言
第1章 HTML/CSS優化
Effective前端1:能用HTML/CSS解決的問題就不要用JS
Effective前端2:優化HTML標簽
Effective前端3:用CSS畫一個三角形
Effective前端4:盡可能地使用偽元素
第2章 JS優化
Effective前端5:減少前端代碼耦合
Effective前端6:JS書寫優化
第3章 頁面優化
Effective前端7:避免頁面卡頓
Effective前端8:加快頁面打開速度
香蕉小视频appEffective前端9:增強用戶體驗
Effective前端10:用好Chrome Devtools
第4章 HTML5優化實踐
Effective前端11:使用H5的history改善AJAX列表請求體驗
香蕉小视频appEffective前端12:使用圖標替代雪碧圖
Effective前端13:理解和使用CSS3動畫
Effective前端14:實現前端裁剪壓縮圖片
Effective前端15:實現跨瀏覽器的HTML5表單驗證
Effective前端16:使用Service Worker做一個PWA離線網頁應用
第5章 前端與計算機基礎
香蕉小视频appEffective前端17:理解WebSocket和TCP/IP
香蕉小视频appEffective前端18:理解HTTPS連接的前幾毫秒發生了什么
Effective前端19:弄懂為什么0.1+0.2不等于0.3
Effective前端20:明白WebAssembly與程序編譯
Effective前端21:理解JS與多線程
Effective前端22:學會JS與面向對象
香蕉小视频appEffective前端23:了解SQL
Effective前端24:學習常用的前端算法與數據結構
第6章 掌握前端基礎
香蕉小视频appEffective前端25:掌握同源策略和跨域
Effective前端26:掌握前端本地文件操作與上傳
香蕉小视频appEffective前端27:學會常用的CSS居中方式
Effective前端28:學會常用的CSS布局技術
香蕉小视频appEffective前端29:理解字號與行高
Effective前端30:使用響應式開發
Effective前端31:明白移動端click及自定義事件
Effective前端32:學習JS高級技巧
香蕉小视频app第7章 運用恰當的工具
Effective前端33:前端的單元測試與自動化測試
香蕉小视频appEffective前端34:使用AE+bodymovin制作網頁動畫
高效前端 Web高效編程與優化實踐 精彩文摘
香蕉小视频app切圖是作為前端的一項基本技能,切圖切得好,能夠簡化后續寫JS的邏輯,有些交互甚至不用寫JS就能完成。一方面HTML/CSS越來越強大了,另一方面HTML/CSS是瀏覽器提供的特性,只要寫幾個標簽、寫幾行樣式,一個好看的排版就出來了。善于使用瀏覽器提供的便利進行開發,能夠簡化代碼,提高編程效率。
香蕉小视频app一般人都認為切圖就是靜態的,是死的,其實不然,一個好的切圖除了好看之外,應該還要具備良好的交互性,是活的。而這不需要借助JS也能實現,而且比寫JS更加方便。
香蕉小视频app不過也有人認為切圖是比較低端的活兒——傳說中程序員的鄙視鏈,寫C的鄙視寫C++的,寫C++的鄙視寫Java的,寫Java的鄙視那些認為HTML/CSS是一門編程語言的人,如圖1-1漫畫所示。
香蕉小视频app圖1-1 程序員的鄙視鏈(圖片來自網絡)
香蕉小视频app所以切圖真得是很低端的工作嗎?其實不然。
有人向大師提問,如何成為一名優秀的小提琴家,大師回答,先成為一名優秀的人,再成為一名優秀的音樂家,最后再成為一名優秀的小提琴家。而怎么成為一名優秀的前端?我認為要先成為一名優秀的人,然后再成為一名切圖優秀的前端,最后再成為一名優秀的前端。這個類比雖然有點牽強,但是切圖確實是一門技術活。
香蕉小视频app切圖有三境界:第一境界——長得好看,長得好看方能讓人有興趣去了解你的思想;第二境界——靈活,可根據數據長短擴展,維護方便;第三境界——友好的交互和用戶體驗,例如能否自動監聽回車提交。
為什么說能使用HTML/CSS解決的問題就不要使用JS呢?兩個字,因為簡單。簡單就意味著更快的開發速度,更小的維護成本,同時往往具有更好的體驗,下面介紹幾個實例。
導航高亮是一種很常見的需求,包括當前頁面的導航在菜單里面高亮和hover時高亮。你可以用JS控制,但其實用一點CSS技巧就可以達到這個目的,而不需要使用JS。如圖1-2和1-3所示。
圖1-2 HOME菜單高亮
圖1-3 EVALUATION菜單高亮
在正常態時,每個導航的默認樣式為代碼清單1-1所示:
代碼清單1-1 未選中態菜單是暗的
nav li{
opacity: 0.5;
}
而在選中態即當前頁面時,導航不透明度為1。為了實現這個目的,首先通過body給不同的頁面添加不同的類,用于標識不同的頁面,如代碼清單1-2所示:
香蕉小视频app代碼清單1-2 不同頁面body的class不一樣
香蕉小视频app所有的li也用class標識,為了有一個一一對應的關系,如代碼清單1-3所示:
代碼清單1-3 導航li的class
香蕉小视频app然后就可以設置當前頁面的樣式,覆蓋掉默認的樣式,如代碼清單1-4所示:
香蕉小视频app代碼清單1-4 通過body和li的類建立起一一對應的關系
body.home nav li.home,
body.buy nav li.buy{
opacity: 1;
}
香蕉小视频app這樣,如果當前頁面是home,則body.home nav li.home這條規則將生效,home的導航高亮。
香蕉小视频app這個技巧在《精通CSS》這本書里面有提及。如果你用JS控制,那么在腳本加載好之前,當前頁面是不會高亮的,而當腳本加載好之后會突然高亮。所以這種情況下用JS吃力不討好。
同時,hover時的高亮可以用CSS的:hover選擇器實現,如代碼清單1-5所示:
代碼清單1-5 hover高亮
香蕉小视频appnav li:hover{
opaciy: 1;
}
加上:hover選擇器后的優先級將會高于原本的優先級,鼠標hover的時候將會覆蓋默認樣式,即高亮生效。
香蕉小视频app你也可以用JS的mouse事件實現此功能,但JS會在mouseover的時候添加一個類,mouseleave的時候移除掉這個類,這樣就變復雜了,而用CSS甚至可以兼容不支持JS的瀏覽器,所以,推薦使用CSS。一個純展示的靜態頁面,為啥要寫JS呢,是吧。
香蕉小视频app注意這個hover選擇器特別好用,幾乎適用于所有需要用鼠標懸浮時顯示的場景。
- 我的微信
- 掃一掃加好友
-
- 微信公眾號
- 掃一掃關注
-
2020年10月16日 下午8:59 1F
香蕉小视频app這本書據說非常不錯,下載看看哦。
2021年1月4日 下午4:16 2F
這個資源還是不錯的,我想要這個資源