# 事件循环

## 浏览器的进程模型

### 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZV4E..png)


每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

### 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVBS..png)

### 浏览器有哪些进程和线程？

**浏览器是一个多进程多线程的应用程序**

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVJ6..png)

> 可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（本节课重点讲解的进程）

   渲染进程启动后，会开启一个**渲染主线程**，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

## 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![image-20220809223027806](http://mdrs.yuanjin.tech/img/202208092230847.png)

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

**整个过程，被称之为事件循环（消息循环）**

## 若干解释

### 何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

- 计时完成后需要执行的任务 —— `setTimeout`、`setInterval`
- 网络通信完成后需要执行的任务 -- `XHR`、`Fetch`
- 用户操作后需要执行的任务 -- `addEventListener`

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZUX0..png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVQK..png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 
>
> 参考答案：
>
> JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

### JS为何会阻碍渲染？

先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

### 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
  https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- 延时队列：用于存放计时器到达后的回调任务，优先级「中」
- 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
- 微队列：用户存放需要最快执行的任务，优先级「最高」

> 添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
>
> 
>
> 例如：
>
> ```js
> // 立即把一个函数添加到微队列
> Promise.resolve().then(函数)
> ```

> 浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

> 面试题：阐述一下 JS 的事件循环
>
> 
>
> 参考答案：
>
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
>
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
>
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
>
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

> 面试题：JS 中的计时器能做到精确计时吗？为什么？
>
> 
>
> 参考答案：
>
> 不行，因为：
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
> 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
> 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

深入剖析JavaScript的事件循环

### 实现一个类似于jQuery功能的轻量级框架

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

#### 一、项目结构与设计思路

##### 1. 项目结构
我们的项目将分为几个主要模块：
- **主框架**：用于获取DOM元素集合并支持链式调用。
- **公共框架**：包含字符串处理、数组操作、数据类型检测等通用功能。
- **事件框架**：实现事件绑定和解绑功能。
- **CSS框架**：提供CSS类操作、元素显示隐藏、尺寸获取等功能。
- **属性框架**：操作DOM元素的属性。
- **内容框架**：操作DOM元素的内容（HTML、文本、值）。
- **动画框架**：实现简单的动画效果。

##### 2. 设计思路
- **链式调用**：通过返回一个对象实例本身来支持链式调用。
- **扩展性**：使用`extend`方法允许动态添加方法。
- **模块化**：每个功能模块都封装在单独的闭包中，以减少全局变量的污染。

#### 二、实现主框架

首先，我们需要实现一个基础的框架，能够获取DOM元素并支持链式调用。

```javascript
(function (w) {
    var xframe = function (selector, context) {
        return this.init.apply(this, [selector, context]);
    };

    xframe.prototype.init = function (selector, context) {
        this.length = 0;
        if (typeof selector === 'string') {
            var nodeList = (context || document).querySelectorAll(selector);
            this.length = nodeList.length;
            for (var i = 0; i < this.length; i++) {
                this[i] = nodeList[i];
            }
        } else if (selector.nodeType) {
            this[0] = selector;
            this.length = 1;
        }
        return this;
    };

    var $$ = function (selector, context) {
        if (typeof selector === 'function') {
            w.onload = selector;
        } else {
            return new xframe(selector, context);
        }
    };

    $$.extend = function () {
        var len = arguments.length, target = null, i = 1, key;
        if (len === 0) return;
        if (len === 1) {
            target = xframe.prototype;
            i--;
        } else {
            target = arguments[0];
        }
        for (; i < len; i++) {
            for (key in arguments[i]) {
                target[key] = arguments[i][key];
            }
        }
        return target;
    };

    w.xframe = w.$ = $$;
})(window);
```

#### 三、实现功能模块

##### 1. 公共框架

公共框架包含一些基础的功能，如字符串处理、数组操作等。这里仅给出结构，具体实现可根据需求编写。

```javascript
(function (xframe) {
    // 字符串处理模块
    xframe.extend(xframe, {
        // 实现 ltrim, rtrim, trim 等方法
    });

    // 数组相关模块
    xframe.extend(xframe, {
        // 实现数组操作方法
    });

    // 数据类型检验模块
    xframe.extend(xframe, {
        isNumber: function (obj) {
            return typeof obj === 'number' && !isNaN(obj);
        },
        // 实现其他数据类型检测方法
    });
})(xframe);
```

##### 2. 事件框架

事件框架实现事件绑定和解绑功能。

```javascript
(function (xframe) {
    xframe.extend({
        on: function (event, handler) {
            return this.each(function (index, element) {
                element.addEventListener(event, handler);
            });
        },
        // 实现 off 方法
    });
})(xframe);
```

