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

高效前端 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選擇器特別好用，幾乎適用于所有需要用鼠標懸浮時顯示的場景。