內容簡介
一線前端Team奇舞團領銜翻譯
眾多大規模、高複雜度實際網站案例
蘊含軟體工程與前端開發之道的樸實之作
通過解決實際問題影響和改變前端行業規則
作者簡介
Jay Bryant:橫跨兩個不同的領域:寫作和編程。在過去的20 年中,他一直致力於幫助GE(通用電氣)、Motorola(摩托羅拉)、Dell(戴爾)和其他一些公司的程式設計師能夠更好地用寫作來表達他們的工作。同時,他又幫助像New York Times Group(紐約時報)、MorningStar(晨星),以及其他的企業和國家機構編寫程式。
如果對他的職業很好奇,去LinkedIn 搜尋他。
Michael Garrett Jones:擁有超過15 年的Web 開發經驗。他曾經在Microsoft(微軟)、Dell(戴爾)、Johnson & Johnson(強生)、Citi(花旗銀行)等公司作為技術領導。他還創造了一種獨特的模式來實現高性能、直觀的前端API。他堅持自己的設計,並且用它完美地實現了僅次於亞馬遜的電子商務網站。
在他的自由職業中,他創建過不少於60 個站點。他的工作從設計公司logo 到整個公司網站的建立。
因為自己的平面設計背景,Michael 不願意為了適應早期笨重的網頁布局,而調整自己的設計。他做了很多工作和花了很多個人時間來學習如何讓Web 工程能夠完美地呈現他的設計思想
帶著Web 開發世界的兩個方面的視角——編碼和設計上路,Michael 總是能提供一些高效的模式,讓用戶和開發者都能有一個很好的體驗
媒體推薦
想讓大規模高複雜度網站更快更易擴展?遠不止H5/CSS3 這本徹頭徹尾的實戰書將教會你一切。
《高性能HTML5》為讀者講解了如何用HTML5 從一開始就設計一個高性能的網站,以及如何對已有網站進行改良,使得它們具備優越的性能。《高性能HTML5》中總結了許多實踐經驗、關鍵技巧,並提供了豐富的示例,作者有意無意地將軟體工程以及前端開發技術之道隱藏於樸實的描述中。
通過學習《高性能HTML5》,讀者能夠掌握如何創建自己的高性能網站。《高性能HTML5》適合於想創建自己網站的初學者,同樣也適用於資深網站開發者用於最佳化已有網站。
圖書目錄
第1部分引言
第1章概述2
網站範例2
這本書將帶給讀者什麼3
什麼是高性能4
頁面載入時間4
瀏覽器性能4
網路性能4
開發效率4
回響式設計5
柵格系統5
更深入地理解CSS5
第2部分性能基礎
第2章開發原則8
編寫符合當代瀏覽器性能的代碼8
減少HTML中元素的數量9
減少重繪9
用CSS來布局,處理邊界11
漸進式增強14
使用特徵檢測來顯示漸進式增強15
各司其職16
HTML17
CSS17
JavaScript18
小結20
第3章性能準則21
為什麼頁面載入時間是如此重要21
準則22
減少HTTP請求22
使用CDN加速(內容分發系統)27
避免空的src和href屬性值28
增加過期頭29
啟用GZIP壓縮29
把CSS放在頭部30
把JavaScript放到尾部31
避免使用CSS表達式31
移除不使用的CSS語句32
對JavaScript和CSS進行代碼壓縮32
減少重繪34
規定圖片的寬和高34
不要用表格布局34
定義字元集35
不要重組DOM35
延伸閱讀35
小結35
第4章回響式網頁設計37
回響式設計37
CSS3媒體查詢38
自適應圖片45
彈性柵格47
小結49
第5章理解頁面重用機制51
一些關於頁面重用的理念62
就像搭積木一樣62
都在容器里62
小結63
第3部分創建一個網站
第6章頁面模板68
配置模板選項69
HTML元素周圍的條件注釋70
設定字元集73
使用IE的兼容模式73
提示用戶安裝GoogleChromeFrame75
為iPhone使用Viewport75
載入jQuery75
添加Google統計代碼76
更多可選項76
設定柵格77
小結80
第7章導航82
選單結構83
給選單添加樣式88
BoxSizing(盒子尺寸)91
標準CSS3糖果92
漸變92
:before和:after96
使用base64編碼97
下拉效果104
搜尋框107
小結109
第8章頁頭110
構建一個更好的國家選擇器110
視覺111
CSS裁剪113
圖示連結114
小結116
第9章頁腳117
設計頁腳118
設定頁腳的樣式123
SVG128
不僅是簡單的形狀133
小結134
第10章分形設計模式135
定義一個控制項136
代碼一致137
升級簡單137
更加可讀137
目的明確137
開始分形:案例分析138
更快地開發頁面139
更快地修復Bug139
增強一致性140
CSS和JavaScript的分離141
CSS和JavaScript的合併143
小結145
第11章link控制項146
控制項功能146
給連結添加樣式150
當CSS失效時使用JavaScript157
小結158
第12章sidebox(側邊欄)控制項160
內容160
樣式161
函式165
小結169
第13章button控制項170
按鈕類型171
Primary按鈕171
帶圖示的Primary按鈕171
玻璃材質的Primary按鈕171
帶陰影效果的Primary按鈕171
鑲邊的Primary按鈕172
GO按鈕172
為GO按鈕鑲邊172
編寫button控制項172
CSS175
小結185
第14章price控制項186
price控制項介紹186
HTML代碼186
CSS代碼187
控制項代碼191
shipping控制項192
HTML代碼193
CSS代碼193
控制項代碼195
使用控制項196
小結196
第15章product控制項197
插入控制項199
控制項產生的HTML199
CSS202
product控制項的數據205
控制項206
小結208
第16章table控制項210
HTML結構212
數據對象215
table控制項215
樣式216
通用效果樣式217
寬屏效果樣式218
窄屏效果樣式223
增加媒體查詢225
小結228
第17章tab控制項229
HTML231
數據233
控制項234
創建tab控制項235
JavaScript236
tab控制項的樣式239
所有效果的通用樣式239
水平效果的樣式243
垂直效果的樣式248
小結253
第18章form控制項254
HTML結構256
fieldset控制項258
input控制項260
數據對象265
創建一個表單269
CSS269
建立一個捷徑281
小結282
序言
我曾寫過數以千計的技術文字。在這些作品裡,我想還沒有哪個比這本書更重要。我和Mike 曾描述過一個Web 開發的範例,這個範例有變革這個專業的潛力。正如我們在這本書中反覆說的,如果Web 開發者能接受我們描述的方法論,他們就能用更少的時間做更多的事情;如果甚至有相當顯著比例的Web 開發者“解咒”這個方法論,我們和他們將可以加速創造整個世界廣域網的創造性內容。很多內容還不在網上,很多套用因為驅動它們的數據不在網上,甚至還沒有設計出來。如果Web 開發者能夠加速從網上獲取數據的進程,我們就可以加速這個創造過程,改變世界各地的人們的套用。
我和Mike 不要求我們現在呈現給大家的方法論是全新的。事實上,我們給出了Mike首次發現這些方法的出處。並且,我們懷疑這些方法已經被獨立地發現了很多次了。然而,直到現在仍沒有人用清晰的例子記載它。我們想要改變這個現狀,而且,我想我們幹得不錯。再次重申,我們希望看到這些範例被廣泛接受,相較於賣書(事實上,寫一本書還遠遠不夠),我們更希望我們的工作能夠使我們的Web 開發同行受益,從而不斷地將我們的工作做得更好,以便每個訪問者或者說每一個人都能獲得更佳的體驗。
自認為具備這種影響力的想法是否過於自大?我們願意一試,但你是裁判。
Jay Bryant