使用Ress改善響應式網絡設計-IT業界-PHP中文網

>同一頁面和資產（主要是）交付給所有設備。可以在媒體查詢，元素和srcset屬性中使用CSS背景圖像限製圖像加載，但支持仍然斑駁，並且無法解決所有問題。客戶端適應技術也可以減慢頁面渲染，這需要解決。例如，即使用戶處於緩慢的連接，也可以將大圖像傳遞到高密度的視網膜屏幕。
平均網頁超過2MB。許多人使用響應式網絡設計，但並不能在低功率設備上進行
。現在，基於性能，創建一個快速，響應迅速的網站已經變得更加急切。
> ress：響應式Web設計服務器端組件 Ress是由Luke Wroblewski在2011年提出的。該概念使用響應式Web設計，但用功能檢測將其補充以在需要時提供修改的內容。例如，您可以：

或

當帶寬受到限制時。

避免在iOS和越來越多的Android設備上提供Flash遊戲或廣告。 > 切換到電子書閱讀器上的灰度圖像。 >

降低了較慢連接的AJAX民意調查請求的頻率。 > 當設備不支持動畫時，請刪除不必要的css3效果。 >當不可用SVG時，

fall to png圖像。

在用戶在特定位置或國家 /地區時提供其他信息。

Ress從未成為廣泛使用的技術，因為功能檢測很困難，尤其是在服務器上。每當發布新的瀏覽器或功能時，必須對您的檢測代碼進行驗證，更新和維護。幸運的是，有第三方服務，例如NetBiscuits 為您努力工作，並不斷使用最新的設備信息進行更新。第一步：註冊NetBiscuits帳戶 - 有30天的免費試用版來評估該服務。將NetBiscuits跟踪代碼粘貼到您的網站模板中，等待幾秒鐘，然後查看有吸引力的設備和訪問者流量分析圖表：使用Ress改善響應式網絡設計

>客戶端設備檢測API

跟踪代碼還定義了一個名為DCS的全局JavaScript對象，該對象暴露了650多個硬件，瀏覽器，操作系統和網絡檢測參數。示例：評估帶寬分數 - 從零（非常慢）到20（通常為邊緣/HSPA）到60（3G）至120（4G/WiFi）的等級：

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

登入後複製

確定設備是否具有觸摸屏：

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

登入後複製

具有高密度像素比：

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

登入後複製

設備有電話設施嗎？

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

登入後複製

SVG受支持嗎？有SMIL動畫嗎？

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

登入後複製

找出用戶的位置：

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

登入後複製

建議兼容的HTML5視頻格式：

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

登入後複製

檢測正在使用哪個瀏覽器：

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

登入後複製

是否是最新版本：

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

登入後複製

>服務器端設備檢測API

設備檢測在服務器上最有用，您可以在發送響應之前對其進行修改。為PHP，Java和.NET提供了代碼。 PHP例子... 該設備是否支持H264 HTML5視頻並具有合理的連接？

<span><span><?php
</span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

登入後複製

該設備是否支持Ajax並具有比iPhone 5（得分為100的參考設備）更好的JavaScript性能？

<span><span><?php
</span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

登入後複製

我們可能永遠不會有一個易於開發並在所有設備上完美工作的解決方案，但是Ress提供了一個良好的折衷方案，可以解決響應式Web設計遇到的許多性能問題。您只需要一項好的設備檢測服務。

>通過RESS

改善響應式Web設計的常見問題

> RESS和傳統響應式網絡設計之間的主要區別是什麼？

>傳統響應式Web Design（RWD）僅依賴於客戶端（瀏覽器）來根據設備的屏幕尺寸調整網站的佈局。另一方面，Ress（帶服務器端組件的響應式Web設計）將客戶端的響應能力與服務器端智能相結合。這意味著服務器檢測到設備的功能並發送了優化的網站版本，從而帶來了更高效，更量身定制的用戶體驗。

> Ress如何改善網站性能？

> ress通過減少發送到設備的不必要數據數量來改善網站性能。使用傳統的RWD，發送了所有數據，包括設備上不可見的元素數據。但是，使用RESS，服務器僅發送與特定設備相關的數據，減少負載時間並提高整體性能。

RESS與所有類型的設備兼容嗎？設計為與所有類型的設備兼容。 RESS的服務器端組件可以檢測請求該網頁的設備的功能，並相應地提供該網站的優化版本。這樣可以確保從台式機到智能手機的所有設備都有無縫的用戶體驗。

> RESS如何影響SEO？

> ress可以對SEO產生積極的影響。更快的加載時間和改進的用戶體驗會導致較低的跳出率和更高的用戶參與度，這是搜索引擎對網站排名時考慮的因素。此外，Ress允許通過搜索引擎機器人對內容進行更有效的爬網和索引。

>與傳統RWD相比，實施Ress的挑戰是什麼？。它涉及服務器端編程和設備檢測，這可能很複雜。此外，維護RESS網站可能會更具資源密集型，因為它需要對設備檢測數據庫進行定期更新，以容納新的設備和瀏覽器。

可以與現有網站一起使用RESS，還是僅適用於新的網站？可以在現有網站和新網站上實現

。但是，將RESS集成到現有網站可能需要對網站的體系結構和代碼進行重大更改，這可能是耗時且複雜的。

> RESS如何處理圖像和其他媒體文件？ Ress可以根據設備的功能優化圖像和其他媒體文件的交付。服務器可以調整圖像大小，將其轉換為更有效的格式，甚至完全省略了功能有限的設備。這樣可以確保媒體文件不會不必要地減慢網站的加載時間。網站和可用資源。由於需要服務器端編程和設備檢測，最初的實施可能更昂貴，但從長遠來看，改進的性能和用戶體驗可能會導致更高的用戶參與度，並且可能會帶來更高的收入。