高效前端 Web高效編程與優化實踐pdf

圖書網
圖書網
圖書網
10855
文章
1641
評論
2020年8月23日19:03:51 評論 71

高效前端 Web高效編程與優化實踐 作者:李銀城

高效前端 Web高效編程與優化實踐 出版社:機械工業出版社

高效前端 Web高效編程與優化實踐 內容簡介

香蕉小视频app這不是一本單純講解前端編程技巧的書,而是一本注重思想提升和內功修煉的書。

全書以問題為導向,精選了前端開發中的34個疑難問題,從分析問題的原因入手,逐步給出解決方案,并分析各種方案的優劣,最后針對每個問題總結出高效編程的*佳實踐和各種性能優化的方法。

全書共7章,內容從邏輯上大致可以分為兩大類:

第一類,偏向實踐,圍繞HTML、CSS、JavaScript等傳統前端技術,以及PWA等新興前端技術,講解如何進行HTML優化、CSS優化、JavaScript優化、頁面優化等,以此幫助前端工程師們提升高效編程和應用優化的能力。

香蕉小视频app第二類,注重基礎,講解了前端工程師必須掌握的數據處理、網絡協議、文件操作、測試等基礎性的開發技,目的是幫助前端工程師們修煉內功,打下扎實的基礎。

香蕉小视频app希望通過本書,不僅能幫助前端工程師們夯實基礎,而且還能寫出簡潔、優美的代碼,為應用帶來良好的用戶體驗。

高效前端 Web高效編程與優化實踐 目錄

前言

第1章 HTML/CSS優化

Effective前端1:能用HTML/CSS解決的問題就不要用JS

香蕉小视频appEffective前端2:優化HTML標簽

香蕉小视频appEffective前端3:用CSS畫一個三角形

香蕉小视频appEffective前端4:盡可能地使用偽元素

第2章 JS優化

香蕉小视频appEffective前端5:減少前端代碼耦合

香蕉小视频appEffective前端6:JS書寫優化

第3章 頁面優化

Effective前端7:避免頁面卡頓

香蕉小视频appEffective前端8:加快頁面打開速度

Effective前端9:增強用戶體驗

香蕉小视频appEffective前端10:用好Chrome Devtools

第4章 HTML5優化實踐

Effective前端11:使用H5的history改善AJAX列表請求體驗

香蕉小视频appEffective前端12:使用圖標替代雪碧圖

Effective前端13:理解和使用CSS3動畫

香蕉小视频appEffective前端14:實現前端裁剪壓縮圖片

Effective前端15:實現跨瀏覽器的HTML5表單驗證

香蕉小视频appEffective前端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與多線程

香蕉小视频appEffective前端22:學會JS與面向對象

香蕉小视频appEffective前端23:了解SQL

Effective前端24:學習常用的前端算法與數據結構

第6章 掌握前端基礎

香蕉小视频appEffective前端25:掌握同源策略和跨域

Effective前端26:掌握前端本地文件操作與上傳

Effective前端27:學會常用的CSS居中方式

Effective前端28:學會常用的CSS布局技術

香蕉小视频appEffective前端29:理解字號與行高

Effective前端30:使用響應式開發

Effective前端31:明白移動端click及自定義事件

香蕉小视频appEffective前端32:學習JS高級技巧

香蕉小视频app第7章 運用恰當的工具

香蕉小视频appEffective前端33:前端的單元測試與自動化測試

香蕉小视频appEffective前端34:使用AE+bodymovin制作網頁動畫

高效前端 Web高效編程與優化實踐 精彩文摘

香蕉小视频app切圖是作為前端的一項基本技能,切圖切得好,能夠簡化后續寫JS的邏輯,有些交互甚至不用寫JS就能完成。一方面HTML/CSS越來越強大了,另一方面HTML/CSS是瀏覽器提供的特性,只要寫幾個標簽、寫幾行樣式,一個好看的排版就出來了。善于使用瀏覽器提供的便利進行開發,能夠簡化代碼,提高編程效率。

一般人都認為切圖就是靜態的,是死的,其實不然,一個好的切圖除了好看之外,應該還要具備良好的交互性,是活的。而這不需要借助JS也能實現,而且比寫JS更加方便。

