《高性能響應式Web開發實戰》一1.5 本書任務

本節書摘來異步社群《高性能響應式web開發實戰》一書中的第1章，第1.5節，作者： 李光毅 責編： 楊海玲，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

圖1-5與圖1-6給出的是本書中要完成的頁面設計稿。

這是一位産品經理為本書而設計的。2015年年初sitepoint [6] 網站釋出了一篇有關2015年網頁設計趨勢的文章《the big web design trends for 2015》 [7] 。文章中歸納了在2015年網頁設計中将會出現的趨勢性特征，如大氣（make it big）、簡約（minimize）、扁平設計（flat design），在這次設計稿中都得以展現。

圖1-5所示為頁面桌面端樣式，圖1-6所示為頁面移動端樣式。如何實作這兩類樣式，并且讓這兩種版樣式的頁面共存于同一套代碼上，無縫、優雅地在不同裝置間切換是本書要實作的需求。在正式開始之前，針對這個貫穿始終的需求，讀者可能已經有了一些疑惑。

頁面應該參照什麼參數（螢幕尺寸、分辨率、裝置使用者代理）進行響應？

針對上面的參數應該采用什麼樣的政策（移動優先、桌面優先、臨界點是多少）進行響應？

用什麼樣的技術能夠實作響應？對于不支援該技術的浏覽器如何處理？

為什麼同一張圖檔在不同裝置上看到的大小不同？

為什麼有的圖檔素材在小屏的高清裝置上會模糊？

有沒有可能為不同的裝置提供不同的圖檔素材？

如果上面問題的答案是肯定的話，那麼我們用什麼參數（螢幕尺寸？分辨率？）區分不同的裝置？

對于不支援上面問題解決方案的浏覽器應該如何處理？

假設我們已用前端代碼實作了上述功能，而代價卻是過長的頁面加載時間和頓卡，這是得不償失的。但是功能的疊加與頁面的性能負擔卻又是正比關系。這就需要我們對功能做取舍，對代碼進行性能調優，這一類優化工作對移動端産品來說尤其重要。那麼，對于如何進行調優讀者可能又會有以下疑問。

應該用什麼樣的參數衡量性能？

應該用什麼樣的工具測量性能？

如何找到性能的瓶頸在哪？如何修正這些瓶頸？

如果短時間内無法提升性能，可不可以通過非技術手段提高使用者體驗？

如果某些功能隻是在某些場景中和裝置而言是負擔的話，可不可以選擇性地加載功能？

所有這些問題，在本書中都會得到解答。