高性能回響式Web開發實戰

高性能回響式Web開發實戰

《高性能回響式Web開發實戰》是2016年人民郵電出版社出版的圖書,作者是李光毅。

基本介紹

  • 書名:高性能回響式Web開發實戰
  • 作者:李光毅
  • ISBN:978-7-115-42216-3
  • 頁數:207頁
  • 定價:39元
  • 出版社:人民郵電出版社 
  • 出版時間:2016-06
  • 開本:小16
  • 字數:257千字
  • 編輯:楊海玲
內容簡介,目錄,

內容簡介

回響式Web設計的理念是讓頁面根據用戶行為以及設備環境(螢幕尺寸、解析度等)進行相應的回響和調整。回響式網頁設計就是一個網站能夠兼容多種終端,而不是為每種終端做一個特定的版本。
本書分為兩部分,首部分是前端的基本回響式技術,涉及回響式布局、圖片的處理、解決問題的思路以及一些進階的技巧等;第二部分在以上內容的基礎上,加入了對頁面進行性能調優的內容,包括如何確立性能指標,如何使用不同的工具衡量性能,以及如何解決常規的性能問題等。

目錄

第1章 概述及任務介紹 1
1.1 為什麼需要回響式設計 1
1.1.1 產品形態需要 1
1.1.2 性能與商業考慮 3
1.2 本書的線索 3
1.3 寫作思路 4
1.4 定義回響式 5
1.5 本書任務 6
第2章 回響式中要面對的問題 9
2.1 像素密度 9
2.2 CSS像素 14
2.3 視口 17
2.3.1 桌面瀏覽器的視口 17
2.3.2 移動設備瀏覽器的視口 18
2.3.3 設備寬度 20
小結 21
第3章 布局 23
3.1 寫在編碼前的話 23
3.1.1 寫出好的代碼 24
3.1.2 代碼的瀏覽器適配問題 25
3.1.3 仰望星空與腳踏實地 26
3.2 全局樣式 27
3.3 無懈可擊的導航欄 30
3.3.1 桌面端 30
3.3.2 移動端導航欄 37
小結 40
第4章 布局——回響式篇 41
4.1 媒體查詢 41
4.1.1 為什麼需要媒體查詢 41
4.1.2 什麼是媒體查詢 44
4.1.3 媒體查詢中的邏輯 45
4.1.4 媒體查詢的策略 46
4.1.5 導航欄與媒體查詢 51
4.1.6 polyfill 56
4.2 伸縮布局 58
4.2.1 為什麼需要伸縮布局 58
4.2.2 快速入門 58
4.2.3 基本套用 60
4.2.4 回歸導航欄flexbox.css 62
4.3 相對單位 63
4.3.1 相對單位em 65
4.3.2 相對單位rem 67
4.3.3 如何使用這幾種單位 68
4.4 標題布局 70
4.4.1 背景 71
4.4.2 文字居中 73
4.5 回響式文字 79
4.5.1 標題 79
4.5.2 正文內容 83
小結 89
第5章 回響式圖片 91
5.1 萬能的100% 91
5.2 回響式圖用例 93
5.3 srcset語法 96
5.3.1 移動優先或桌面優先 97
5.3.2 計畫趕不上變化 98
5.3.3 家長式管理 99
5.4 picture元素 99
5.4.1 sizes 99
5.4.2 picture元素和source元素 102
5.4.3 polyfill 105
5.4.4 picture元素的未來 105
5.5 放棄圖片 105
5.5.1 事實上我們並不需要圖片 105
5.5.2 數據 URI 105
5.5.3 CSS形狀 107
5.5.4 圖示字型 110
5.6 後端方案 118
5.6.1 前端配置 118
5.6.2 後端配置 119
5.6.3 注意 119
5.7 最佳化標題的背景圖片 120
5.7.1 image-set 120
5.7.2 漸進式圖片 120
5.7.3 媒體查詢 122
5.7.4 無需圖片 123
小結 124
第6章 腳本與性能:入門篇 125
6.1 為何要選擇腳本 125
6.2 為何要談性能 126
6.3 如何衡量性能 126
6.3.1 頁面載入時間 127
6.3.2 速度指數—載入時間並非萬能 129
6.3.3 幀數 133
6.3.4 工具與測試 136
6.4 傳統腳本的性能最佳化指南 147
6.4.1 懶載入初級版本 147
6.4.2 最佳化點1:滾動事件的回調函式 153
6.4.3 最佳化點2:重繪與回流 157
6.4.4 最佳化點3:選擇器 161
小結 163
第7章 腳本與性能:提高篇 165
7.1 避免腳本 165
7.1.1 樣式實現 166
7.1.2 腳本實現 168
7.1.3 回到導航欄 170
7.2 封裝與載入器 175
7.3 性能最佳化思路 181
7.4 後端能做什麼 185
7.4.1 RESS 185
7.4.2 其他 187
小結 187
第8章 工程問題 189
8.1 安裝Node.js 189
8.2 Bower 192
8.2.1 什麼是Bower 192
8.2.2 安裝Bower 193
8.2.3 使用Bower 194
8.2.4 進階使用 195
8.3 Grunt 198
8.3.1 什麼是Grunt 198
8.3.2 安裝Grunt 198
8.3.3 使用Grunt 199
8.4 Yeoman 203
8.4.1 什麼是Yeoman 203
8.4.2 安裝Yeoman 204
8.4.3 生成項目 205
小結 206
後記 207

相關詞條

熱門詞條

聯絡我們