簡單小程序：登錄頁面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

高級前端進階

今天給大家帶來的主題是 SolidJS，話不多說，直接開始！

1.什么是 Solid

Solid 是一個用于創建用戶界面的聲明式 JavaScript 庫。它不使用虛擬 DOM，而是將其模板編譯為真實的 DOM 節點，并使用細粒度的反應更新它們。 Solid 聲明狀態并在整個應用程序中使用，當一個狀態發生變化時，只有依賴它的代碼會重新運行。

目前 Solid 在 Github 上有超過 27.2k 的 start、720+的 fork、14.8k 的項目依賴量，140+的代碼貢獻者，NPM 周下載量達到了 90k，是妥妥的前端明星項目。Solid 框架本身具有以下明顯特性。

2.Solid 框架的特點

2.1 接近 React 但放棄虛擬 DOM

Solid 站在 React, Knockout 等巨人的肩膀上。如果之前用 React Hooks 開發，Solid 應該看起來很自然。事實上，Solid 模型更簡單，沒有 Hook 規則。每個組件執行一次，隨著依賴項的更新，鉤子和綁定會多次執行。

Solid 遵循與 React 相同的理念，具有單向數據流、讀/寫隔離和不可變接口。但是放棄了使用虛擬 DOM，使用了完全不同的實現。

import { render } from 'solid-js/web';
import { onCleanup, createSignal } from 'solid-js';
const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  const interval = setInterval(() => setCount((count) => count + 1), 1000);
  onCleanup(() => clearInterval(interval));
  return <div>Count value is {count()}</div>;
};
render(() => <CountingComponent />, document.getElementById('app'));

2.2 細粒度的響應性

Solid 的細粒度反應系統使開發人員能夠精確地管理狀態更新，確保在數據更改時只更新必要的組件。這會帶來更快的更新、更少的重新渲染和更流暢的整體用戶體驗。

import { render } from "solid-js/web";
import { createSignal } from "solid-js";
function Counter() {
  const [count, setCount] = createSignal(1);
    // 信號的細粒度更新機制（我在其他文章中重點講解過）
  const increment = () => setCount(count() + 1);
  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <Counter />, document.getElementById("app")!);

總之，Solid 解鎖了對更新內容和時間的完全控制，即使在 DOM 綁定級別也是如此。沒有虛擬 DOM 或廣泛的差異對比，框架永遠不會做額外工作。

2.3 專注于性能

無論是客戶端還是服務端渲染，Solid 都專注于性能。下面是服務端渲染的客戶端代碼:

import { hydrate } from 'solid-js/web';
hydrate(() => <App />, document);

對應的服務端渲染代碼如下:

import {
  renderToString,
  renderToStringAsync,
  renderToStream,
} from 'solid-js/web';
// 同步渲染字符串
const html = renderToString(() => <App />);
// 異步渲染字符串
const html = await renderToStringAsync(() => <App />);
// 渲染到 Stream
const stream = renderToStream(() => <App />);
// Node
stream.pipe(res);
// Web streams (for like Cloudflare Workers)
const { readable, writable } = new TransformStream();
stream.pipeTo(writable);

細粒度響應式這一策略，使得 Solid 在所有顯眼的基準測試中大放異彩。雖然性能可能不完全是開發者的關注點，但最終會影響到用戶體驗。

Solid 本身無需額外的開發復雜度就可以獲得很好的性能，即無需特意調優就可以運行很快，在渲染速度和內存使用方面始終優于其他流行的框架。在某些測試中比 React 高出 40% 以上，以下是不同框架的性能數據對比：

除了 Vanilla JavaScript 外，Solid 是運行最快的前端框架。Solid 充分利用其編譯器執行優化，例如：刪除未使用的代碼和最小化組件重新渲染，從而顯著提高性能，使 Solid 應用程序的性能優于許多使用傳統框架構建的應用程序。

3.Solid 和 React 對比

3.1 React 和 Solid 區別概覽

從表面上看，Solid 和 React 似乎密切相似，都可用于創建單頁應用程序 (SPA)。雖然兩者的開發人員體驗幾乎相同，但每個框架的底層機制卻截然不同。

兩個 SPA 框架都負責劃分應用程序的網頁結構和功能，但在瀏覽器中，框架以不同方式處理頁面的 HTML 元素以提供所需的用戶體驗。 Solid 和 React 在文檔對象模型 (DOM) 的使用上有著顯著不同。

下表總結并展示了 React 和 Solid 的主要區別：

需要重點關注的幾個點分別是：直接操作DOM、避免組件重復渲染、高性能、豐富的社區和生態系統，這也構成了兩個框架的主要區別。

3.2 組件結構

React 和 Solid 具有完全相同的編程結構和對組件的支持（獨立的、可重用的代碼片段）。

在現代 React 和 Solid 中，一個組件由一個以屬性作為參數的渲染函數組成，加上每個組件的 JSX，代碼緊湊簡潔。 JSX 易于理解，并允許有經驗的開發人員在其定義中直觀地描述組件模型。

React 和 Solid 提供相同的組件，但每個框架都有獨特的渲染方法。 React 組件每次都渲染（除非使用記憶），而 Solid 組件只渲染一次。

import { useMemo } from 'react';
function TodoList({ todos, tab }) {
  // useMemo 是一個 React Hook，可讓您在重新渲染之間緩存計算結果。
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
}

