成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

HollisChuang / 3485人閱讀

摘要：一背景介紹漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)這兩個(gè)概念是在出現(xiàn)之后火起來(lái)的。二概念理解漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果交互追加功能達(dá)到更好的體驗(yàn)。

一、背景介紹

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)這兩個(gè)概念是在 CSS3 出現(xiàn)之后火起來(lái)的。由于低級(jí)瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級(jí)瀏覽器中使用CSS3，而在低級(jí)瀏覽器只保證最基本的功能。二者的目的都是關(guān)注不同瀏覽器下的不同體驗(yàn)，但是它們側(cè)重點(diǎn)不同，所以導(dǎo)致了工作流程上的不同。

二、概念理解 2.1 漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng)（Progressive Enhancement）：一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗(yàn)。

2.2 優(yōu)雅降級(jí)

優(yōu)雅降級(jí)（Graceful Degradation）：一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。比如一開(kāi)始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽。

三、觀(guān)點(diǎn)不同 3.1 漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng)的觀(guān)點(diǎn)：應(yīng)關(guān)注于內(nèi)容本身。內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得漸進(jìn)增強(qiáng)成為一種更為合理的設(shè)計(jì)范例。

3.2 優(yōu)雅降級(jí)

優(yōu)雅降級(jí)的觀(guān)點(diǎn)：應(yīng)針對(duì)最高級(jí)、最完善的瀏覽器來(lái)開(kāi)發(fā)網(wǎng)站。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開(kāi)發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本。在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。

四、示例案例

如下的兩段代碼的書(shū)寫(xiě)順序，表明了漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)開(kāi)發(fā)的重點(diǎn)不同。

前綴 CSS3（-webkit- / -moz- / -o-*）和正常 CSS3 在瀏覽器中的支持情況：

很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；

不久之前：瀏覽器只支持前綴CSS3，不支持正常CSS3；

現(xiàn)在：瀏覽器既支持前綴CSS3，又支持正常CSS3；

未來(lái)：瀏覽器不支持前綴CSS3，僅支持正常CSS3。

4.1 具體說(shuō)明

漸進(jìn)增強(qiáng)的寫(xiě)法，優(yōu)先考慮老版本瀏覽器的可用性，最后才考慮新版本的可用性。而在現(xiàn)在前綴CSS3和正常CSS3都可用的情況下，正常CSS3會(huì)覆蓋前綴CSS3。

優(yōu)雅降級(jí)的寫(xiě)法，優(yōu)先考慮新版本瀏覽器的可用性，最后才考慮老版本的可用性。而在現(xiàn)在前綴CSS3和正常CSS3都可用的情況下，前綴CSS3會(huì)覆蓋正常的CSS3。

五、如何選擇 5.1 分析使用你客戶(hù)端程序的版本比例

（1）若低版本用戶(hù)居多，則優(yōu)先采用漸進(jìn)增強(qiáng)的開(kāi)發(fā)流程；

（2）若高版本用戶(hù)居多，則為了提高大多數(shù)用戶(hù)的使用體驗(yàn)，那當(dāng)然優(yōu)先采用優(yōu)雅降級(jí)的開(kāi)發(fā)流程。

5.2 多數(shù)大公司采用漸進(jìn)增強(qiáng)的方式

業(yè)務(wù)優(yōu)先，提升用戶(hù)體驗(yàn)永遠(yuǎn)不會(huì)排在最前面。

例如：新浪微博這種擁有億級(jí)用戶(hù)的網(wǎng)站，絕對(duì)不可能為了追求某個(gè)特效而不考慮低版本用戶(hù)，一定是確保低版本、高版本都可用的情況下，再去漸進(jìn)增強(qiáng)，采用新功能給高版本用戶(hù)提供更好的用戶(hù)體驗(yàn)。

六、總結(jié)

其實(shí)優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)都是網(wǎng)站開(kāi)發(fā)的加分項(xiàng)，最重要的還是保證盡可能多的用戶(hù)可以正常訪(fǎng)問(wèn)網(wǎng)站，在此之后再考慮降級(jí)的極端情形和現(xiàn)代瀏覽器的體驗(yàn)增強(qiáng)。

閱讀更多

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115825.html

相關(guān)文章

  • 前端計(jì)劃——面試題總結(jié)-HTML篇

    摘要：發(fā)生在很久以前的及更老的瀏覽器向過(guò)渡時(shí)期。數(shù)據(jù)始終在同源的請(qǐng)求中攜帶即使不需要，會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。存儲(chǔ)大小數(shù)據(jù)大小不能超過(guò)。與上面問(wèn)題相連，比也是明智的選擇。表現(xiàn)與結(jié)構(gòu)相分離。兩種設(shè)計(jì)思想是有不同的考慮。 前言： 吾生也有涯,而知也無(wú)涯，以有涯隨無(wú)涯，殆己————莊子 閱讀本文前請(qǐng)做好以下心理準(zhǔn)備：本系列文章將不定期更新。本系列文章不是很?chē)?yán)謹(jǐn)。 前端面試之HTML篇 Pa...

    2json 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

    摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀(guān)點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開(kāi)發(fā)人員，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶(hù)體驗(yàn)，前端搬磚的我們不得不與...

    hiyang 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

    摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀(guān)點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開(kāi)發(fā)人員，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶(hù)體驗(yàn)，前端搬磚的我們不得不與...

    王軍 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

    摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀(guān)點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開(kāi)發(fā)人員，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶(hù)體驗(yàn)，前端搬磚的我們不得不與...

    SimonMa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<