單頁應(yīng)用加載

單頁應(yīng)用程序是 APP 和 H5 開發(fā)中最熱門的趨勢之一，它是一種網(wǎng)頁設(shè)計(jì)技術(shù)，可以在手機(jī)的屏幕上快速加載。如今，網(wǎng)站打開較長的加載時(shí)間與收入損失相關(guān)。只有一秒鐘的時(shí)間，吸引的觀看者和用戶就會(huì)變得太急躁，甚至連看都不見的網(wǎng)頁都無法點(diǎn)擊。單頁應(yīng)用程序通過提供即時(shí)響應(yīng)來改善客戶體驗(yàn)。

網(wǎng)站加載多長時(shí)間算足夠快？

“足夠快”的定義可能是主觀的。Google 將其描述為足夠短的時(shí)間，以使用戶始終專注于體驗(yàn)，而不會(huì)因?yàn)g覽器引入服務(wù)器通信的時(shí)間而分心?？梢詫τ脩舻牟荒蜔┻M(jìn)行統(tǒng)計(jì)測量。

有報(bào)告稱擁有全球智能手機(jī)的 42.6％ 的人群里中，大多數(shù)人最多可以容忍兩秒鐘的時(shí)間才能出現(xiàn)網(wǎng)站。三秒鐘后，一半以上的用戶將關(guān)閉網(wǎng)站。Google 建議應(yīng)用程序的下載時(shí)間應(yīng)少于兩秒，并且下載后，網(wǎng)站需要在不到 0.1 秒的時(shí)間內(nèi)做出響應(yīng)。

什么是單頁應(yīng)用程序？

單頁應(yīng)用程序（SPA）是一種網(wǎng)站格式，由具有 Web 界面和功能的單個(gè) HTML 文件組成，該文件可在瀏覽器中使用并通過 JavaScript 加載。SPA 的示例包括 Gmail，F(xiàn)acebook，Google 云端硬盤和 GitHub。應(yīng)用程序代碼被加載一次。渲染和 WEB 管理在客戶端執(zhí)行。觸發(fā)操作時(shí)，頁面不會(huì)被關(guān)閉，也不會(huì)從服務(wù)器刷新的內(nèi)容重新加載該頁面。只有新數(shù)據(jù)與服務(wù)器進(jìn)行通信。

SPA 與多頁應(yīng)用程序或 MPA 的運(yùn)營效率形成了鮮明對比。MPA 是更傳統(tǒng)的 WEB 設(shè)計(jì)，其中網(wǎng)站由多個(gè) HTML 文件組成，這些 HTML 文件以分層結(jié)構(gòu)鏈接在一起并從 Internet 服務(wù)器發(fā)送出去。據(jù)統(tǒng)計(jì)，這些網(wǎng)站通常平均需要加載 1.3MB 至 2.5MB 的內(nèi)容。手機(jī) CPU 延長了下載文件所需的時(shí)間，比臺(tái)式機(jī)瀏覽器慢，而圖片或視頻以連接到 Wi-Fi 系統(tǒng)的臺(tái)式機(jī)更低的帶寬饋送通過蜂窩網(wǎng)絡(luò)傳輸?shù)妮d有像素的數(shù)據(jù)。

SPA 的優(yōu)點(diǎn)

單頁面應(yīng)用程序通過簡單的布局，輕松的導(dǎo)航，適用于各種移動(dòng)屏幕尺寸的自適應(yīng)格式以及將瀏覽器與服務(wù)器之間的通信保持在最低限度的方式，提供了無縫的用戶體驗(yàn)。

由于僅使用一個(gè) HTML 文件，因此網(wǎng)站的全部內(nèi)容位于客戶端的單個(gè)位置。導(dǎo)航非常簡單，沒有頁面跳動(dòng)或加載其他頁面所需的時(shí)間。

加載時(shí)間迅速，尤其是在 Chrome 瀏覽器的檢查功能內(nèi)，調(diào)試和升級變得更加簡單。此外，由于要加載的文件數(shù)量少，因此在社交媒體上共享 SPA 格式的站點(diǎn)更容易進(jìn)行，從而使更多流量進(jìn)入該站點(diǎn)。

SPA 格式允許開發(fā)人員增強(qiáng)站點(diǎn)的 API 或應(yīng)用程序編程接口。最值得注意的是，SPA 格式的站點(diǎn)利用特殊的 JavaScript 框架將輸入數(shù)據(jù)緩存到本地?cái)?shù)據(jù)庫中。這樣的框架允許即使在脫機(jī)狀態(tài)下也可以訪問數(shù)據(jù)并將其存儲(chǔ)在多個(gè)設(shè)備上，從而使工作生產(chǎn)可以在用戶喜歡的任何地方繼續(xù)進(jìn)行。Google 云端硬盤和 Gmail 是該功能很好的示例。

SPA 的缺點(diǎn)

盡管 SPA 格式的網(wǎng)站能夠保持最新狀態(tài)，但是使用這種格式仍然存在弊端。了解危險(xiǎn)并了解如何糾正這些危險(xiǎn)至關(guān)重要。使用 SPA 格式的網(wǎng)站需要同時(shí)安裝 JavaScript 并啟用，JavaScript 才能正常運(yùn)行。盡管它可以在加載后保留其外觀，但是如果隨時(shí)在瀏覽器中禁用 JavaScript，則該站點(diǎn)的功能將受到嚴(yán)重?fù)p害。

數(shù)據(jù)保留，搜索功能和用戶輸入等功能將不起作用。SPA 格式的網(wǎng)站在搜索引擎中不太待見，因?yàn)檫@種格式的生成方法稱為異步 JavaScript 和 XML 或 AJAX，當(dāng)它自動(dòng)更新網(wǎng)站時(shí)不會(huì)刷新服務(wù)器。解決方法是更頻繁地將數(shù)據(jù)發(fā)送到服務(wù)器幫助中的搜索引擎收錄。

SPA 容易受到內(nèi)存泄漏和跨站點(diǎn)腳本攻擊的攻擊。當(dāng)腳本程序無法丟棄不再需要的用戶信息時(shí)，就會(huì)發(fā)生內(nèi)存泄漏，從而導(dǎo)致設(shè)備速度變慢?？缯军c(diǎn)腳本（XSS）是惡意代碼，它利用了 SPA 在客戶端的編碼基礎(chǔ)。這些攻擊的嚴(yán)重性范圍很廣。良性嘗試可能是 Cookie 盜竊。嚴(yán)重攻擊通常會(huì)針對吸引用戶輸入評論的網(wǎng)站，從而提升用戶的私人信息?？梢允褂脪呙璩绦蚯宄龕阂獯a，從而避免這些情況。

結(jié)論

單頁應(yīng)用程序站點(diǎn)因其結(jié)構(gòu)簡單和易于導(dǎo)航而變得流行。它們?yōu)閼?yīng)用程序開發(fā)人員提供了一種簡單的體系結(jié)構(gòu)，并為功能完善且外觀吸引人的網(wǎng)站騰出了時(shí)間?？焖俚募虞d時(shí)間和移動(dòng)適應(yīng)性也提高了 SPA 的吸引力，并幫助網(wǎng)站維持了觀看者的參與度。由于代碼位于瀏覽器中，因此需要集成其他方法，以確保搜索引擎可以識(shí)別該站點(diǎn)，并配備了防病毒檢測器，將惡意代碼與 SPA 隔離。