響應式網站是什么？響應式網站如何搭建？

應式網站是什么？響應式網站如何搭建？響應式網站是一種能夠根據用戶的設備和屏幕尺寸自動調整布局和設計的網站。這意味著無論用戶是在桌面電腦、平板電腦、手機或其他設備上訪問網站，網站都能夠以最佳的方式呈現內容，并提供良好的用戶體驗，下面就和買買提科技一起來看看響應式網站的相關內容。

響應式網站的主要特點包括：

靈活的布局：響應式網站會根據屏幕的大小和方向，自動調整布局，以確保內容適應不同的設備尺寸。

可變的圖像和媒體：圖像和媒體內容會根據屏幕大小和分辨率進行調整，以保持內容的清晰度和可見性。

簡化的導航：在小屏幕設備上，響應式網站通常會采用簡化的導航菜單，以提高用戶的易用性和導航體驗。

快速加載速度：響應式網站會優化加載速度，以確保在不同設備上都能夠快速加載和響應用戶操作。

響應式網站如何搭建？

1、規劃和設計：

確定網站的目標和目標受眾，了解他們的需求和偏好。創建網站的結構和內容架構，包括頁面的數量、主題和內容分類。設計網站的用戶界面和用戶體驗，考慮到不同設備和屏幕尺寸下的布局和導航方式。

2、選擇合適的工具和技術：

選擇合適的網站開發工具和技術棧，如HTML、CSS、JavaScript等?？紤]使用響應式網頁設計框架（如Bootstrap、Foundation等）來簡化開發過程，或者選擇自定義開發以實現更高度的定制化。

3、制定設計方案：

根據設計規范和用戶需求創建網站的設計方案，包括顏色、字體、圖標等元素。設計網站的布局，確定不同設備上的頁面結構和內容排列方式。

4、編寫HTML結構：

使用語義化的HTML標記創建網站的內容結構，包括頭部、導航、主體內容和頁腳等部分，使用HTML5元素和語義標簽來增強網站的可訪問性和搜索引擎優化。

5、應用CSS樣式：

使用CSS樣式表為網站添加樣式，包括布局、顏色、字體等。使用媒體查詢（Media Queries）來為不同設備和屏幕尺寸定義樣式，并確保布局的適應性和靈活性。

6、添加交互和動態效果：

使用JavaScript或者JavaScript庫（如jQuery）為網站添加交互功能和動態效果，例如導航菜單的交互、滾動效果等。確保動態效果在各種設備和瀏覽器上都能夠正常運行。

7、測試和優化：

在不同設備和屏幕尺寸上測試網站的響應性和兼容性，包括桌面電腦、平板和手機等設備。

修復和調整樣式和布局，以確保在各種設備上都能夠正常顯示和使用。優化網站的性能，包括加載速度、響應時間等方面，以提高用戶體驗。

8、部署和發布：

將網站文件上傳至服務器，并配置域名和托管服務。定期備份網站文件和數據庫，以防意外數據丟失。監控網站的運行情況，并及時處理任何問題和反饋，確保網站的穩定性和可靠性。

以上就是買買提科技網給大家帶來的“響應式網站是什么？響應式網站如何搭建？”的相關知識，想要了解更多關于網站建設、網站SEO優化、小程序開發的相關內容可以直接關注買買提科技網！

文章來源：https://www.hnsuma.cn/

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎的內容。

今天，我們來了解一下 HTML 和網頁有什么關系，以及與 DOM 有什么不同。通過本講內容，你將掌握瀏覽器是怎么處理 HTML 內容的，以及在這個過程中我們可以進行怎樣的處理來提升網頁的性能，從而提升用戶的體驗。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發現一直在轉圈，或者等了好長時間才打開頁面……

此時的你，會選擇關掉頁面還是耐心等待呢？

這一現象，除了網絡不穩定、網速過慢等原因，大多數都是由于頁面設計不合理導致加載時間過長導致的。

我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。

HTML 的職責在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結構；
CSS 用來裝飾 HTML，讓我們的頁面更好看；
JavaScript 則可以豐富頁面功能，使靜態頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網頁結構，基本上所有網頁都是這樣的 HTML 結構：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是頁面的根元素，它描述完整的網頁；
head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網頁里的內容；
body元素包含了我們訪問頁面時所有顯示在頁面上的內容，是用戶最終能看到的內容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結構不合理可能會導致頁面響應慢，這個過程很多時候體現在<script>和<style>元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹）。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。

由于 JavaScript 在執行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執行時，GUI 線程會被掛起。

以網易云課堂官網為例，我們來看看網頁加載流程。

（1）當我們打開官網的時候，瀏覽器會從服務器中獲取到 HTML 內容。

（2）瀏覽器獲取到 HTML 內容后，就開始從上到下解析 HTML 的元素。