不過也有人認為切圖是比較低端的活兒——傳說中程序員的鄙視鏈,寫C的鄙視寫C++的,寫C++的鄙視寫Java的,寫Java的鄙視那些認為HTML/CSS是一門編程語言的人,如圖1-1漫畫所示。

圖1-1 程序員的鄙視鏈(圖片來自網絡)

所以切圖真得是很低端的工作嗎?其實不然。

有人向大師提問,如何成為一名優秀的小提琴家,大師回答,先成為一名優秀的人,再成為一名優秀的音樂家,最后再成為一名優秀的小提琴家。而怎么成為一名優秀的前端?我認為要先成為一名優秀的人,然后再成為一名切圖優秀的前端,最后再成為一名優秀的前端。這個類比雖然有點牽強,但是切圖確實是一門技術活。

切圖有三境界:第一境界——長得好看,長得好看方能讓人有興趣去了解你的思想;第二境界——靈活,可根據數據長短擴展,維護方便;第三境界——友好的交互和用戶體驗,例如能否自動監聽回車提交。

為什么說能使用HTML/CSS解決的問題就不要使用JS呢?兩個字,因為簡單。簡單就意味著更快的開發速度,更小的維護成本,同時往往具有更好的體驗,下面介紹幾個實例。

導航高亮是一種很常見的需求,包括當前頁面的導航在菜單里面高亮和hover時高亮。你可以用JS控制,但其實用一點CSS技巧就可以達到這個目的,而不需要使用JS。如圖1-2和1-3所示。

香蕉小视频app圖1-2 HOME菜單高亮

香蕉小视频app圖1-3 EVALUATION菜單高亮

在正常態時,每個導航的默認樣式為代碼清單1-1所示:

代碼清單1-1 未選中態菜單是暗的

nav li{

opacity: 0.5;

}

而在選中態即當前頁面時,導航不透明度為1。為了實現這個目的,首先通過body給不同的頁面添加不同的類,用于標識不同的頁面,如代碼清單1-2所示:

代碼清單1-2 不同頁面body的class不一樣

香蕉小视频app所有的li也用class標識,為了有一個一一對應的關系,如代碼清單1-3所示:

香蕉小视频app代碼清單1-3 導航li的class

香蕉小视频app然后就可以設置當前頁面的樣式,覆蓋掉默認的樣式,如代碼清單1-4所示:

代碼清單1-4 通過body和li的類建立起一一對應的關系

香蕉小视频appbody.home nav li.home,

body.buy nav li.buy{

opacity: 1;

}

香蕉小视频app這樣,如果當前頁面是home,則body.home nav li.home這條規則將生效,home的導航高亮。

香蕉小视频app這個技巧在《精通CSS》這本書里面有提及。如果你用JS控制,那么在腳本加載好之前,當前頁面是不會高亮的,而當腳本加載好之后會突然高亮。所以這種情況下用JS吃力不討好。

香蕉小视频app同時,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選擇器特別好用,幾乎適用于所有需要用鼠標懸浮時顯示的場景。

圖書網:高效前端 Web高效編程與優化實踐pdf

繼續閱讀
  • 我的微信
  • 掃一掃加好友
  • weinxin
  • 微信公眾號
  • 掃一掃關注
  • weinxin

有任何需求請前往→→→社區

iOS 11 開發指南pdf 程序設計

iOS 11 開發指南pdf

iOS 11 開發指南 作者:管蕾 iOS 11 開發指南 出版社:人民郵電出版社 iOS 11 開發指南 內容簡介 本書循序漸進地講解了iOS 11應用開發的知識。書中從搭建開發環境講起,依次講解了...
Java微服務pdf 程序設計

Java微服務pdf

適讀人群 :本書適合想要了解微服務架構,以及想要深入了解如何有效地實施企業級微服務的Java開發人員。 在本書中可以學到: ■ 使用領域驅動設計方法來設計和實現微服務 ■ 使用Sp...
C++并發編程實戰pdf 程序設計

C++并發編程實戰pdf

C++并發編程實戰 作者:Anthony Williams C++并發編程實戰 出版社:人民郵電出版社 C++并發編程實戰 內容簡介 《C++并發編程實戰》是一本基于C++11新標準的并發和多線程編程...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: