你對SPA單頁面的理解,它的優缺點分別是什麼?如何實現SPA應用呢?

来源:https://www.cnblogs.com/smileZAZ/p/18025909
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、什麼是SPA SPA(single-page application),翻譯過來就是單頁應用SPA是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼( ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

一、什麼是SPA

SPA(single-page application),翻譯過來就是單頁應用SPA是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼(HTMLJavaScriptCSS)都通過單個頁面的載入而檢索,或者根據需要(通常是為響應用戶操作)動態裝載適當的資源並添加到頁面頁面在任何時間點都不會重新載入,也不會將控制轉移到其他頁面舉個例子來講就是一個杯子,早上裝的牛奶,中午裝的是開水,晚上裝的是茶,我們發現,變的始終是杯子里的內容,而杯子始終是那個杯子結構如下圖

我們熟知的JS框架如react,vue,angular,ember都屬於SPA

二、SPA和MPA的區別

上面大家已經對單頁面有所瞭解了,下麵來講講多頁應用MPA(MultiPage-page application),翻譯過來就是多頁應用在MPA中,每個頁面都是一個主頁面,都是獨立的當我們在訪問另一個頁面的時候,都需要重新載入htmlcssjs文件,公共文件則根據需求按需載入如下圖

單頁應用與多頁應用的區別

單頁應用優缺點

優點:

  • 具有桌面應用的即時性、網站的可移植性和可訪問性
  • 用戶體驗好、快,內容的改變不需要重新載入整個頁面
  • 良好的前後端分離,分工更明確

缺點:

  • 不利於搜索引擎的抓取
  • 首次渲染速度相對較慢

三、實現一個SPA

原理

  1. 監聽地址欄中hash變化驅動界面變化
  2. pushsate記錄瀏覽器的歷史,驅動界面發送變化

實現

hash 模式

核心通過監聽url中的hash來進行路由跳轉

// 定義 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  
          
        // 監聽路由change調用相對應的路由回調  
        window.addEventListener('load', this.refresh, false);  
        window.addEventListener('hashchange', this.refresh, false);  
    }  
      
    route(path, callback){  
        this.routes[path] = callback;  
    }  
      
    push(path) {  
        this.routes[path] && this.routes[path]()  
    }  
}  
  
// 使用 router  
window.miniRouter = new Router();  
miniRouter.route('/', () => console.log('page1'))  
miniRouter.route('/page2', () => console.log('page2'))  
  
miniRouter.push('/') // page1  
miniRouter.push('/page2') // page2  
history模式

history 模式核心借用 HTML5 history apiapi 提供了豐富的 router 相關屬性先瞭解一個幾個相關的api

    • history.pushState 瀏覽器歷史紀錄添加記錄
    • history.replaceState修改瀏覽器歷史紀錄中當前紀錄
    • history.popState 當 history 發生變化時觸發
// 定義 Router  
class Router {  
    constructor () {  
        this.routes = {};  
        this.listerPopState()  
    }  
      
    init(path) {  
        history.replaceState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    }  
      
    route(path, callback){  
        this.routes[path] = callback;  
    }  
      
    push(path) {  
        history.pushState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    }  
      
    listerPopState () {  
        window.addEventListener('popstate' , e => {  
            const path = e.state && e.state.path;  
            this.routers[path] && this.routers[path]()  
        })  
    }  
}  
  
// 使用 Router  
  
window.miniRouter = new Router();  
miniRouter.route('/', ()=> console.log('page1'))  
miniRouter.route('/page2', ()=> console.log('page2'))  
  
// 跳轉  
miniRouter.push('/page2')  // page2  

四、題外話:如何給SPA做SEO

下麵給出基於VueSPA如何實現SEO的三種方式

  1. SSR服務端渲染

將組件或頁面通過伺服器生成html,再返回給瀏覽器,如nuxt.js

  1. 靜態化