##### 3. CSS框架

CSS框架提供CSS类操作、元素显示隐藏、尺寸获取等功能。

```javascript
(function (xframe) {
    xframe.extend({
        css: function (property, value) {
            return this.each(function (index, element) {
                element.style[property] = value;
            });
        },
        show: function () {
            return this.css('display', '');
        },
        hide: function () {
            return this.css('display', 'none');
        },
        // 实现其他CSS相关方法
    });
})(xframe);
```

##### 4. 属性框架

属性框架提供操作DOM元素属性的方法。

```javascript
(function (xframe) {
    xframe.extend({
        attr: function (name, value) {
            if (value !== undefined) {
                return this.each(function (index, element) {
                    element.setAttribute(name, value);
                });
            } else {
                return this[0] ? this[0].getAttribute(name) : null;
            }
        },
        addClass: function (className) {
            return this.each(function (index, element) {
                element.classList.add(className);
            });
        },
        removeClass: function (className) {
            return this.each(function (index, element) {
                element.classList.remove(className);
            });
        },
    });
})(xframe);
```

##### 5. 内容框架

内容框架提供操作DOM元素内容的方法。

```javascript
(function (xframe) {
    xframe.html = function (htmlString) {
        if (htmlString !== undefined) {
            return this.each(function (index, element) {
                element.innerHTML = htmlString;
            });
        } else {
            return this[0] ? this[0].innerHTML : null;
        }
    };

    xframe.text = function (textString) {
        if (textString !== undefined) {
            return this.each(function (index, element) {
                element.textContent = textString;
            });
        } else {
            return this[0] ? this[0].textContent : null;
        }
    };

    xframe.val = function (value) {
        if (value !== undefined) {
            return this.each(function (index, element) {
                element.value = value;
            });
        } else {
            return this[0] ? this[0].value : null;
        }
    };
})(xframe);
```

##### 6. 动画框架

动画框架实现简单的动画效果。这里只给出结构，具体实现可根据需求编写。

```javascript
(function () {
    function Animate() {
        // 动画实现
    }

    Animate.prototype = {
        // 动画方法
    };

    // 将Animate绑定到xframe上
    xframe.animate = function (options) {
        return new Animate(this, options);
    };
})();
```

#### 四、总结

通过以上步骤，我们实现了一个类似于jQuery功能的轻量级框架`Xframe`。它包含了获取DOM元素、事件处理、CSS操作、属性操作、内容操作以及动画功能。你可以根据自己的需求，进一步完善和扩展这个框架。

`Xframe`不仅可以帮助你理解jQuery的底层实现原理，还可以作为一个轻量级的选择，满足你项目中特定的需求。希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

jQuery框架源码解析与实现

实现一个类似于jQuery功能的轻量级框架


> 在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

#### 一、Next.js的SEO优势

Next.js提供了多种内置功能，使得开发者能够轻松实现SEO优化。这些功能包括但不限于：

1. **自动处理`<head>`标签**：Next.js提供了`Head`组件，允许开发者动态管理页面的元信息，如标题、描述、canonical等。
2. **预渲染技术**：Next.js支持静态生成（Static Generation, SG）和服务器端渲染（Server-Side Rendering, SSR），这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。
3. **基于文件的路由系统**：Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。
4. **next-seo库**：next-seo是一个专门为Next.js设计的库，它提供了一组React组件，允许开发者轻松地将与SEO相关的元标记添加到页面中。

#### 二、Next.js SEO优化方案

##### 1. 使用`Head`组件管理页面元信息

Next.js的`Head`组件允许开发者在页面中设置和管理`<head>`标签，这些标签对于搜索引擎来说非常重要。通过`Head`组件，可以设置页面的标题、描述信息以及关键词等，从而吸引搜索引擎和用户的关注，提升网站在搜索结果中的点击率。

```jsx
import Head from 'next/head';

const HomePage = () => (
  <>
    <Head>
      <title>Home Page</title>
      <meta name="description" content="This is the description of the Home Page" />
    </Head>
    <h1>Welcome to the Home Page!</h1>
  </>
);

export default HomePage;
```

##### 2. 使用next-seo库添加元标记

next-seo是一个流行的库，它允许开发者轻松地将与SEO相关的元标记添加到Next.js应用程序中。搜索引擎使用这些标签（如标题和描述标签）来了解页面内容并将其显示在搜索结果中。

首先，需要安装next-seo库：

```bash
npm install next-seo
# 或者
yarn add next-seo
```

然后，在页面中导入并使用next-seo组件：

```jsx
import Head from 'next/head';
import { DefaultSeo, SEO } from 'next-seo';

const Home = () => {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <SEO
        title="My Next.js App"
        description="This is my Next.js app, it's awesome!"
        openGraph={{
          title: 'My Next.js App',
          description: 'This is my Next.js app, it\'s awesome!',
          url: 'https://mynextjsapp.com',
          images: [
            {
              url: 'https://mynextjsapp.com/og-image.jpg',
              alt: 'My Next.js App',
            },
          ],
          site_name: 'My Next.js App',
        }}
      />
      <p>Welcome to my Next.js app!</p>
    </div>
  );
};

export default Home;
```

在这个示例中，我们使用了`SEO`组件来设置页面的标题、描述以及OpenGraph标签。同时，`Head`组件中也设置了标题标签，这是Next.js中添加元标签的标准方式。

##### 3. 优化URL结构

合理的URL结构能提升搜索引擎对网站的认可度，从而带来更好的排名和流量。Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。此外，Next.js还支持动态路由，允许开发者创建具有良好结构的URL。

```jsx
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return <p>Post: {id}</p>;
};

export default Post;
```

在这个示例中，我们创建了一个动态路由页面`Post`，通过`useRouter`钩子获取路由参数`id`，并将其显示在页面中。

##### 4. 内容质量和关键词优化

除了技术层面的优化，还需要关注网站的内容质量和关键词优化。Next.js的静态生成和服务端渲染能够帮助实现高质量的内容展示，而在内容中合理地布局关键词，并进行内部链接的优化，也是提升网站SEO的重要策略。

##### 5. 使用预渲染技术提升性能

Next.js提供了静态生成和服务器端渲染两种预渲染技术，这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。同时，预渲染技术还能显著提升页面加载速度和服务器资源利用率。

- **静态生成**：适用于内容相对固定、更新频率较低的页面。

```jsx
export const getStaticProps = async () => {
  const posts = await fetchPostsFromApi(); // 获取静态数据
  return {
    props: { posts },
    revalidate: 60, // 可选，指定数据刷新间隔（秒）
  };
};

function HomePage({ posts }) {
  // 页面渲染逻辑
}
```

- **服务器端渲染**：适用于需要实时数据、个性化内容或动态路由的应用场景。

```jsx
export const getServerSideProps = async (context) => {
  const currentUserId = context.req.user?.id; // 从请求上下文中获取当前用户ID
  const personalizedData = await fetchPersonalizedData(currentUserId); // 获取实时数据
  return {
    props: { personalizedData },
  };
};

function UserProfilePage({ personalizedData }) {
  // 页面渲染逻辑
}
```

##### 6. 图片优化

在网站开发中，图片通常是占用较大资源的内容。Next.js提供了`Image`组件来进行图片优化，包括懒加载、响应式加载等策略，以提升页面的加载速度和性能表现。

```jsx
import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      <Image
        src={post.featuredImage.url}
        alt={post.title}
        width={800}
        height={450}
        layout="responsive"
      />
      {/* 页面内容 */}
    </>
  );
}
```

##### 7. 代码分割和懒加载

Next.js支持代码分割和按需加载，通过动态导入和懒加载的方式，可以将页面和组件进行分割，按需加载，以减少初始加载时的资源压力，提升页面的响应速度。

```jsx
const SomeComponent = React.lazy(() => import('../components/SomeComponent'));

function MyPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}
```

##### 8. 缓存策略

通过合理地设置HTTP缓存策略、使用CDN加速等手段，可以有效地提升网站的访问速度和性能表现，为用户提供更好的体验。

#### 三、总结

Next.js凭借其强大的静态生成、服务器端渲染以及对SEO的深度支持，已成为构建高性能、高SEO友好Web应用的首选框架之一。通过合理的URL结构、页面标题和描述、内容质量和关键词优化，以及图片优化、代码分割和懒加载、缓存策略等手段，可以提升网站在搜索引擎中的排名，以及网站的加载速度和用户体验。这些策略都是基于Next.js丰富的特性和工具而提供的，可以帮助开发者构建性能优秀、SEO友好的Web应用。

在Next.js的SEO优化过程中，next-seo库是一个不可或缺的工具，它使得添加和管理SEO元标记变得更加容易和高效。同时，Next.js的预渲染技术、动态路由、图片优化等功能也为SEO优化提供了强有力的支持。

作为开发者，我们应该充分利用Next.js的这些功能和工具，不断优化和提升网站的SEO效果，从而为网站带来更多的流量和曝光机会。希望本文能够为你的Next.js SEO优化之路提供一些有用的启示和帮助。

在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

Next.js SEO优化方案全解析


