简单小程序：登录页面（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小时内与您取得联系。

整合营销服务商