目前主流的靜態化主要有兩種:(1)一種是通過程式將動態頁面抓取並保存為靜態頁面,這樣的頁面的實際存在於伺服器的硬碟中(2)另外一種是通過WEB伺服器的 URL Rewrite的方式,它的原理是通過web伺服器內部模塊按一定規則將外部的URL請求轉化為內部的文件地址,一句話來說就是把外部請求的靜態地址轉化為實際的動態頁面地址,而靜態頁面實際是不存在的。這兩種方法都達到了實現URL靜態化的效果

  1. 使用Phantomjs針對爬蟲處理

原理是通過Nginx配置,判斷訪問來源是否為爬蟲,如果是則搜索引擎的爬蟲請求會轉發到一個node server,再通過PhantomJS來解析完整的HTML,返回給爬蟲。下麵是大致流程圖

參考文獻

  • https://segmentfault.com/a/1190000019623624
  • https://juejin.cn/post/6844903512107663368
  • https://www.cnblogs.com/constantince/p/5586851.html

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 概述:MVVM Toolkit是.NET平臺的強大工具包,旨在簡化MVVM應用程式開發。提供基礎功能如ViewModelBase和RelayCommand,支持數據綁定和命令綁定,通過Messenger實現消息訂閱發佈。其高級功能包括ObservableObject和WeakEventListene ...
  • 概述:.NET中的IConfiguration介面提供了一種多源讀取配置信息的靈活機制,包括JSON、XML、INI文件和環境變數。通過示例,清晰演示了從這些不同源中讀取配置的方法,使配置獲取變得方便且易於擴展。這種方式適用於不同場景,如API密鑰、資料庫連接等,為應用提供了高度可配置性。 在.NE ...
  • Gif演示 分解步驟 1,使用組件DataGridView 2,使用DataSource來控製表格展示的數據來源(註意:來源需要是DataTable類型) 3,需要用到非同步線程。如果是不控制數據源的話,需要使用UI安全線程;(使用Control.Invoke或Control.BeginInvoke方 ...
  • 大家好,我是知微! 上一篇推薦的書單嵌入式軟體必讀10本書_單片機篇,收到反響很好。再推薦一篇嵌入式Linux相關的書單。 《鳥哥的Linux私房菜》 鳥哥的Linux系列適合零基礎小伙伴,從電腦基礎到文件系統、shell腳本等等,通俗易懂。作者寫作風格生動幽默,不拘一格。雖然書有點厚,但對於新手而 ...
  • Linux下MySQL的安裝與使用 安裝前說明 查看是否安裝過MySQL 如果你是用rpm安裝, 檢查一下RPM PACKAGE: rpm -qa | grep -i mysql # -i 忽略大小寫 檢查mysql service: systemctl status mysqld.service ...
  • 資料庫作為數據驅動業務創新和智慧銀行建設的關鍵基礎設施,在銀行數字化變革中具有舉足輕重的作用。 在金融科技發展和國家政策引領下,銀行紛紛加快推進數字化轉型時代,正在經歷一場以科技引領、數據賦能、數字經營為目標的智慧銀行數字化變革。資料庫作為數據驅動業務創新和智慧銀行建設的關鍵基礎設施,在銀行數字化變 ...
  • 本文分享自華為雲社區《面試必問 | 聊聊MySQL三大核心日誌的實現原理?》,作者:冰 河。 MySQL幾乎成為互聯網行業使用的最多的開源關係型資料庫,正因如此,MySQL也成為各大互聯網公司面試中必問的資料庫,尤其是MySQL中的事務實現機制和三大核心日誌的實現原理。 今天,我們就重點聊聊MySQ ...
  • 近期,Apache DolphinScheduler 社區激動地宣佈 3.2.1 版本的發佈。此次更新不僅著力解決了前一版本(3.2.0)中遺留的問題,而且引入了一系列的功能增強和優化措施。 原先的問題主要源於部分重要代碼在發佈過程中未能成功合併(cherry-pick),加之這部分代碼的合併過程較 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...