兩個框架之間的另一個區別是它們啟用組件功能的不同特性。

3.3 組件功能

沒有功能的組件只是標記，那么 React 和 Solid 是如何讓組件可操作的呢？其實，兩者的做法是相似的。

Hooks 和反應式原語都是連接到相應的 React 和 Solid 變更系統的一種方式。總的來說，這兩個框架以相似的方式處理組件功能，但使用不同的方法或術語來實現。

State：React 中使用 useState 函數，在 Solid 中，稱為 signal，對應的創建函數 createSignal。State 和信號包含組件數據（以 props 的形式），使框架能跟蹤值的變化。并且當框架檢測到更改時，將使用相應的值重新渲染
Effect：Effect 是一種特殊功能，是 React 和 Solid 的核心構建塊。不是響應用戶與瀏覽器的直接交互，而是在組件狀態更改時觸發 Effect，類似于回調或事件偵聽器。React 使用 useEffect 函數定義 Effect，而 Solid 使用 createEffect 函數。
Memoization：Memoization 通過緩存昂貴的組件渲染結果，并在適當的時候使用緩存值而不是重新計算值來優化框架性能。在 React 中，使用 memo（純函數）、useCallback（依賴函數 props 的組件）、useMemo（昂貴的操作和組件操作）三個鉤子來實現 Memoization。

React 依賴于 Memoization 來使應用程序快速渲染。相比之下，由于其優化的更改跟蹤和 DOM 使用，Solid 很少需要顯式記憶。對于組件屬性更改不需要渲染更新的極端情況，Solid 通過稱為 createMemo 的單一方法管理記憶。

const fib = createMemo(() => {
  console.log('Calculating Fibonacci');
  return fibonacci(count());
});

3.4 性能

SolidsJS 和 React 性能差異的焦點在于兩者如何更新 DOM。

React 給了一個輕量級的虛擬 DOM 來與瀏覽器的實際 DOM 交互，數據變化后將更新后的虛擬 DOM 與瀏覽器的 DOM 進行比較，并將識別出的更改同步到實際頁面結構（即 DOM）中。

因為 React 默認依賴于更新的 DOM 差異計算來重新渲染組件，即 React 做了兩次工作。由于它每次都會渲染組件，因此 React 需要 Memoization 以避免不必要的重復計算。

相比之下，Solid 通過使用一種稱為細粒度反應性的機制來直接操縱瀏覽器的 DOM，從而提供了更輕的內存占用以及頁面編輯和注入代碼的極快應用程序。

細粒度的反應性跟蹤可變的相互依賴性。基于變量依賴和編輯鏈，Solid 限制頁面結構更新以僅反映發生變化的內容，避免不必要的組件渲染。與 React 相比，這導致了巨大的性能改進。

本文總結

從某些角度來看，Solid 明顯是兩者中贏家，Solid 與 React 的強大功能相匹配。此外，Solid 還為最終用戶提供了 React 無法比擬的快速響應能力。

同時，Solid 利用了 React 生命周期中學到的知識、結構和抽象方法，幾乎沒有學習曲線。因此，個人非常建議從今天開始使用 Solid，它可能是前端的未來！

因為篇幅有限，文章并沒有過多展開，如果有興趣，文末的參考資料提供了優秀文檔以供學習。最后，歡迎大家點贊、評論、轉發、收藏！

參考資料

https://github.com/krausest/js-framework-benchmark

https://www.solidjs.com/

https://www.solidjs.com/guides/getting-started#服務端渲染

https://www.solidjs.com/docs/latest/api

https://kruschecompany.com/introducing-solidjs-javascript-framework/

https://www.toptal.com/react/solidjs-vs-react

https://github.com/solidjs/solid

https://www.solidjs.com/guides/server

https://react.dev/reference/react/useMemo

https://www.solidjs.com/tutorial/introduction_memos

PC端進行網頁制作時，經常使用固定像素并且內容居中的網頁布局，為了適應小屏幕的設備，在移動設備和跨平臺(響應式)網頁開發過程中，多數使用流式布局，下面我們就對流式布局進行詳細介紹。

流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設置寬度，也稱百分比自適應的布局。流式布局實現方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標元素寬度/父盒子寬度=百分數寬度下面通過一個案例來演示固定布局如何轉換為百分比布局，如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局轉換為百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; height:auto; margin:0 auto;
				margin-top:10px;
				border:1px solid #000; padding:5px;}
		header{ height:50px;}
		section{ height: 300px;}
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left;}
		aside{ width:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。

可以嘗試改變瀏覽器窗口的大小，頁面元素的大小不會隨瀏覽器窗口改變，如下圖所示。

下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:

	<style type="text/css">
		body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
               border:1px solid #000; padding :5px; }
		header{ height:50px; }
		section{ height: 300px; }
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left; }
		aside{ width:25.510204%; /*250÷980*/}
		article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
	</style>

刷新頁面，縮小瀏覽器，頁面按百分比隨瀏覽器逐漸縮小，顯示完整，頁面效果如下圖所示：

在線咨詢

上一篇：HTML代碼中的空格和空行
下一篇：CKEditor5導入并解析word功能的集成，實現word轉html

您的項目需求

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

整合營銷服務商