（3）<head>元素內容會先被解析，此時瀏覽器還沒開始渲染頁面。

我們看到<head>元素里有用于描述頁面元數據的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。

（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執行完成后，控制權會交回給渲染引擎，渲染引擎繼續往下解析 HTML 頁面。

（6）此時<body>元素內容開始被解析，瀏覽器開始渲染頁面。

在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，用戶體驗會變得很糟糕。

因此，對于對性能要求較高、需要快速將內容呈現給用戶的網頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標記<script>標簽，來控制 JavaScript 的加載順序。

百度首頁

三、DOM 解析

對于百度這樣的搜索引擎來說，必須要在最短的時間內提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內容優先級會相對較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規則樹，它們結合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復計算。

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節點，那么 HTML 和 DOM 到底有什么不一樣呢？

根據 MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網頁的結構并渲染，那么使用 DOM 則可以獲取網頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現頁面的動態變化，以及用戶的交互操作。

在開發過程中，常常用對象的方式來描述某一類事物，用特定的結構集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節點以及包含屬性和方法的相關對象組成的結構集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節點。比如下面這樣的 HTML 內容：

<html>
    <head>
        <title>標題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁面第一標題</h1>
    </body>
</html>

打開控制臺 Elements 面板，可以看到這樣的 HTML 結構，如下圖所示：

在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對于樹狀結構來說，常常使用parent/child/sibling等方式來描述各個節點之間的關系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結構，因此組件也是呈樹狀結構，組件間的關系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現在大多數應用程序同樣以root為根節點展開，我們進行狀態管理、數據管理也常常會呈現出樹狀結構。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現將子元素的事件委托給父級元素來進行處理，這便是事件委托。

如果我們在每個元素上都進行監聽的話，則需要綁定三個事件;(假設頁面上有a,b,c三個兄弟節點)

function clickEventFunction(e) {
  console.log(e.target===this); // logs `true`
  // 這里可以用 this 獲取當前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通過將事件添加到它們的父節點，而將事件委托給父節點來觸發處理函數：

function clickEventFunction(event) {
  console.log(e.target===this); // logs `false`
  // 獲取被點擊的元素
  const eventTarget=event.target;
  // 檢查源元素`event.target`是否符合預期
  // 此處控制廣告面板的展示內容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問題呢？

綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進行事件綁定。

常見的使用方式主要是上述這種列表結構，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數量內容較大的時候，對成千上萬節點進行事件監聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監聽，也是在前端性能優化中比較簡單和基礎的一個做法。

注意:

如果我們直接在document.body上進行事件委托，可能會帶來額外的問題;
由于瀏覽器在進行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區域進行標記，被標記的區域會與主線程進行通信。
如果我們document.body上被綁定了事件，這時候整個頁面都會被標記;
即使我們的頁面不關心某些部分的用戶交互，合成器線程也必須與主線程進行通信，并在每次事件發生時進行等待。這種情況，我們可以使用passive: true選項來解決

五、總結

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關概念。

文：https://www.cnblogs.com/ityouknow/p/10372752.html

Spring 5.0 中發布了重量級組件 Webflux，拉起了響應式編程的規模使用序幕。

WebFlux 使用的場景是異步非阻塞的，使用 Webflux 作為系統解決方案，在大多數場景下可以提高系統吞吐量。Spring Boot 2.0 是基于 Spring5 構建而成，因此 Spring Boot 2.X 將自動繼承了 Webflux 組件，本篇給大家介紹如何在 Spring Boot 中使用 Webflux 。

為了方便大家理解，我們先來了解幾個概念。

響應式編程

在計算機中，響應式編程或反應式編程（英語：Reactive programming）是一種面向數據流和變化傳播的編程范式。這意味著可以在編程語言中很方便地表達靜態或動態的數據流，而相關的計算模型會自動將變化的值通過數據流進行傳播。

例如，在命令式編程環境中，a=b+c 表示將表達式的結果賦給 a，而之后改變 b 或 c 的值不會影響 a 。但在響應式編程中，a 的值會隨著 b 或 c 的更新而更新。

響應式編程是基于異步和事件驅動的非阻塞程序，只需要在程序內啟動少量線程擴展，而不是水平通過集群擴展。

用大白話講，我們以前編寫的大部分都是阻塞類的程序，當一個請求過來時任務會被阻塞，直到這個任務完成后再返回給前端；響應式編程接到請求后只是提交了一個請求給后端，后端會再安排另外的線程去執行任務，當任務執行完成后再異步通知到前端。

Reactor

Java 領域的響應式編程庫中，最有名的算是 Reactor 了。Reactor 也是 Spring 5 中反應式編程的基礎，Webflux 依賴 Reactor 而構建。

Reactor 是一個基于 JVM 之上的異步應用基礎庫。為 Java 、Groovy 和其他 JVM 語言提供了構建基于事件和數據驅動應用的抽象庫。Reactor 性能相當高，在最新的硬件平臺上，使用無堵塞分發器每秒鐘可處理 1500 萬事件。

簡單說，Reactor 是一個輕量級 JVM 基礎庫，幫助你的服務或應用高效，異步地傳遞消息。Reactor 中有兩個非常重要的概念 Flux 和 Mono 。

Flux 和 Mono

Flux 和 Mono 是 Reactor 中的兩個基本概念。Flux 表示的是包含 0 到 N 個元素的異步序列。在該序列中可以包含三種不同類型的消息通知：正常的包含元素的消息、序列結束的消息和序列出錯的消息。當消息通知產生時，訂閱者中對應的方法 onNext(), onComplete()和 onError()會被調用。

Mono 表示的是包含 0 或者 1 個元素的異步序列。該序列中同樣可以包含與 Flux 相同的三種類型的消息通知。Flux 和 Mono 之間可以進行轉換。對一個 Flux 序列進行計數操作，得到的結果是一個 Mono對象。把兩個 Mono 序列合并在一起，得到的是一個 Flux 對象。

WebFlux 是什么？

WebFlux 模塊的名稱是 spring-webflux，名稱中的 Flux 來源于 Reactor 中的類 Flux。Spring webflux 有一個全新的非堵塞的函數式 Reactive Web 框架，可以用來構建異步的、非堵塞的、事件驅動的服務，在伸縮性方面表現非常好。

非阻塞的關鍵預期好處是能夠以小的固定數量的線程和較少的內存進行擴展。在服務器端 WebFlux 支持2種不同的編程模型：

基于注解的 @Controller 和其他注解也支持 Spring MVC
Functional 、Java 8 lambda 風格的路由和處理

如圖所示，WebFlux 模塊從上到下依次是 Router Functions、WebFlux、Reactive Streams 三個新組件。

Router Functions
對標準的 @Controller，@RequestMapping 等的 Spring MVC 注解，提供一套函數式風格的 API，用于創建 Router、Handler 和Filter。
WebFlux
核心組件，協調上下游各個組件提供響應式編程支持。
Reactive Streams
一種支持背壓 (Backpressure) 的異步數據流處理標準，主流實現有 RxJava 和 Reactor，Spring WebFlux 集成的是 Reactor。

默認情況下，Spring Boot 2 使用 Netty WebFlux，因為 Netty 在異步非阻塞空間中被廣泛使用，異步非阻塞連接可以節省更多的資源，提供更高的響應度。通過比較 Servlet 3.1 非阻塞 I / O 沒有太多的使用，因為使用它的成本比較高，Spring WebFlux 打開了一條實用的通路。

值得注意的是：支持 reactive 編程的數據庫只有 MongoDB, redis, Cassandra, Couchbase

Spring Webflux

Spring Boot 2.0 包括一個新的 spring-webflux 模塊。該模塊包含對響應式 HTTP 和 WebSocket 客戶端的支持，以及對 REST，HTML 和 WebSocket 交互等程序的支持。一般來說，Spring MVC 用于同步處理，Spring Webflux 用于異步處理。

Spring Boot Webflux 有兩種編程模型實現，一種類似 Spring MVC 注解方式，另一種是基于 Reactor 的響應式方式。

快速上手

添加 webflux 依賴

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

通過 IEDA 的依賴關系圖我們可以返現spring-boot-starter-webflux依賴于spring-webflux、Reactor 和 Netty 相關依賴包。

創建 Controller

@RestController
public class HelloController {
 @GetMapping("/hello")
 public Mono<String> hello() {
 return Mono.just("Welcome to reactive world ~");
 }
}

通過上面的示例可以發現，開發模式和之前 Spring Mvc 的模式差別不是很大，只是在方法的返回值上有所區別。

just() 方法可以指定序列中包含的全部元素。
響應式編程的返回值必須是 Flux 或者 Mono ，兩者之間可以相互轉換。

測試類

@RunWith(SpringRunner.class)
@WebFluxTest(controllers=HelloController.class)
public class HelloTests {
 @Autowired
 WebTestClient client;
 @Test
 public void getHello() {
 client.get().uri("/hello").exchange().expectStatus().isOk();
 }
}

運行測試類，測試用例通過表示服務正常。啟動項目后，訪問地址：http://localhost:8080/hello，頁面返回信息：

Welcome to reactive world ~

證明 Webflux 集成成功。

以上便是 Spring Boot 集成 Webflux 最簡單的 Demo ，后續我們繼續研究 Webflux 的使用。

在線咨詢

上一篇：有哪些可以提高效率的網頁版工具，是你不知道的？
下一篇：Word辦公技巧：文本框中的數字和英文字母如何進行豎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

響應式網站是什么？響應式網站如何搭建？

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結

您的項目需求

家好，我是皮皮。

五、總結