## 背景
平时学习的时候，我是用两个不同系统的设备，第一个是我的Macbook（聊微信。。），第二个是实验室的Windows台式机（学习，嘿嘿）。但是经常需要两个设备相互之间传文件，刚开始使用网盘（one drive），后来发现还是不够方便，有一天突然在b站上看到了一个方法，感觉我好像符合这个方法的条件，所以自己也试了一下，结果发现更加方便了！

要求：需要你的设备在同一个局域网内（假如有路由器，你的设备就是在同一个局域网里了）

苹果设备之间传文件用隔空投送即可。
下面的是Windows共享文件夹的操作，实现Windows和苹果设备的文件传输

## 方法
在Windows中某个盘里（例如我是E盘）创建一个文件夹-》右键属性-》共享-》选择用户；这时候有个问题，首先确定你的用户对这个文件夹有所有的读写改的权限，如果没有的话，在安全这个位置修改；
![图片](https://api.gaoredu.com/public/uploads/2024-12-15/2PTIHZDNAI8YPSHNNYJ64I..png)

接下来在Mac中打开Finder-》左上角前往-》连接服务器；
![图片](https://api.gaoredu.com/public/uploads/2024-12-15/2PTIHZDNAI8YPSHNNYJ67I..png)

输入你Windows的ip地址-》填写用户名和密码-》这样就可以看到共享的文件夹了！
![图片](https://api.gaoredu.com/public/uploads/2024-12-15/2PTIHZDNAI8YPSHNNYJ6AI..png)
完成！

对了，注意！！！一定要在同个网段内才能共享哦！

本文介绍了Windows和Mac电脑局域网的数据共享方式。


Windows和Mac电脑的局域网文件共享方法

### rem 与 em：CSS中的相对单位深度解析

在Web开发中，字体大小的控制是至关重要的。它不仅影响着网页的可读性，还直接关系到整体的设计美感。在CSS中，我们有两种主要的相对单位来设置字体大小：rem和em。尽管它们看起来相似，但实际上，它们的工作原理和应用场景有着显著的差异。今天，我们就来深入了解一下这两个单位。

#### 一、rem：全局的相对单位

**定义**：
rem，全称“root em”，是一个相对于HTML文档的根元素（即<html>标签）的字体大小的单位。这意味着，无论你在文档的哪个位置，使用rem设置的字体大小都会基于根元素的字体大小进行计算。

**工作原理**：
假设根元素的字体大小设置为16px（这是许多浏览器的默认值），那么1rem就等于16px。如果你将某个元素的字体大小设置为2rem，那么它的字体大小就会是32px（16px * 2）。

**应用场景**：
rem单位非常适合用于全局的字体大小设置。通过调整根元素的字体大小，你可以轻松地改变整个网站的字体大小，而无需逐个修改每个元素的字体大小。这使得rem成为响应式设计中的理想选择，因为你可以根据设备的屏幕尺寸动态地调整根元素的字体大小，从而改变整个网站的字体大小。

#### 二、em：局部的相对单位

**定义**：
em是一个相对于其父元素的字体大小的单位。这意味着，使用em设置的字体大小会根据其父元素的字体大小进行计算。

**工作原理**：
如果父元素的字体大小为16px，那么1em就等于16px。如果你将某个子元素的字体大小设置为2em，那么它的字体大小就会是父元素字体大小的两倍，即32px。如果父元素的字体大小发生了变化，那么子元素使用em设置的字体大小也会相应地发生变化。

**应用场景**：
em单位更适合用于局部的字体大小设置，特别是当你需要相对于父元素的字体大小进行设置时。例如，在创建文本层级时，你可以使用不同的em值来设置不同层级的字体大小，从而创建更加灵活和可伸缩的布局。

#### 三、rem与em的对比

1. **全局与局部**：
   - rem是全局的相对单位，它基于根元素的字体大小进行计算。
   - em是局部的相对单位，它基于父元素的字体大小进行计算。

2. **可读性和一致性**：
   - 使用rem可以更容易地实现全局字体大小的一致性，因为所有使用rem设置的字体大小都会基于同一个根元素进行计算。
   - 使用em可以创建更加灵活和可伸缩的布局，但需要注意父元素字体大小对子元素字体大小的影响。

3. **响应式设计**：
   - rem更适合用于响应式设计，因为你可以通过调整根元素的字体大小来轻松地改变整个网站的字体大小。
   - 虽然em也可以用于响应式设计，但通常需要更多的计算和调整。

#### 四、使用注意事项

- 在使用rem时，需要确保根元素的字体大小被正确设置，以便整个网站的字体大小能够保持一致。
- 在使用em时，需要注意父元素的字体大小对子元素字体大小的影响，以避免出现意外的视觉效果。
- 在进行复杂的布局和样式设计时，可以结合使用rem和em来创建更加灵活和可伸缩的布局。

#### 五、总结

rem和em都是CSS中用于设置字体大小的相对单位，但它们的工作原理和应用场景有所不同。选择使用哪个单位取决于你的具体需求和设计目标。通过了解它们的差异和优势，你可以更好地控制网页的字体大小，从而创建更加美观和可读的网页。

在Web开发中，字体大小的控制是至关重要的。它不仅影响着网页的可读性，还直接关系到整体的设计美感。在CSS中，我们有两种主要的相对单位来设置字体大小：rem和em。尽管它们看起来相似，但实际上，它们的工作原理和应用场景有着显著的差异。今天，我们就来深入了解一下这两个单位。

rem 与 em：CSS中的相对单位深度解析

> 在线手机电脑样机，屏幕截图在线模拟生成器，无需下载就可以快速替换手机、电脑屏幕，制作图片加手机电脑外壳外框的效果。在线工具使用非常简单只要上传图片，调整相应的参数设置即可生成对应的加手机电脑外壳的效果。如果你需要制作网站产品等展示图片，可以使用在线手机电脑样机生成器制作出精美的展示图片。

## 1.Dimmy
Dimmy是一个可以在线把屏幕截图或软件界面等图片放到各种设备上查看展示效果的工具，只要上传图片后，Dimmy就会自动适配到网站提供的所有设备模型中，模拟设备支持笔记本电脑、PC机、各种型号的智能手机、平板电脑，包括Macbook、Surface Book、iMac、iPhone、Google Pixel、Nokia、iPad 和HTC Nexus等。

不错，稍微有点老。

## 2.MockUPhone (推荐)
MockUPhone是一个免费工具，帮助你包装在不同的移动设备应用程序截图。Android支持iPhone模型，iPad模型，模型和电视模型

目前使用了还听好用的。

## 3.Pixeltrue Mockup Generator
自由和简单的装置模型生成器，创造美丽的产品模型只需几次点击!完全免费的。点击上面的开始。5设备类型你会有足够的材料来为您的项目创建漂亮的产品模型和营销活动。

## 4.Shotsnapp
Shotsnapp是一个可以一键生成高逼格样机神器，轻松将您的应用程序界面或者网页设计作品变成漂亮的实体模型。办公人导航分享的Shotsnapp提供了各种设备模板，比如苹果手机、平板电脑、Mac笔记本电脑、PC电脑、智能手表等等样机设备，根据自己的需要修改界面背景图，可以直接使用Unsplash漂亮的图片素材作为背景外观，通过选择精美的字体加上优美的文案完成样机设计作品。

## 5.Deviceshots
Deviceshots是一个能够帮助我们轻松制作出精美的高分辨率样机图片，比如UI设计师需要将作品展示在苹果iphone上，通过上传UI界面图轻松就能生成超高清的样机模型。办公人导航网分享的Deviceshots除了支持手机设备之外，还有平板ipad、笔记本Macbook、手表等。可以自定义修改大小，背景及文字内容等。制作完成后可以免费下载JPG、PNG或SVG格式图片。

## 6.QURB
QURB是一款能让截图画面变得更有质感的Mockup产生器。办公人导航分享的Qurb工具可以让你为画面加入苹果手机、平板电脑或MacBook外框，整体呈现出逼真精美的模型，最后储存为png透明背景的图片格式。内置：iPhoneX/XS/Max、GalaxyNote8、iPhone8、iPhone8Plus、iPhone5s、iPhone5c、iPadMini和MacBookPro的免费模型。

## 7.mockup.photos
Mockup Photos 是一个在线样机效果展示平台，用户可以通过浏览器轻松实现样机效果，无需使用Photoshop或其他工具进行编辑。该网站拥有超过1570个免费可用的样机模型。用户可以直接访问网站，通过下拉浏览或拖动到页面底部的方式寻找所需的样机。Mockup Photos 需要录后下载样机图片。其操作过程非常简单，甚至可以直接输入网址，网站会自动截图并填充样机，实现完全傻瓜式操作。


在线手机电脑样机，屏幕截图在线模拟生成器，无需下载就可以快速替换手机、电脑屏幕，制作图片加手机电脑外壳外框的效果。在线工具使用非常简单只要上传图片，调整相应的参数设置即可生成对应的加手机电脑外壳的效果。如果你需要制作网站产品等展示图片，可以使用在线手机电脑样机生成器制作出精美的展示图片。