UI設(shè)計(jì)：網(wǎng)頁(yè)vs移動(dòng)，設(shè)計(jì)思路真的不一樣，不要照搬經(jīng)驗(yàn)
些設(shè)計(jì)師搞起移動(dòng)UI非常溜，一旦到了網(wǎng)頁(yè)UI立馬抓瞎了，設(shè)計(jì)場(chǎng)景變了，原來用在移動(dòng)UI上的設(shè)計(jì)技巧不靈了，搞出的網(wǎng)頁(yè)UI不忍直視，那么大千UI工場(chǎng)在這里，給大家分析一下網(wǎng)頁(yè)UI與移動(dòng)UI的不同點(diǎn)，網(wǎng)頁(yè)UI設(shè)計(jì)的難點(diǎn)是什么，突破口在哪里，設(shè)計(jì)流程是什么，歡迎大家閱讀點(diǎn)贊。
一、網(wǎng)頁(yè)UI和移動(dòng)UI在設(shè)計(jì)上有什么不同點(diǎn) 網(wǎng)頁(yè)UI和移動(dòng)UI在設(shè)計(jì)上有一些不同點(diǎn)，主要包括以下幾個(gè)方面：
屏幕尺寸：移動(dòng)設(shè)備的屏幕尺寸通常比電腦屏幕小，設(shè)計(jì)師需要在有限的空間內(nèi)展示更多的信息和功能，因此移動(dòng)UI設(shè)計(jì)需要更加簡(jiǎn)潔和精煉。 交互方式：移動(dòng)設(shè)備通常采用觸摸屏幕進(jìn)行交互，而網(wǎng)頁(yè)UI則通常通過鼠標(biāo)和鍵盤進(jìn)行交互。因此，在設(shè)計(jì)移動(dòng)UI時(shí)需要考慮到用戶的手指操作，包括按鈕大小、間距等。 導(dǎo)航方式：網(wǎng)頁(yè)通常有更多的頁(yè)面和內(nèi)容，因此導(dǎo)航方式相對(duì)復(fù)雜，而移動(dòng)應(yīng)用通常采用更簡(jiǎn)潔的導(dǎo)航方式，例如底部導(dǎo)航欄或側(cè)邊菜單。 響應(yīng)式設(shè)計(jì)：網(wǎng)頁(yè)需要適配不同尺寸的屏幕，因此需要采用響應(yīng)式設(shè)計(jì)，而移動(dòng)UI設(shè)計(jì)則需要適配不同分辨率和設(shè)備類型，包括手機(jī)、平板等。 動(dòng)畫效果：移動(dòng)設(shè)備通常支持更多的動(dòng)畫效果，設(shè)計(jì)師可以利用這些效果增強(qiáng)用戶體驗(yàn)，而網(wǎng)頁(yè)UI設(shè)計(jì)則需要考慮到不同瀏覽器和設(shè)備的兼容性。
移動(dòng)UI設(shè)計(jì)相對(duì)于網(wǎng)頁(yè)UI設(shè)計(jì)更加注重簡(jiǎn)潔、直觀和易用性，需要考慮到用戶在移動(dòng)設(shè)備上的操作習(xí)慣和體驗(yàn)。而網(wǎng)頁(yè)UI設(shè)計(jì)則更注重內(nèi)容的呈現(xiàn)和導(dǎo)航方式的設(shè)計(jì)。
二、網(wǎng)頁(yè)UI設(shè)計(jì)的難點(diǎn)是什么 相對(duì)于移動(dòng)UI設(shè)計(jì)，網(wǎng)頁(yè)UI設(shè)計(jì)的難點(diǎn)可能包括以下幾個(gè)方面：
多平臺(tái)兼容性：網(wǎng)頁(yè)需要在不同的瀏覽器、操作系統(tǒng)和設(shè)備上進(jìn)行兼容，設(shè)計(jì)師需要考慮到不同平臺(tái)的顯示效果和交互方式，確保用戶在不同環(huán)境下都能正常訪問和使用網(wǎng)頁(yè)。 響應(yīng)式設(shè)計(jì)：網(wǎng)頁(yè)需要適配不同尺寸和分辨率的屏幕，設(shè)計(jì)師需要考慮到不同設(shè)備的顯示效果，保證在不同屏幕上都能良好展示內(nèi)容和功能。 導(dǎo)航和信息架構(gòu)：網(wǎng)頁(yè)通常包含更多的內(nèi)容和頁(yè)面，設(shè)計(jì)師需要設(shè)計(jì)清晰的導(dǎo)航結(jié)構(gòu)和信息架構(gòu)，確保用戶能夠快速找到需要的信息，同時(shí)保持頁(yè)面的整體性和一致性。 頁(yè)面加載速度：網(wǎng)頁(yè)需要通過網(wǎng)絡(luò)加載內(nèi)容，設(shè)計(jì)師需要考慮到頁(yè)面的加載速度，避免過多的圖片和動(dòng)畫效果導(dǎo)致頁(yè)面加載緩慢，影響用戶體驗(yàn)和SEO排名。 設(shè)計(jì)風(fēng)格和視覺吸引力：網(wǎng)頁(yè)需要吸引用戶的注意力并傳達(dá)信息，設(shè)計(jì)師需要選擇合適的顏色、字體和布局，確保頁(yè)面具有視覺吸引力和用戶友好性。
網(wǎng)頁(yè)UI設(shè)計(jì)相對(duì)于移動(dòng)UI設(shè)計(jì)可能更加復(fù)雜和挑戰(zhàn)，設(shè)計(jì)師需要考慮到更多的因素和要求，確保網(wǎng)頁(yè)在不同平臺(tái)和設(shè)備上都能提供良好的用戶體驗(yàn)。
三、做為移動(dòng)UI設(shè)計(jì)師，在網(wǎng)頁(yè)設(shè)計(jì)中如何突破 作為移動(dòng)UI設(shè)計(jì)師，在網(wǎng)頁(yè)設(shè)計(jì)中突破的方法可以包括以下幾點(diǎn)：
借鑒移動(dòng)UI設(shè)計(jì)原則：移動(dòng)UI設(shè)計(jì)通常更注重簡(jiǎn)潔、直觀和易用性，可以借鑒移動(dòng)UI設(shè)計(jì)的一些原則和技巧，如簡(jiǎn)潔明了的布局、大按鈕設(shè)計(jì)、直觀的導(dǎo)航等，應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中。 響應(yīng)式設(shè)計(jì)：移動(dòng)UI設(shè)計(jì)師對(duì)于不同設(shè)備和分辨率的適配有一定經(jīng)驗(yàn)，可以利用這些經(jīng)驗(yàn)來做好網(wǎng)頁(yè)的響應(yīng)式設(shè)計(jì)，確保網(wǎng)頁(yè)在不同屏幕尺寸上都能良好展示內(nèi)容和功能。 設(shè)計(jì)風(fēng)格和動(dòng)畫效果：移動(dòng)UI設(shè)計(jì)通常更注重動(dòng)畫效果和視覺吸引力，設(shè)計(jì)師可以將移動(dòng)UI設(shè)計(jì)中的一些動(dòng)畫效果和交互方式應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中，增強(qiáng)用戶體驗(yàn)和頁(yè)面吸引力。 簡(jiǎn)化交互方式：移動(dòng)設(shè)備的操作方式通常更加直觀和簡(jiǎn)單，設(shè)計(jì)師可以考慮簡(jiǎn)化網(wǎng)頁(yè)的交互方式，減少用戶的操作步驟，提高用戶體驗(yàn)和頁(yè)面的易用性。 用戶體驗(yàn)優(yōu)化：移動(dòng)UI設(shè)計(jì)師對(duì)于用戶體驗(yàn)有一定的敏感度，可以通過用戶研究和用戶測(cè)試等方法來優(yōu)化網(wǎng)頁(yè)的用戶體驗(yàn)，確保用戶能夠快速找到需要的信息并完成所需的操作。
通過以上方法，移動(dòng)UI設(shè)計(jì)師可以在網(wǎng)頁(yè)設(shè)計(jì)中突破傳統(tǒng)的設(shè)計(jì)思維，結(jié)合移動(dòng)UI設(shè)計(jì)的經(jīng)驗(yàn)和技巧，為網(wǎng)頁(yè)設(shè)計(jì)帶來新的靈感和創(chuàng)意，提升用戶體驗(yàn)和頁(yè)面的吸引力。
四、網(wǎng)頁(yè)UI設(shè)計(jì)的合理流程是什么 網(wǎng)頁(yè)UI設(shè)計(jì)的合理流程通常包括以下幾個(gè)階段：
確定需求：在設(shè)計(jì)之前，需要與客戶或團(tuán)隊(duì)明確網(wǎng)頁(yè)設(shè)計(jì)的需求和目標(biāo)，包括目標(biāo)用戶群體、網(wǎng)頁(yè)功能和內(nèi)容等。 用戶研究和競(jìng)品分析：通過用戶調(diào)研和競(jìng)品分析，了解目標(biāo)用戶的需求和偏好，同時(shí)研究競(jìng)爭(zhēng)對(duì)手的網(wǎng)頁(yè)設(shè)計(jì)，為設(shè)計(jì)提供參考和靈感。 制定設(shè)計(jì)方案：根據(jù)需求和研究結(jié)果，設(shè)計(jì)師制定網(wǎng)頁(yè)的整體設(shè)計(jì)方案，包括頁(yè)面結(jié)構(gòu)、布局、顏色、字體等方面的設(shè)計(jì)。 制作草圖和線框圖：設(shè)計(jì)師根據(jù)設(shè)計(jì)方案制作草圖和線框圖，展示網(wǎng)頁(yè)的整體布局和功能結(jié)構(gòu)，為后續(xù)設(shè)計(jì)提供參考。
設(shè)計(jì)視覺稿：基于草圖和線框圖，設(shè)計(jì)師開始制作網(wǎng)頁(yè)的視覺稿，包括頁(yè)面的顏色、字體、圖片等設(shè)計(jì)元素，呈現(xiàn)網(wǎng)頁(yè)的整體風(fēng)格和視覺效果。 完善設(shè)計(jì)稿：根據(jù)客戶或團(tuán)隊(duì)的反饋，設(shè)計(jì)師對(duì)視覺稿進(jìn)行修改和完善，確保設(shè)計(jì)符合需求和預(yù)期。 制作原型：設(shè)計(jì)師可以制作交互原型，展示網(wǎng)頁(yè)的交互效果和動(dòng)畫效果，幫助客戶或團(tuán)隊(duì)更好地理解設(shè)計(jì)方案。
進(jìn)行用戶測(cè)試：設(shè)計(jì)師可以邀請(qǐng)目標(biāo)用戶參與用戶測(cè)試，收集用戶反饋和意見，優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)，確保用戶體驗(yàn)和頁(yè)面功能的完善。 最終交付：經(jīng)過多次修改和優(yōu)化，設(shè)計(jì)師最終完成網(wǎng)頁(yè)設(shè)計(jì)，并將設(shè)計(jì)稿交付給開發(fā)團(tuán)隊(duì)進(jìn)行開發(fā)和實(shí)現(xiàn)。 以上是網(wǎng)頁(yè)UI設(shè)計(jì)的合理流程，設(shè)計(jì)師可以根據(jù)具體項(xiàng)目需求和情況進(jìn)行調(diào)整和優(yōu)化，確保設(shè)計(jì)過程順利進(jìn)行并達(dá)到預(yù)期效果。
大千UI工場(chǎng)→10年經(jīng)驗(yàn)的UI設(shè)計(jì)和前端開發(fā)老司機(jī)，1400+項(xiàng)目交付經(jīng)歷，專注互聯(lián)網(wǎng)產(chǎn)品前臺(tái)部分的研究、設(shè)計(jì)與開發(fā)。關(guān)注我，帶您了解最新的觀點(diǎn)、技術(shù)、干貨，如有需求可私信。
作者：charryhuang；轉(zhuǎn)自：騰訊技術(shù)工程
1991 年 8 月，第一個(gè)靜態(tài)頁(yè)面誕生了，這是由 Tim Berners-Lee 發(fā)布的，想要告訴人們什么是萬維網(wǎng)。從靜態(tài)頁(yè)面到 Ajax 技術(shù)，從 Server Side Render 到 React Server Components，歷史的車輪滾滾向前，一個(gè)又一個(gè)技術(shù)誕生和沉寂。 前言 1994 年，萬維網(wǎng)聯(lián)盟（W3C，World Wide Web Consortium）成立，超文本標(biāo)記語言（HTML，Hyper Text Markup Language）正式確立為網(wǎng)頁(yè)標(biāo)準(zhǔn)語言，我們的旅途從此開始。 本文將沿著時(shí)間線，從“發(fā)現(xiàn)問題-解決問題 ”的角度，帶領(lǐng)大家了解 Web 技術(shù)發(fā)展的關(guān)鍵歷程，了解典型技術(shù)的誕生以及技術(shù)更迭的緣由，思考技術(shù)發(fā)展的原因。 Tim Berners-Lee Tim Berners-Lee（蒂姆·伯納斯·李），英國(guó)科學(xué)家，萬維網(wǎng)之父，于 1989 年在歐洲核子研究組織（CERN）正式提出萬維網(wǎng)的設(shè)想。該網(wǎng)絡(luò)最初是為了滿足世界各地大學(xué)和研究所的科學(xué)家之間對(duì)自動(dòng)信息共享 的需求而設(shè)計(jì)和開發(fā)的，這也是為什么HTML的頂層聲明是 document ，標(biāo)簽名、文檔對(duì)象模型的名稱也是由此而來。 1990 年 12 月，他開發(fā)出了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器。1993 年 4 月 30 日，歐洲核子研究組織將萬維網(wǎng)軟件置于公共領(lǐng)域，把萬維網(wǎng)推廣到全世界，讓萬維網(wǎng)科技獲得迅速的發(fā)展，深深改變了人類的生活面貌。 他創(chuàng)造了超文本標(biāo)記語言（HTML），并創(chuàng)建了歷史上第一個(gè)網(wǎng)站。當(dāng)然，現(xiàn)在只剩下了由 CERN 恢復(fù)的網(wǎng)站副本：info.cern.ch. 靜態(tài)網(wǎng)頁(yè)時(shí)代 早期的靜態(tài)網(wǎng)頁(yè)，只有最基本的單欄布局，HTML 所支持的標(biāo)簽也僅有 <h1> 、 <p> 、 <a> 。后來為了豐富網(wǎng)頁(yè)的內(nèi)容， <img> 、 <table> 標(biāo)簽誕生了。 這一階段，Web 服務(wù)器基本上只是一個(gè)靜態(tài)資源服務(wù)器，每當(dāng)客戶端瀏覽器發(fā)來訪問請(qǐng)求，它都來者不拒的建立連接，查找 URL 指向的靜態(tài)頁(yè)面，再返回給客戶端。 隨著網(wǎng)頁(yè)的飛速發(fā)展，人們發(fā)現(xiàn)要人工實(shí)現(xiàn)所有信息的編寫是非常困難 的，而且非常耗時(shí)。 設(shè)想一下，假如一個(gè)頁(yè)面有兩塊區(qū)域展示的內(nèi)容是互相獨(dú)立的，那么你需要涵蓋所有的可能，需要編寫的頁(yè)面數(shù)量是兩塊區(qū)域的內(nèi)容數(shù)量的乘積！ 此外，靜態(tài)網(wǎng)站只能夠根據(jù)用戶的請(qǐng)求返回指向的網(wǎng)頁(yè)，除了進(jìn)行超鏈接跳轉(zhuǎn)，沒辦法實(shí)現(xiàn)任何交互。 網(wǎng)頁(yè)能夠動(dòng)態(tài)顯示 直接使用數(shù)據(jù)庫(kù)里的數(shù)據(jù) 網(wǎng)頁(yè)實(shí)現(xiàn)一些用戶交互 JavaScript 的誕生 1994 年，網(wǎng)景公司發(fā)布了 Navigator 瀏覽器，但他們急需一種網(wǎng)頁(yè)腳本語言，以使瀏覽器可以與網(wǎng)頁(yè)互動(dòng)。 1995年，網(wǎng)景公司的 Brendan Eich 迫于公司的壓力，只花了十天就設(shè)計(jì)了 JS 的最初版本，并命名為 Mocha。后來網(wǎng)景公司為了蹭 Java 的熱度，把 JS 最終改名為 JavaScript。但實(shí)際情況是，網(wǎng)景公司和 Sun 公司結(jié)成聯(lián)盟，才更名為 JavaScript。 從此網(wǎng)頁(yè)有了一些簡(jiǎn)單的用戶交互 ，比如表單驗(yàn)證；也有了一些JS為基礎(chǔ)的動(dòng)效 ，如走馬燈。但是讓網(wǎng)頁(yè)真正開始進(jìn)入動(dòng)態(tài)網(wǎng)頁(yè)時(shí)代的卻是以 PHP 為代表的后端網(wǎng)站技術(shù)。 擴(kuò)展資料：第一次瀏覽器大戰(zhàn) 在網(wǎng)景公司推出 JavaScript 的時(shí)候，微軟以 JS 為基礎(chǔ)，編寫了 JScript 和 VBScript 作為瀏覽器語言，并在 1995 年的 8 月推出了 IE 1.0。 由于微軟在系統(tǒng)里捆綁瀏覽器，而 90% 的人都在使用 Windows 操作系統(tǒng)，大量用戶被動(dòng)地選擇了 IE。面對(duì)微軟快速搶占瀏覽器份額，網(wǎng)景公司無奈之下只能快速將 JavaScript 向 ECMA 提交標(biāo)準(zhǔn)，制定了 ECMAScript 標(biāo)準(zhǔn)。 在這段時(shí)間，還發(fā)生過一件趣事，IE 4.0 發(fā)布當(dāng)天 Netscape 的員工們發(fā)現(xiàn)公司的草坪上出現(xiàn)了一個(gè) 大大的 IE 圖標(biāo)，這明顯是 一個(gè)挑釁的舉動(dòng)。 作為回應(yīng)，Netscape 把自己的吉祥物 “Mozilla” 放在 IE 的圖標(biāo)上，并掛上胸牌，寫著 “Netscape 72，Microsoft 18”——在當(dāng)時(shí)， IE 的市場(chǎng)份額確實(shí)不如 Netscape Navigator。 但這無法解決份額的問題，網(wǎng)景公司最終在第一次瀏覽器大戰(zhàn)中落敗，于 1998 年，被美國(guó)在線（AOL）以42億美元收購(gòu)。 在 1998 年網(wǎng)景公司被收購(gòu)前，網(wǎng)景公司公開了 Navigator 源代碼，想通過廣大程序員的參與重新獲得市場(chǎng)份額。Navigator 改名為 Mozilla。這也是火狐瀏覽器的由來，也是第二次瀏覽器大戰(zhàn)的伏筆。 CSS 1994 年，Hkon Wium Lie 最初提出了 CSS 的想法。1996 年 12 月，W3C 推出了 CSS 規(guī)范的第一版本。 美觀是所有人的追求。HTML 誕生以來，網(wǎng)頁(yè)基本上就是一個(gè)簡(jiǎn)陋的富文本容器。由于缺少布局和美化手段，早期網(wǎng)頁(yè)流行用table標(biāo)簽進(jìn)行布局。為了解決網(wǎng)頁(yè)“丑”的問題，Hkon Wium Lie 和 Bert Bos 共同起草了 CSS 提案，同期的 W3C 也對(duì)這個(gè)很感興趣。 早期的 CSS 存在多種版本，在 PSL96 版本你甚至可以在里面使用邏輯表達(dá)式。但因?yàn)樗菀讛U(kuò)展，瀏覽器廠商那么多，會(huì)變得很難統(tǒng)一，最終被放棄。 在眾多提案中，H?kon W Lie 的 CHSS（Cascading HTML Style Sheets）最早提出了樣式表可疊加 的概念。 行尾的百分比表示這條樣式的權(quán)重，最終將根據(jù)權(quán)重計(jì)算最終值。圖中將會(huì)計(jì)算 30pt * 40% + 20pt * 60% 作為h2字體大小的最終值。 為了解決 CSS 兼容性的問題，網(wǎng)景公司甚至還將 CSS 用 JS 來編寫。 CSS 從誕生開始就伴隨著大量的 bug，不同瀏覽器表現(xiàn)不同坑害了無數(shù)的程序員。今天我們能用上相對(duì)靠譜的 css，不得不說這是一個(gè)奇跡。 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù) 1995 年，Rasmus Lerdof 創(chuàng)造的 PHP 開始活躍在各大網(wǎng)站，它讓 Web 可以訪問數(shù)據(jù)庫(kù)了，PHP 實(shí)現(xiàn)了人們渴望的動(dòng)態(tài)網(wǎng)頁(yè)。 這里的動(dòng)態(tài)網(wǎng)頁(yè)不是指網(wǎng)頁(yè)動(dòng)效，而是指內(nèi)容的動(dòng)態(tài)展示、豐富的用戶交互。PHP 就像給網(wǎng)絡(luò)世界打開了一扇窗，各種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)（如 ASP、JSP）雨后春筍般的冒了出來，萬維網(wǎng)也因此開始高速發(fā)展，MVC 模式也開始出現(xiàn)在后端網(wǎng)站技術(shù)中。 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)解決了以前各種令人無法呼吸的痛，生活總會(huì)越來越好的： 可以用數(shù)據(jù)庫(kù)作為基礎(chǔ)來展示網(wǎng)頁(yè)內(nèi)容 可以實(shí)現(xiàn)表單和一些簡(jiǎn)單交互 PHP 等動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的原理，大體上都是根據(jù)客戶端的請(qǐng)求，從數(shù)據(jù)庫(kù)里獲取相對(duì)應(yīng)的數(shù)據(jù)，然后塞到網(wǎng)頁(yè)里去，返回給客戶端一個(gè)填充好內(nèi)容的網(wǎng)頁(yè)。這個(gè)階段也是前后端耦合的 。 而當(dāng)一些基礎(chǔ)的需求被滿足之后，動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)帶來的不足也漸漸暴露出來 ： 網(wǎng)頁(yè)總是刷新 。用戶名密碼校驗(yàn)需要刷新以展示錯(cuò)誤提示；因下拉選擇器選擇不同而展示的內(nèi)容需要刷新才能展示；每次數(shù)據(jù)交互必然會(huì)刷新一次頁(yè)面。網(wǎng)頁(yè)和后端邏輯混合 。相信老前端們都有過這樣的經(jīng)歷：開發(fā)完HTML后，會(huì)把頁(yè)面發(fā)給后端修改，加上數(shù)據(jù)注入邏輯；聯(lián)調(diào)或者debug的時(shí)候兩個(gè)人坐在一塊看，查問題的效率很低。有大量重復(fù)代碼無法復(fù)用 。舉一個(gè)典型的例子，論壇。很多時(shí)候只有內(nèi)容有變化，菜單、側(cè)邊欄等幾乎不會(huì)有改變，但每次請(qǐng)求的時(shí)候還是得再將整個(gè)網(wǎng)頁(yè)傳輸一遍。不僅頁(yè)面會(huì)刷新，速度慢，還挺耗流量（這個(gè)年代上網(wǎng)也是一種奢侈）。AJAX AJAX，Async JavaScript And XML，于 1998 年開始初步應(yīng)用，2005 年開始普及。AJAX 的廣泛使用，標(biāo)志著 Web2.0 時(shí)代的開啟。這同時(shí)也是各大瀏覽器爭(zhēng)鋒的時(shí)代。 現(xiàn)在，我們可以通過 AJAX 來動(dòng)態(tài)獲取數(shù)據(jù)，利用 DOM 操作動(dòng)態(tài)更新網(wǎng)頁(yè)內(nèi)容了。來看看加入了 AJAX 的網(wǎng)頁(yè)是怎么工作的： 這個(gè)時(shí)候前端路由還沒有興起，大多數(shù)情況下還是后端返回一整個(gè)頁(yè)面，部分內(nèi)容通過 AJAX 進(jìn)行獲取。 隨著智能手機(jī)的出現(xiàn)，APP 開始萌芽。相比起網(wǎng)頁(yè)，APP 編寫好之后只需要數(shù)據(jù)接口就能工作；而網(wǎng)頁(yè)不僅需要后端寫業(yè)務(wù)邏輯，控制跳轉(zhuǎn)，還要寫一部分接口用于 AJAX 請(qǐng)求。 這個(gè)階段前端能做的事情還是很少，還背負(fù)著“切圖仔”的綽號(hào)。隨著 HTML5 草案的提出，前端能做的交互越來越多，程序員們急需解決以下問題： 后端業(yè)務(wù)代碼和數(shù)據(jù)接口混合 ，還得兼容 APP 的接口（很多企業(yè)既有 APP 又有網(wǎng)站）能不能讓前端也像 APP 一樣，只需要請(qǐng)求數(shù)據(jù)接口即可展現(xiàn)內(nèi)容呢？ 擴(kuò)展資料：第二次瀏覽器大戰(zhàn) 2004 年 Firefox 發(fā)布，拉開了第二次瀏覽器大戰(zhàn)的序幕。同期市面上誕生的各種新興瀏覽器，如 Safari、Chrome 等，也加入了戰(zhàn)爭(zhēng)。 此前由于 XP 系統(tǒng)實(shí)在過于火爆，導(dǎo)致 IE 6 無任何競(jìng)爭(zhēng)對(duì)手，微軟甚至解散了瀏覽器的大部分員工，只留下幾個(gè)人象征性地維護(hù)順便修補(bǔ)一下 bug。這讓開發(fā)人員非常痛苦。 此時(shí) Firefox 以優(yōu)越于 IE 的性能和非常友好的編程工具，迅速將那些被 IE6 搞得焦頭爛額的網(wǎng)頁(yè)開發(fā)人員們，從水火之中救出，導(dǎo)致先讓前端工程師成為忠實(shí)的第一批用戶，然后，經(jīng)由這些有經(jīng)驗(yàn)的開發(fā)人員們推廣到了普通的用戶群體。 基于 webkit 內(nèi)核的 Safari，借助自家產(chǎn)品（iOS、MacOS）的壟斷快速收割移動(dòng)端和 mac 端市場(chǎng)份額；同樣基于 webkit 內(nèi)核的 Chrome，趁著微軟放松警惕，憑借優(yōu)越于市場(chǎng)上所有瀏覽器的性能，如同中國(guó)歷史上的成吉思汗一樣大殺四方，快速擴(kuò)展市場(chǎng)份額。 微軟知道，自己已經(jīng)失去了最初能稱霸的機(jī)會(huì)，這次它不想失去，IE 再次開始迭代，各大瀏覽器廠商又開始不顧標(biāo)準(zhǔn)，迭代再次開始，為了統(tǒng)一化標(biāo)準(zhǔn)，W3C 開發(fā)了 HTML5，但是遲遲得不到微軟的認(rèn)可。在其他瀏覽器紛紛支持 HTML5 后，微軟發(fā)現(xiàn)，自己又成了孤家寡人，份額不斷縮水。 2016 年，Chrome 瀏覽器份額超越 IE，第二次瀏覽器大戰(zhàn)結(jié)束。 瀏覽器大戰(zhàn)極大的推動(dòng)了技術(shù)進(jìn)步，正是 Google 研發(fā)出的 V8 引擎極大的提升了 JS 的運(yùn)行效率，NodeJS 才有機(jī)會(huì)誕生，前端才能走向全棧。JS 其實(shí)沒有你想象的那么慢 。 SPA 2008 年 HTML5 草案提出，各大瀏覽器開啟良性競(jìng)爭(zhēng)，爭(zhēng)先實(shí)現(xiàn) HTML5 功能。由于 HTML5 帶來前端代碼復(fù)雜度的增加 ，前端為了尋求良好的可維護(hù)性和可復(fù)用性，也不得不參考后端 MVC 進(jìn)行了設(shè)計(jì)和拆分，后來出現(xiàn)了三大前端框架：Vue（2014）、React（2010）、AngularJS（2009）。 單頁(yè)應(yīng)用返回一個(gè)空白的 HTML，并通過 JS 腳本進(jìn)行動(dòng)態(tài)生成內(nèi)容，從此和頁(yè)面刷新說拜拜。 后端不再負(fù)責(zé)模板渲染，前端和 APP 開始對(duì)等，后端的 API 也可以通用化了。前后端終于得以分離 。（PS：最終目標(biāo)是成為后端） 但 SPA 因?yàn)榉祷氐氖强?HTML，所有 JS 也被打包為一個(gè)文件，需要在一開始就加載完所有的資源， 請(qǐng)求網(wǎng)頁(yè)后白屏?xí)r間比傳統(tǒng)網(wǎng)頁(yè)要長(zhǎng) 在業(yè)務(wù)復(fù)雜的情況下，請(qǐng)求文件很大，渲染非常慢 。 這使得前端不得不拆分過于龐大的單頁(yè)應(yīng)用，出現(xiàn)了框架的多頁(yè)面概念，也出現(xiàn)了多種解決方案。 很多網(wǎng)頁(yè)首次加載的時(shí)候其實(shí)并不需要太多的東西，比如論壇首頁(yè)與貼子詳情頁(yè)，完全可以將其拆開，用戶在新打開的頁(yè)面閱讀反而體驗(yàn)更好（多頁(yè)應(yīng)用 ）。 又比如管理后臺(tái)，可以在頁(yè)面框架內(nèi)，將每個(gè)菜單對(duì)應(yīng)的管理頁(yè)拆出來動(dòng)態(tài)加載 （import）。 Server Side Render Server Side Render，服務(wù)端渲染，簡(jiǎn)稱 SSR，又稱服務(wù)端同構(gòu)、直出，一般使用 NodeJS 實(shí)現(xiàn)。 這里的服務(wù)端渲染和以前的不一樣，SSR 會(huì)利用已經(jīng)“脫水”的首屏數(shù)據(jù)來渲染首屏頁(yè)面返回給客戶端，到了瀏覽器再注入瀏覽器事件，并且保留單頁(yè)應(yīng)用的能力，對(duì) SEO 非常友好。但學(xué)習(xí)成本高，限制較多。 讓我們看看傳統(tǒng) SPA 和加入了 SSR 的 SPA 在請(qǐng)求上的區(qū)別： 傳統(tǒng) SPA 可以更快的返回頁(yè)面，請(qǐng)求響應(yīng)時(shí)間更短；加載 JS 后才開始渲染，白屏?xí)r間更長(zhǎng)，loading 結(jié)束后用戶感知到的相對(duì)可交互時(shí)間更早。 而 SSR 在接到瀏覽器請(qǐng)求時(shí)，先從后端拉取首屏數(shù)據(jù)渲染在頁(yè)面內(nèi)才返回，請(qǐng)求響應(yīng)時(shí)間更長(zhǎng)；因?yàn)楣?jié)約了一段瀏覽器請(qǐng)求首屏數(shù)據(jù)的時(shí)間，白屏?xí)r間更短。由于 JS 異步加載，用戶感知的相對(duì)可交互時(shí)間變晚。但體驗(yàn)上 SSR 一般更好。 在極端情況下，用戶眼中傳統(tǒng) SPA 會(huì)一直顯示 loading，使用了 SSR 的頁(yè)面則會(huì)出現(xiàn)“點(diǎn)不動(dòng)”的情況。 大多數(shù)時(shí)候 SSR 體驗(yàn)會(huì)更佳，因?yàn)榉?wù)端承擔(dān)了大部分渲染工作，這也導(dǎo)致服務(wù)端負(fù)載變高。但在業(yè)務(wù)復(fù)雜的情況下，SSR 首屏請(qǐng)求的接口數(shù)很多，導(dǎo)致返回 HTML 變慢。 歸根結(jié)底，SSR 不能很好的應(yīng)付業(yè)務(wù)復(fù)雜的情況，首屏要加載的東西還是太多了 。所以我們要怎樣讓用戶感知到的白屏?xí)r間變短呢？ NodeJS 說完了 SSR，必須說一下 NodeJS。2010 年 NodeJS 正式立項(xiàng)到現(xiàn)在已經(jīng) 11 個(gè)年頭了，NodeJS 的誕生來自于 Ryan Dahl（下圖） 的靈感。他想以非阻塞的方式做所有事情 ，用完全異步方式可以處理非常多的請(qǐng)求（高并發(fā)）。 NodeJS 的出現(xiàn)讓前端向全棧的發(fā)展邁出了重大的一步。很多公司開始用 NodeJS 搞 BFF（backend for frontend），我們也開始把 Controller 層放到 NodeJS 來處理，后端只負(fù)責(zé)基礎(chǔ)業(yè)務(wù)數(shù)據(jù)。也就是現(xiàn)在的三層架構(gòu)： 這種架構(gòu)在跨端的時(shí)候具有良好的適配性，我們可以根據(jù)業(yè)務(wù)需求，為不同端設(shè)計(jì)不同的 Controller 和 View，而后臺(tái)可以不做變更。這種架構(gòu)省去了很多溝通成本，前端專注頁(yè)面的展示，后端專注業(yè)務(wù)邏輯。 當(dāng)然，NodeJS 還可以對(duì)后端數(shù)據(jù)進(jìn)行預(yù)處理，前端根據(jù)自己的需要自己設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu)，頁(yè)面開發(fā)與接口調(diào)試形成閉環(huán) ，還為后端分擔(dān)了壓力。 擴(kuò)展資料：第三次瀏覽器大戰(zhàn)
智能手機(jī)的飛速發(fā)展，這張圖表現(xiàn)的淋漓盡致。第三次瀏覽器大戰(zhàn)是爭(zhēng)奪移動(dòng)端市場(chǎng)份額的一戰(zhàn)，也是當(dāng)下正在進(jìn)行的一戰(zhàn)。 Benedict Evans: “Mobile is eating the world.”（移動(dòng)設(shè)備正在蠶食世界） “Mobile remakes the Internet.”（移動(dòng)設(shè)備正在重構(gòu)Internet） 而未來，瀏覽器真正的對(duì)手不再是瀏覽器，而是小程序這樣結(jié)合了APP和網(wǎng)頁(yè)優(yōu)點(diǎn)的新興技術(shù)。 未來 早在 2009 年，F(xiàn)acebook 的工程師就開發(fā)了 bigPipe，讓 Facebook 頁(yè)面打開速度提高了兩倍。bigPipe 使用 分塊渲染 的思想，將網(wǎng)頁(yè)的渲染變成了一小塊一小塊的，服務(wù)端渲染好一塊頁(yè)面就發(fā)送給客戶端。他們直接把木桶拆了，打破了短板效應(yīng) 。 時(shí)隔 11 年，也就是 2020 年 12 月，React 團(tuán)隊(duì)提出了 React Server Components，算是一個(gè)可擴(kuò)展的前后端融合方案。其理念和 bigPipe 類似，把組件放在服務(wù)端渲染，節(jié)省了從瀏覽器進(jìn)行數(shù)據(jù)請(qǐng)求的開支，一些運(yùn)行時(shí)也可以不用放到瀏覽器，減小了包大小（如 markdown 在服務(wù)端渲染好了，也就不再需要把工具庫(kù)發(fā)送給瀏覽器了）。React Server Components 的引入，也同步做到了自動(dòng)的 Code Split。 React Server Components 原理 不同的是 React Server Components 返回的不是 HTML，而是帶有結(jié)構(gòu)和數(shù)據(jù)的自定義類 JSON 數(shù)據(jù)。 這種結(jié)構(gòu)，是對(duì)服務(wù)端渲染的核心（結(jié)構(gòu)+數(shù)據(jù)）進(jìn)行抽象，結(jié)合 React 的工作方式（如 Suspense），平緩的從服務(wù)端過渡到了客戶端，維持了組件狀態(tài)，并且可以更自由的拼裝服務(wù)器組件和客戶端組件。 關(guān)于拆分這條思路，讓我想到微前端，雖然現(xiàn)在微前端還有很多問題，但微應(yīng)用即服務(wù)也不乏為一條解決之道。未來前端或許會(huì)往“小而美”的方向發(fā)展，甚至形成一個(gè)以服務(wù)端組件為單位的包管理器，網(wǎng)頁(yè)打包大小會(huì)越來越小，更多的組件是從網(wǎng)絡(luò)上直接獲取。 此外，我也很期待 Web Components 的發(fā)展，有了原生的支持，0kb runtime 也不是不可能了。合久必分分久必合，現(xiàn)存很多前端框架也可以得到統(tǒng)一了。當(dāng)然現(xiàn)在 Web Components 想要投入使用，首先離不開瀏覽器的支持，而且必須有一個(gè)平緩的過渡，此外兼容性也是一個(gè)大問題（最后還是苦了程序員們）。 本文首發(fā)公眾號(hào)：騰訊技術(shù)工程（ID：Tencent_TEG），如需轉(zhuǎn)載請(qǐng)聯(lián)系出處。 著人們?cè)絹碓揭蕾囍悄苁謾C(jī)，所以有很多企業(yè)都越來越重視移動(dòng)端的排名，其實(shí)移動(dòng)端和pc端的網(wǎng)站優(yōu)化同等重要。只是根據(jù)用戶的需求對(duì)移動(dòng)的網(wǎng)站進(jìn)行優(yōu)化調(diào)整。
移動(dòng)端網(wǎng)站優(yōu)化需要哪些技巧?
百度官方意見的重點(diǎn)之一是使用合理的div和CSS架構(gòu)，建議使用HTML 5頁(yè)面。其次，合理的布局，使WAP結(jié)束頁(yè)面。
事實(shí)上，移動(dòng)頁(yè)面優(yōu)化和PC頁(yè)面優(yōu)化基本上是一樣的，下面是對(duì)移動(dòng)站點(diǎn)SEO優(yōu)化的幾個(gè)要點(diǎn)的簡(jiǎn)要描述。
一、域名和robots設(shè)置。
1.域名越短越容易記住。很多網(wǎng)站收集端的域名是pc網(wǎng)站的二級(jí)域名，讓用戶更加信賴網(wǎng)站，如果手機(jī)端有專門的域名建議取一個(gè)簡(jiǎn)單好記的域名，比較推薦m.開頭的二級(jí)域名。
二，做好移動(dòng)和PC站點(diǎn)的適應(yīng)性轉(zhuǎn)換。
1.確保移動(dòng)網(wǎng)站或個(gè)人電腦網(wǎng)站的每一頁(yè)上都有相應(yīng)的導(dǎo)航或提示鏈接，以便用戶在移動(dòng)版本和PC版本之間切換，而且搜索引擎更好地包含它也是方便的。
2.百度官方聲明：對(duì)于移動(dòng)網(wǎng)站，當(dāng)百度不確定訪問來源時(shí)建議直接返回html5，不要重定向到pc
三、頁(yè)面盡量簡(jiǎn)潔
1.手機(jī)網(wǎng)站的網(wǎng)頁(yè)下載速度較個(gè)人電腦網(wǎng)站為慢，網(wǎng)頁(yè)數(shù)目及頁(yè)數(shù)盡量減至最少。
2.此外，由于用戶是流動(dòng)電話用戶，瀏覽網(wǎng)頁(yè)的時(shí)間是零碎的，所以不可能耐心地點(diǎn)擊大量網(wǎng)頁(yè)，直接將網(wǎng)頁(yè)的主要內(nèi)容呈現(xiàn)給訪客，因此，有必要盡量精簡(jiǎn)流動(dòng)網(wǎng)站的設(shè)計(jì)。
3.導(dǎo)向頁(yè)或購(gòu)買程序應(yīng)盡可能簡(jiǎn)明扼要，提供從訪問者進(jìn)入網(wǎng)站到購(gòu)買、直接放棄多余內(nèi)容和向訪問者展示他們想要的內(nèi)容的最簡(jiǎn)單步驟。如果購(gòu)買過程需要登記六七個(gè)項(xiàng)目，在購(gòu)買時(shí)再填寫幾個(gè)項(xiàng)目，恐怕下次不會(huì)再來了。
四.URL結(jié)構(gòu)優(yōu)化技巧
具有良好描述、規(guī)范和簡(jiǎn)單性的URL有助于用戶更方便、直觀地判斷網(wǎng)頁(yè)內(nèi)容，同時(shí)也有助于搜索引擎更有效地掌握和理解網(wǎng)頁(yè)。
五.如何選擇域名?
就像個(gè)人電腦網(wǎng)站一樣，移動(dòng)域名越短越好。一個(gè)好的移動(dòng)網(wǎng)站域名不僅應(yīng)該讓用戶容易記住，更容易進(jìn)入，還可以方便用戶向他人推薦。短域名使用戶更容易直觀地理解網(wǎng)站的主旨。
六、盡量避免使用彈窗、閃存、java等行為。同樣，閃存和彈出窗口等行為將占用很大一部分流量，對(duì)于移動(dòng)用戶來說，無疑會(huì)浪費(fèi)時(shí)間和流量。
七、當(dāng)移動(dòng)網(wǎng)站被修改或更改時(shí)，要做好301重定向的工作。對(duì)于移動(dòng)網(wǎng)站的修改或域名的替換，新舊內(nèi)容的映射應(yīng)該盡可能簡(jiǎn)單，如果你能改變域名，如果你能做同樣的路徑，負(fù)面影響就會(huì)更小，影響時(shí)間也會(huì)更短。
百度站長(zhǎng)平臺(tái)官員還發(fā)布了移動(dòng)臺(tái)優(yōu)化指南，希望網(wǎng)站管理員和營(yíng)銷人員仔細(xì)閱讀，為用戶創(chuàng)造一個(gè)更好的移動(dòng)頁(yè)面。
