Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。



前端

在使用Chrome开发者工具（DevTools）调试iframe时，主要步骤如下：

1. **打开Chrome DevTools：**
   您可以通过在Chrome浏览器中按 `F12`键，或者点击浏览器右上角的三个点选择“更多工具”然后点击“开发者工具”来打开DevTools。
2. **定位到iframe元素：**
   在Elements面板中，可以通过DOM树状结构寻找到 `<iframe>`标签。如果页面中iframe较多，可能需要一些时间来定位。也可以利用DevTools顶部的元素选择工具（点击左上角的图标或按 `Ctrl + Shift + C`）来快速选中页面上的iframe。
3. **审查iframe内容：**
   选中iframe元素后，右键点击并选择“Show as tab”。这样会在Elements面板中打开一个新的标签页，显示被选中的iframe的DOM结构。在这个新标签页中，您可以像审查常规的HTML元素一样来审查和修改iframe的内容。
4. **使用Console面板与iframe交互：**
   在Console面板中，您可以通过 `frames`数组访问各个iframe的window对象。例如，`frames[0]`代表第一个iframe的window对象。您可以执行JavaScript代码来与iframe内部的脚本交互。
5. **调试JavaScript：**
   如果要调试iframe中的JavaScript代码，您可以在Sources面板中找到iframe的JavaScript文件。在文件中设置断点，然后通过与网页交互或者触发事件来激活断点，之后就可以逐行调试代码。
6. **网络请求分析：**
   在Network面板中查看iframe加载期间的网络请求。您可以过滤显示仅限于iframe的请求，这样就可以分析iframe的资源加载情况、网络延迟等问题。
7. **性能分析：**
   使用Performance面板来分析iframe中网页的加载和运行性能。您可以记录一个性能会话然后分析各种事件，例如JavaScript的执行时间、样式的计算、布局的重排等。
8. **跨域iframe调试：**
   如果iframe内容是从另一个域加载的，可能会因为同源策略受到限制。在这种情况下，如果您有权限，可以在服务器端设置CORS（跨源资源共享）策略来允许调试。否则，您只能调试在同一源（即相同的协议、域名和端口）上加载的iframe。

举个例子，假设您正在开发一个集成了多个第三方服务的仪表盘，每个服务都通过一个独立的iframe来加载。您可能需要调试其中一个服务的登录流程，这时您可以通过上述步骤来打开DevTools，选择相应的iframe标签，然后在Sources面板中设置断点来观察登录过程中触发的函数调用和变量状态。

使用Chrome开发者工具调试iframe时，耐心和细心是非常重要的。确保您有适当的权限和访问控制，特别是在处理跨域iframe时。


在 Chrome 的开发者工具中，顶部有一个栏，称为`Execution Context Selector`(h/t [felipe-sabino](https://stackoverflow.com/users/429521/felipe-sabino) )，位于“元素”选项卡下方，该栏根据当前选项卡的上下文而变化。在“控制台”选项卡中时，该栏中有一个下拉列表，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您将发现自己处于适当的框架上下文中。：D

**铬 v59** ![Chrome 版本 59](https://i.stack.imgur.com/dqpt6.png)

**铬 v33** ![Chrome 版本 33](https://i.stack.imgur.com/nR0Cj.png)

**Chrome v32 及更低版本** ![Chrome 32 之前版本](https://i.stack.imgur.com/945eW.png)

目前，控制台中的评估是在页面主框架的上下文中执行的，并且它遵循与主框架本身相同的跨域策略。这意味着除非主框架可以访问 iframe 中的元素，否则您无法访问。不过，您仍然可以使用“脚本”面板设置断点并调试代码。

**更新：**这不再是真的。请参阅[Metagrapher 的回答](https://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools#8581276)。

当 iFrame 像这样指向您的网站时：

    <html>
      <head>
        <script type="text/javascript" src="/jquery.js"></script>
      </head>
      <body>
        <iframe id="my_frame" src="/wherev"></iframe>
      </body>
    </html>
    

你可以通过这种东西访问iFrame DOM。

    var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
    iframeBody.append($("<h1/>").html("Hello world!"));

在我相当复杂的场景中，关于如何在 Chrome 中执行此操作的公认答案对我来说不起作用。您可能想尝试使用 Firefox 调试器（Firefox 开发人员工具的一部分），它显示所有“源”，包括那些属于 iFrame 的部分

在使用Chrome开发者工具（DevTools）调试iframe时，主要步骤如下：

1. **打开Chrome DevTools：**
   您可以通过在Chrome浏览器中按 `F12`键，或者点击浏览器右上角的三个点选择“更多工具”然后点击“开发者工具”来打开DevTools。
2. **定位到iframe元素：**
   在Elements面板中，可以通过DOM树状结构寻找到 `<iframe>`标签。如果页面中iframe较多，可能需要一些时间来定位。也可以利用DevTools顶部的元素选择工具（点击左上角的图标或按 `Ctrl + Shift + C`）来快速选中页面上的iframe。
3. **审查iframe内容：**
   选中iframe元素后，右键点击并选择“Show as tab”。这样会在Elements面板中打开一个新的标签页，显示被选中的iframe的DOM结构。在这个新标签页中，您可以像审查常规的HTML元素一样来审查和修改iframe的内容。
4. **使用Console面板与iframe交互：**
   在Console面板中，您可以通过 `frames`数组访问各个iframe的window对象。例如，`frames[0]`代表第一个iframe的window对象。您可以执行JavaScript代码来与iframe内部的脚本交互。
5. **调试JavaScript：**
   如果要调试iframe中的JavaScript代码，您可以在Sources面板中找到iframe的JavaScript文件。在文件中设置断点，然后通过与网页交互或者触发事件来激活断点，之后就可以逐行调试代码。
6. **网络请求分析：**
   在Network面板中查看iframe加载期间的网络请求。您可以过滤显示仅限于iframe的请求，这样就可以分析iframe的资源加载情况、网络延迟等问题。
7. **性能分析：**
   使用Performance面板来分析iframe中网页的加载和运行性能。您可以记录一个性能会话然后分析各种事件，例如JavaScript的执行时间、样式的计算、布局的重排等。
8. **跨域iframe调试：**
   如果iframe内容是从另一个域加载的，可能会因为同源策略受到限制。在这种情况下，如果您有权限，可以在服务器端设置CORS（跨源资源共享）策略来允许调试。否则，您只能调试在同一源（即相同的协议、域名和端口）上加载的iframe。

举个例子，假设您正在开发一个集成了多个第三方服务的仪表盘，每个服务都通过一个独立的iframe来加载。您可能需要调试其中一个服务的登录流程，这时您可以通过上述步骤来打开DevTools，选择相应的iframe标签，然后在Sources面板中设置断点来观察登录过程中触发的函数调用和变量状态。

使用Chrome开发者工具调试iframe时，耐心和细心是非常重要的。确保您有适当的权限和访问控制，特别是在处理跨域iframe时。

如何使用 chrome 开发工具调试 iframe

在网页开发过程中，如果需要判断当前的网页是在`iframe`内加载，还是直接在浏览器窗口加载的，我们可以使用JavaScript来做这样的判断。以下是两种常用的方法：

### 1. 使用 `window` 对象的 `self` 和 `top` 属性

JavaScript中的`window`对象有两个特别的属性：`self`和`top`。`window.self`返回当前窗口的引用，而`window.top`返回当前浏览器窗口的最顶层窗口的引用。如果一个网页是直接在浏览器窗口中加载的，那么`window.self`和`window.top`应该是相同的。如果网页在一个`iframe`中加载，那么`window.self`将是`iframe`的窗口对象，而`window.top`将是最顶层（含嵌套的`iframe`）窗口的对象。所以我们可以通过比较这两个属性是否相等来判断：

```javascript
if (window.self === window.top) {
  // 当前网页不在iframe中，直接在浏览器窗口加载
  console.log("网页直接在浏览器窗口中加载。");
} else {
  // 当前网页在iframe中加载
  console.log("网页在iframe内加载。");
}
```

### 2. 使用 `window` 对象的 `parent` 属性

另外一个方法是比较`window.parent`和`window.self`。`window.parent`返回当前窗口的父级窗口对象。如果当前窗口没有父窗口，`parent`属性返回自身（即`window.self`）。我们可以这样判断：

```javascript
if (window.parent === window.self) {
  // 当前网页不在iframe中，直接在浏览器窗口中加载
  console.log("网页直接在浏览器窗口中加载。");
} else {
  // 当前网页在iframe中加载
  console.log("网页在iframe内加载。");
}
```

### 示例应用场景

一个实际的应用场景是网页中的JavaScript脚本需要根据网页是否在`iframe`中加载来调整其行为。例如，如果一个网页在`iframe`中时，可能不希望显示某些元素或者调整布局；或者为了安全考虑，可能不允许在`iframe`中加载某些操作。

通过上述的方法，开发者可以在脚本中加入判断逻辑，然后根据该逻辑来调整页面的展示或功能。

`window.top`注意：由于[同源策略，](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)浏览器可能会阻止访问。IE bug 也会发生。

这是工作代码：

    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }
    

`top`和`self`都是`window`对象（与 一起`parent`），因此您可以查看您的窗口是否是顶部窗口。

当位于与父级同源的 iframe 中时，该方法返回嵌入窗口的[`window.frameElement`](https://devdocs.io/dom/window/frameelement)元素（例如`iframe`或）。`object`否则，如果在顶级上下文中浏览，或者父框架和子框架具有不同的来源，则它将评估为`null`。

    window.frameElement
      ? 'embedded in iframe or object'
      : 'not embedded or cross-origin'
    

这是一个[HTML 标准](https://html.spec.whatwg.org/multipage/browsers.html#dom-frameelement)，所有现代浏览器都提供基本支持。

if ( window !== window.parent ) 
    {
          // The page is in an iframe   
    } 
    else 
    {     
          // The page is not in an iframe   
    }

我不确定此示例如何适用于较旧的 Web 浏览器，但我将其用于 IE、Firefox 和 Chrome，没有出现任何问题：

    var iFrameDetection = (window === window.parent) ? false : true;

RoBorg 是正确的，但我想添加一个旁注。

**在 IE7/IE8 中，当 Microsoft 在浏览器中添加选项卡时，他们破坏了一件事情，如果你不小心的话，会对你的 JS 造成严重破坏。**

想象一下这个页面布局：

    MainPage.html
      IframedPage1.html   (named "foo")
      IframedPage2.html   (named "bar")
        IframedPage3.html (named "baz")
    

现在，在框架“baz”中，您单击一个链接（没有目标，在“baz”框架中加载），它工作正常。

如果加载的页面（我们称其为special.html），使用JS 检查“it”是否有名为“bar”的父框架，它将返回true（预期）。

现在让我们说，special.html 页面在加载时会检查父框架（是否存在及其名称，如果它是“bar”，它会在栏框架中重新加载自身。例如

    if(window.parent && window.parent.name == 'bar'){
      window.parent.location = self.location;
    }
    

到目前为止，一切都很好。现在错误来了。

_可以说，您没有像平常一样单击原始链接并在“baz”框架中加载special.html 页面，而是中键单击它或选择在新选项卡中打开它。_

当新选项卡加载时（**_根本没有父框架！_**）**IE 将进入页面加载的无限循环！**因为 IE“复制”了 JavaScript 中的框架结构，使得新选项卡确实有一个父选项卡，并且该父选项卡的名称为“bar”。

好消息是检查：

    if(self == top){
      //this returns true!
    }
    

在该新选项卡中确实返回 true，因此您可以测试这个奇怪的条件。

当您需要确定网页是在 `iframe` 内加载还是在直接浏览器窗口中加载的，可以通过检查 `window` 对象与 `top` 对象是否相同来判断。`window` 对象代表当前窗口，而 `top` 对象代表顶层窗口。如果一个网页是在 `iframe` 中加载的，那么它的 `window` 对象将与 `top` 对象不同，因为 `top` 将指向包含 `iframe` 的最外层的窗口。相反，如果网页直接在浏览器窗口中加载，`window` 对象将等同于 `top` 对象。

这里有一个简单的JavaScript代码示例，可以用来检测一个网页是否在 `iframe` 中加载：

```javascript
if (window === top) {
  console.log("网页是在直接浏览器窗口中加载的。");
} else {
  console.log("网页是在iframe内加载的。");
}
```

当这段代码运行时，如果网页是直接在浏览器窗口中加载的，`window === top` 将返回 `true`，并打印出相应的信息。如果网页是在 `iframe` 中加载的，条件将返回 `false`，并打印出不同的信息。

举个实际的例子，假设我之前负责的一个项目是开发一个第三方评论组件，客户可以将这个组件嵌入到他们的网页中，通常是通过 `iframe` 来实现。我们需要在组件内判断它是被嵌入到 `iframe` 中还是直接在浏览器中打开，这样我们就可以根据不同的情况调整布局和功能。我们就使用了上述的方法来进行检测，并相应地调整了组件的响应式设计。

如何检测当前网页是在 iframe 中加载还是浏览器直接加载？

在使用`create-react-app`创建的React项目中，可以通过设置环境变量`PORT`来指定应用的运行端口。这里有几种方式可以设置这个环境变量：

### 使用命令行直接设置

在启动项目时，可以在命令行中直接指定`PORT`环境变量。例如在Unix系统（包括macOS和Linux）上，你可以使用以下命令：

```bash
PORT=3001 npm start
```

而在Windows上，你可以使用`set`命令：

```bash
set PORT=3001 && npm start
```

如果你使用的是Windows PowerShell，命令会有所不同：

```powershell
$env:PORT=3001; npm start
```

### 使用.env文件

`create-react-app`支持加载项目根目录下的`.env`文件中的环境变量。你可以创建一个`.env`文件（如果还没有的话），然后在该文件中添加如下内容来指定端口：

```
PORT=3001
```

每次运行`npm start`时，`create-react-app`都会加载`.env`文件中的环境变量。

### 综合示例

假设你的项目需要在端口`3001`上运行。你可以首先创建一个`.env`文件在你的项目根目录下（如果已经存在，就编辑它），然后添加如下内容：

```
PORT=3001
```

保存文件后，每次你运行`npm start`，React开发服务器就会自动在端口3001上启动。

如果你偶尔需要在不同的端口上运行，你可以临时在命令行中覆盖`.env`文件中的设置，例如：

```bash
PORT=3002 npm start
```

这样，即使`.env`文件中指定的是端口`3001`，应用也会在端口`3002`上启动。

请注意，端口只能指定一个未被使用的端口号。如果指定的端口已经被其他应用占用，React开发服务器会报错，告知该端口已被占用。

If you don't want to set the [environment variable](https://stackoverflow.com/a/40714921/4249707), another option is to modify the `scripts` part of package.json from:

    "start": "react-scripts start"
    

to

**Linux** (tested on Ubuntu 14.04/16.04) and **MacOS** (tested by aswin-s on MacOS Sierra 10.12.4):

    "start": "PORT=3006 react-scripts start"
    

or (may be) more general solution by [IsaacPak](https://stackoverflow.com/users/1991020/isaac-pak)

    "start": "export PORT=3006 react-scripts start"
    

**Windows** [JacobEnsor](https://stackoverflow.com/users/1389990/jacob-ensor)'s solution

    "start": "set PORT=3006 && react-scripts start"
    

**cross-env lib** works everywhere. See Aguinaldo Possatto's [answer](https://stackoverflow.com/a/48669909/4249707) for details

**Update due to the popularity of my answer:** Currently I prefer to use environment variables saved in [`.env`](https://stackoverflow.com/a/42232944/4249707) file(useful to store sets of variables for different `deploy` configurations in a convenient and readable form). Don't forget to add `*.env` into `.gitignore` if you're still storing your secrets in `.env` files. [Here](https://12factor.net/config) is the explanation of why using environment variables is better in the most cases. [Here](https://diogomonica.com/2017/03/27/why-you-shouldnt-use-env-variables-for-secret-data/) is the explanation of why storing secrets in environment is bad idea.

Here is another way to accomplish this task.

Create a `.env` file at your project root and specify port number there. Like:

    PORT=3005

Create a file with name `.env` in the main directory besides`package.json` and set `PORT` variable to desired port number.

For example:

**.env**

    PORT=4200
    

You can find the documentation for this action here: [https://create-react-app.dev/docs/advanced-configuration](https://create-react-app.dev/docs/advanced-configuration)

You could use [**cross-env**](https://github.com/kentcdodds/cross-env) to set the port, and it will work on Windows, Linux and Mac.

    yarn add -D cross-env
    

then in package.json the start link could be like this:

    "start": "cross-env PORT=3006 react-scripts start",

**Method 1**

Create .env File in the root folder of a project

[![enter image description here](https://i.stack.imgur.com/B7E0y.png)](https://i.stack.imgur.com/B7E0y.png)

Set like this

    PORT=3005
    

**Method 2**

[![enter image description here](https://i.stack.imgur.com/4bCsC.png)](https://i.stack.imgur.com/4bCsC.png)

In _package.json_

    set PORT=3006 && react-scripts start

Create - react -app 如何设置运行端口？

在React中实现防抖函数(debounce function)通常涉及到在组件中使用一个特定的函数，该函数能够延迟执行实际的处理逻辑，直到停止触发一段时间后。这样做可以减少像输入框连续输入这样的事件处理函数的调用次数，从而提高性能。

下面是在React组件中实现防抖功能的步骤：

1. **创建防抖函数：**
   创建一个防抖函数，该函数会接收一个要延迟执行的函数 `func` 和延迟执行的时间 `wait`。

```javascript
const debounce = (func, wait) => {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};
```

2. **在React组件中使用防抖函数：**
   使用 `useEffect` 钩子配合防抖函数实现防抖效果。

假设我们有一个搜索输入框，我们想要在用户停止输入一段时间后再触发搜索，避免每次键入都进行搜索：

```javascript
import React, { useState, useEffect } from 'react';

const SearchComponent = () => {
  const [inputValue, setInputValue] = useState('');

  // 定义防抖函数
  const debounceSearch = debounce((searchValue) => {
    console.log(`搜索: ${searchValue}`);
    // 在这里执行搜索逻辑，例如 API 调用
  }, 500);

  useEffect(() => {
    if (inputValue) {
      debounceSearch(inputValue);
    }
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="输入关键词进行搜索"
    />
  );
};

export default SearchComponent;
```

上面的例子中，我们在输入框的 `onChange` 事件中设置了 `inputValue` 的值，然后我们在 `useEffect` 中使用 `inputValue` 作为依赖项，这表示当 `inputValue` 改变时，`useEffect` 的回调会被执行。在 `useEffect` 的回调中，我们调用了 `debounceSearch` 函数，它会延迟执行搜索逻辑，直到用户停止输入500毫秒后。

这样，无论用户输入多快，真正的搜索逻辑只会在用户停止输入一段时间后才会执行，大大减少了不必要的处理和API调用。

### 2019：尝试 hooks + Promise debouncing

这是我解决此问题的最新版本。我会用：

*   [Awesome-debounce-promise](https://github.com/slorber/awesome-debounce-promise)来消除异步函数的抖动
*   [使用常量](https://github.com/Andarist/use-constant)将去抖函数存储到组件中
*   [React-async-hook](https://github.com/slorber/react-async-hook)将结果获取到我的组件中

这是一些初始接线，但是您正在自己编写原始块，并且您可以创建自己的自定义挂钩，这样您只需要做一次。

    // Generic reusable hook
    const useDebouncedSearch = (searchFunction) => {
    
      // Handle the input text state
      const [inputText, setInputText] = useState('');
    
      // Debounce the original search async function
      const debouncedSearchFunction = useConstant(() =>
        AwesomeDebouncePromise(searchFunction, 300)
      );
    
      // The async callback is run each time the text changes,
      // but as the search function is debounced, it does not
      // fire a new request on each keystroke
      const searchResults = useAsync(
        async () => {
          if (inputText.length === 0) {
            return [];
          } else {
            return debouncedSearchFunction(inputText);
          }
        },
        [debouncedSearchFunction, inputText]
      );
    
      // Return everything needed for the hook consumer
      return {
        inputText,
        setInputText,
        searchResults,
      };
    };
    

然后你可以使用你的钩子：

    const useSearchStarwarsHero = () => useDebouncedSearch(text => searchStarwarsHeroAsync(text))
    
    const SearchStarwarsHeroExample = () => {
      const { inputText, setInputText, searchResults } = useSearchStarwarsHero();
      return (
        <div>
          <input value={inputText} onChange={e => setInputText(e.target.value)} />
          <div>
            {searchResults.loading && <div>...</div>}
            {searchResults.error && <div>Error: {search.error.message}</div>}
            {searchResults.result && (
              <div>
                <div>Results: {search.result.length}</div>
                <ul>
                  {searchResults.result.map(hero => (
                    <li key={hero.name}>{hero.name}</li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </div>
      );
    };
    

您会发现此示例[在此处](https://react-async-hook.netlify.com)运行，您应该阅读[react-async-hook](https://github.com/slorber/react-async-hook)文档以获取更多详细信息。

* * *

### 2018：尝试消除承诺

我们经常希望消除 API 调用的反跳，以避免无用的请求淹没后端。

在 2018 年，使用回调（[Lodash](https://en.wikipedia.org/wiki/Lodash) / [Underscore.js](https://en.wikipedia.org/wiki/Underscore.js)）对我来说感觉很糟糕并且容易出错。由于 API 调用以任意顺序解析，因此很容易遇到样板文件和并发问题。

我创建了一个考虑到 React 的小库来解决你的痛苦：[awesome-debounce-promise](https://github.com/slorber/awesome-debounce-promise)。

这不应该比以下更复杂：

    const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));
    
    const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);
    
    class SearchInputAndResults extends React.Component {
      state = {
        text: '',
        results: null,
      };
    
      handleTextChange = async text => {
        this.setState({ text, results: null });
        const result = await searchAPIDebounced(text);
        this.setState({ result });
      };
    }
    

去抖功能可确保：

*   API 调用将被反跳
*   去抖函数总是返回一个承诺
*   只有最后一个调用返回的承诺才会解决
*   `this.setState({ result });`每次API 调用都会发生一次

最后，如果您的组件卸载，您可以添加另一个技巧：

    componentWillUnmount() {
      this.setState = () => {};
    }
    

请注意，**Observables**（[RxJS](https://github.com/Reactive-Extensions/RxJS)）也非常适合消除输入的抖动，但它是一个更强大的抽象，可能更难正确学习/使用。

* * *

### < 2017：仍然想使用回调去抖动？

这里重要的部分是**为每个组件实例创建一个去抖动（或节流）函数**。您不想每次都重新创建去抖（或节流）函数，并且不希望多个实例共享相同的去抖函数。

我没有在这个答案中定义去抖动函数，因为它并不真正相关，但是这个答案可以与`_.debounce`Underscore.js 或 Lodash 以及任何用户提供的去抖动函数完美配合。

* * *

#### 好主意：

由于去抖函数是有状态的，因此我们必须**为每个组件实例创建一个去抖函数**。

**[ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015)（类属性）**：推荐

    class SearchBox extends React.Component {
        method = debounce(() => {
          ...
        });
    }
    

**ES6（类构造函数）**

    class SearchBox extends React.Component {
        constructor(props) {
            super(props);
            this.method = debounce(this.method.bind(this),1000);
        }
        method() { ... }
    }
    

**[ES5](https://en.wikipedia.org/wiki/ECMAScript#5th_Edition_%E2%80%93_ECMAScript_2009)**

    var SearchBox = React.createClass({
        method: function() {...},
        componentWillMount: function() {
           this.method = debounce(this.method.bind(this),100);
        },
    });
    

请参阅[JSFiddle](https://jsfiddle.net/0mLb4vnp/)：三个实例每个实例生成一个日志条目（全局为三个）。

* * *

##### _这不是_一个好主意：

    var SearchBox = React.createClass({
      method: function() {...},
      debouncedMethod: debounce(this.method, 100);
    });
    

这是行不通的，因为在类描述对象创建过程中，`this`对象本身并不是创建的。`this.method`不会返回您期望的内容，因为`this`上下文不是对象本身（顺便说一句，它实际上还不存在，因为它刚刚被创建）。

* * *

##### _这不是_一个好主意：

    var SearchBox = React.createClass({
      method: function() {...},
      debouncedMethod: function() {
          var debounced = debounce(this.method,100);
          debounced();
      },
    });
    

这次，您实际上创建了一个去抖函数，该函数调用您的`this.method`. 问题是您在每次`debouncedMethod`调用时都重新创建它，因此新创建的去抖函数对以前的调用一无所知！随着时间的推移，您必须重复使用相同的去抖函数，否则去抖将不会发生。

* * *

##### _这不是_一个好主意：

    var SearchBox = React.createClass({
      debouncedMethod: debounce(function () {...},100),
    });
    

这里有点棘手。

该类的所有已安装实例将共享相同的去抖函数，而大多数情况下这不是您想要的！请参阅[JSFiddle](https://jsfiddle.net/5trmuzau/)：三个实例在全局范围内仅生成一个日志条目。

您必须**为每个组件实例**创建一个去抖函数，而不是在类级别创建由每个组件实例共享的单个去抖函数。

* * *

### 照顾 React 的事件池

这是相关的，因为我们经常想要消除或限制 DOM 事件。

在 React 中，您在回调中收到的事件对象（即`SyntheticEvent`）被池化（现在已[记录](https://facebook.github.io/react/docs/events.html#event-pooling)）。这意味着在调用事件回调后，您收到的 SyntheticEvent 将以空属性放回池中，以减少[GC](https://en.wikipedia.org/wiki/Garbage_collection_%28computer_science%29)压力。

因此，如果您`SyntheticEvent`与原始回调异步访问属性（如果您限制/反跳，可能会出现这种情况），您访问的属性可能会被删除。如果您希望事件永远不会被放回池中，您可以使用该`persist()`方法。

##### 没有持久化（默认行为：池化事件）

    onClick = e => {
      alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
      setTimeout(() => {
        alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
      }, 0);
    };
    

第二个（异步）将打印`hasNativeEvent=false`，因为事件属性已被清理。

##### 凭着坚持

    onClick = e => {
      e.persist();
      alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
      setTimeout(() => {
        alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
      }, 0);
    };
    

第二个（异步）将打印`hasNativeEvent=true`，因为`persist`允许您避免将事件放回池中。

您可以在这里测试这两种行为：[JSFiddle](https://jsfiddle.net/d1mghxm5/)

阅读[Julen 的答案](https://stackoverflow.com/a/24679479/82609)`persist()`，了解使用油门/去抖功能的示例。

### 不受控制的组件

您可以使用该[`event.persist()`方法](https://facebook.github.io/react/docs/events.html#event-pooling)。

[下面是使用Underscore.js](https://en.wikipedia.org/wiki/Underscore.js) '的示例`_.debounce()`：

    var SearchBox = React.createClass({
    
      componentWillMount: function () {
         this.delayedCallback = _.debounce(function (event) {
           // `event.target` is accessible now
         }, 1000);
      },
    
      onChange: function (event) {
        event.persist();
        this.delayedCallback(event);
      },
    
      render: function () {
        return (
          <input type="search" onChange={this.onChange} />
        );
      }
    
    });
    

请参阅[这个 JSFiddle](http://jsfiddle.net/TzLZq/2/)。

* * *

### 受控组件

上面的例子显示了一个[不受控制的组件](http://facebook.github.io/react/docs/forms.html#uncontrolled-components)。我一直使用受控元素，所以这是上面的另一个例子，但没有使用`event.persist()`“欺骗”。

JSFiddle也[可用。](http://jsfiddle.net/87epx3yt/6/)[不带下划线的示例](http://jsfiddle.net/c7a0joha)

    var SearchBox = React.createClass({
        getInitialState: function () {
            return {
                query: this.props.query
            };
        },
    
        componentWillMount: function () {
           this.handleSearchDebounced = _.debounce(function () {
               this.props.handleSearch.apply(this, [this.state.query]);
           }, 500);
        },
    
        onChange: function (event) {
          this.setState({query: event.target.value});
          this.handleSearchDebounced();
        },
    
        render: function () {
          return (
            <input type="search"
                   value={this.state.query}
                   onChange={this.onChange} />
          );
        }
    });
    
    
    var Search = React.createClass({
        getInitialState: function () {
            return {
                result: this.props.query
            };
        },
    
        handleSearch: function (query) {
            this.setState({result: query});
        },
    
        render: function () {
          return (
            <div id="search">
              <SearchBox query={this.state.result}
                         handleSearch={this.handleSearch} />
              <p>You searched for: <strong>{this.state.result}</strong></p>
            </div>
          );
        }
    });
    
    React.render(<Search query="Initial query" />, document.body);

2019：使用“useCallback”反应钩子
------------------------

在尝试了许多不同的方法之后，我发现 using`useCallback`是解决事件`debounce`中使用的多次调用问题的最简单且最有效的方法`onChange`。

根据[Hooks API 文档](https://reactjs.org/docs/hooks-reference.html#usecallback)，

> useCallback 返回回调的记忆版本，仅当依赖项之一发生更改时该版本才会更改。

将空数组作为依赖项传递可确保回调仅被调用一次。这是一个简单的实现：

    import React, { useCallback } from "react";
    import { debounce } from "lodash";
    
    const handler = useCallback(debounce(someFunction, 2000), []);
        
    const onChange = (event) => {
        // perform any event related action here
        
        handler();
     };

在与文本输入斗争了一段时间并且自己没有找到完美的解决方案之后，我在 npm 上找到了这个：[react-debounce-input](https://www.npmjs.com/package/react-debounce-input)。

这是一个简单的例子：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {DebounceInput} from 'react-debounce-input';
    
    class App extends React.Component {
    state = {
        value: ''
    };
    
    render() {
        return (
        <div>
            <DebounceInput
            minLength={2}
            debounceTimeout={300}
            onChange={event => this.setState({value: event.target.value})} />
    
            <p>Value: {this.state.value}</p>
        </div>
        );
    }
    }
    
    const appRoot = document.createElement('div');
    document.body.appendChild(appRoot);
    ReactDOM.render(<App />, appRoot);
    

DebounceInput 组件接受您可以分配给普通输入元素的所有属性。[在CodePen](http://codepen.io/nkbt/pen/VvmzLQ?editors=0010)上尝试一下。

可以有一种使用[React hooks 的](https://en.wikipedia.org/wiki/React_(web_framework)#React_hooks)简单方法。

第 1 步：定义一个状态来维护搜索到的文本

    const [searchTerm, setSearchTerm] = useState('')
    

步骤 2：使用 useEffect 捕获任何变化`searchTerm`

    useEffect(() => {
      const delayDebounceFn = setTimeout(() => {
        if (searchTerm) {
          // Write your logic here
        }
      }, 400)
    
      return () => clearTimeout(delayDebounceFn)
    }, [searchTerm])
    

第三步：编写一个函数来处理输入变化

    function handleInputChange(value) {
      if (value) {
        setSearchTerm(value)
      }
    }
    

就这样！在需要时调用此方法。

React 中如何实现 debounce 防抖函数？

当您在React的函数组件中使用`useState`钩子来设置一个状态值时，您可能会注意到，调用设置状态的函数后，状态的值不会立即改变。这是因为React中的状态设置是异步的。具体来说，这意味着React将在稍后某个时间点批量处理状态更新和重新渲染组件，而不是在调用设置状态函数的时候立即更新状态和重新渲染。

这样做有几个好处：
1. **性能优化**：通过合并多个状态更新，React可以减少不必要的渲染次数，从而避免额外的性能开销。
2. **一致性保障**：这样可以确保在一个事件处理函数中，不会因为状态更新导致其他状态的计算出现不一致的情况。

请看以下例子来说明这一点：

```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 这里尝试连续更新状态，但状态的变化不会立即反映
    setCount(count + 1);
    setCount(count + 1);
    // 在这个函数调用后，你可能会期待count是2，但是实际上它仍然是0
    // 因为这两次更新会被合并，且基于相同的开始状态（0）计算
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
```

在上面的例子中，当`handleClick`函数被调用时，即使我们调用了两次`setCount`来增加`count`，但在这个事件处理函数结束之前，你不会看到`count`的值发生变化。在实践中，如果你希望连续的状态更新彼此依赖，你应该使用函数形式的`setState`来确保每次更新都基于最新的状态：

```jsx
setCount(previousCount => previousCount + 1);
```

使用函数形式的更新可以确保每次更新都基于上一次更新后的状态，而不是基于状态的闭包值。

与通过扩展or创建的[类组件](https://stackoverflow.com/q/30782948/1048572)非常[相似`.setState()`](https://stackoverflow.com/q/30782948/1048572)，使用 hook 提供的更新程序进行的状态更新也是异步的，并且不会立即反映。`React.Component``React.PureComponent``useState`

**此外，这里的主要问题不仅仅是异步性质，而是函数根据当前闭包使用状态值的事实，并且状态更新将反映在下一次重新渲染中，现有闭包不受影响，但新的闭包不会受到影响。那些被创建了**。现在在当前状态下，钩子内的值是通过现有的闭包获取的，当重新渲染发生时，闭包会根据函数是否再次重新创建而更新。

即使您添加了一个`setTimeout`函数，尽管超时将在重新渲染发生一段时间后运行，但该函数`setTimeout`仍将使用其先前闭包中的值，而不是更新后的值。

    setMovies(result);
    console.log(movies) // movies here will not be updated
    

如果要对状态更新执行操作，则需要使用钩子`useEffect`，就像`componentDidUpdate`在类组件中使用一样，因为返回的 setter`useState`没有回调模式

    useEffect(() => {
        // action on update of movies
    }, [movies]);
    

就更新状态的语法而言，将用异步请求中可用的值替换状态中的`setMovies(result)`先前值。`movies`

但是，如果要将响应与先前存在的值合并，则必须使用状态更新的回调语法以及正确使用扩展语法，例如

    setMovies(prevMovies => ([...prevMovies, ...result]));

_[先前答案](https://stackoverflow.com/a/54069332/1176601)的更多详细信息：_

虽然 React`setState` _是_异步的（类和钩子），并且很容易用这个事实来解释观察到的行为，但这并不是它发生的_**原因**_。

TLDR：原因是围绕不可变值的[闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)`const`范围。

* * *

### _解决方案：_

*   读取渲染函数中的值（不在嵌套函数内）：
    
          useEffect(() => { setMovies(result) }, [])
          console.log(movies)
        
    
*   将变量添加到依赖项中（并使用[react-hooks/exhaustive-deps](https://reactjs.org/docs/hooks-rules.html#eslint-plugin) eslint规则）：
    
          useEffect(() => { setMovies(result) }, [])
          useEffect(() => { console.log(movies) }, [movies])
        
    
*   使用临时变量：
    
          useEffect(() => {
            const newMovies = result
            console.log(newMovies)
            setMovies(newMovies)
          }, [])
        
    
*   使用可变引用（如果我们不需要状态而只想记住值 - 更新引用不会触发重新渲染）：
    
          const moviesRef = useRef(initialValue)
          useEffect(() => {
            moviesRef.current = result
            console.log(moviesRef.current)
          }, [])
        
    

* * *

### _解释为什么会发生：_

如果异步是唯一的原因，那么就有可能`await setState()`。

但是，假定`props`和`state`两者[在 1 render 期间保持不变](https://reactjs.org/docs/react-component.html#state)。

> `this.state`就好像它是不可变的一样对待。

对于钩子，通过使用带有关键字的**常量值**来增强这种假设`const`：

    const [state, setState] = useState('initial')
    

两次渲染之间的值可能不同，但在渲染本身和任何[闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)内（即使在渲染完成后存活时间更长的函数，例如`useEffect`，任何 Promise 或 setTimeout 内的事件处理程序）仍然保持不变。

考虑以下假的、但**同步的**、类似 React 的实现：

    // sync implementation:
    
    let internalState
    let renderAgain
    
    const setState = (updateFn) => {
      internalState = updateFn(internalState)
      renderAgain()
    }
    
    const useState = (defaultState) => {
      if (!internalState) {
        internalState = defaultState
      }
      return [internalState, setState]
    }
    
    const render = (component, node) => {
      const {html, handleClick} = component()
      node.innerHTML = html
      renderAgain = () => render(component, node)
      return handleClick
    }
    
    // test:
    
    const MyComponent = () => {
      const [x, setX] = useState(1)
      console.log('in render:', x) // ✅
      
      const handleClick = () => {
        setX(current => current + 1)
        console.log('in handler/effect/Promise/setTimeout:', x) // ❌ NOT updated
      }
      
      return {
        html: `<button>${x}</button>`,
        handleClick
      }
    }
    
    const triggerClick = render(MyComponent, document.getElementById('root'))
    triggerClick()
    triggerClick()
    triggerClick()

    <div id="root"></div>

运行代码片段隐藏结果

展开片段

我知道已经有很好的答案了。但我想给出另一个想法如何解决同样的问题，并使用我的模块[react-useStateRef](https://www.npmjs.com/package/react-usestateref)访问最新的“电影”状态，它每周的下载量超过11,000次。

正如您所理解的，通过使用 React 状态，您可以在每次状态更改时渲染页面。但通过使用 React ref，您始终可以获得最新值。

因此，该模块`react-useStateRef`允许您一起使用状态和引用。它向后兼容`React.useState`，因此您只需替换该`import`语句即可

    const { useEffect } = React
    import { useState } from 'react-usestateref'
    
      const [movies, setMovies] = useState(initialValue);
    
      useEffect(() => {
        (async function() {
          try {
    
            const result = [
              {
                id: "1546514491119",
              },
            ];
            console.log("result =", result);
            setMovies(result);
            console.log("movies =", movies.current); // will give you the latest results
          } catch (e) {
            console.error(e);
          }
        })();
      }, []);
    

更多信息：
-----

*   [反应-usestateref](https://www.npmjs.com/package/react-usestateref)

React 的 useEffect 有自己的状态/生命周期。它与状态的突变有关，直到效果被破坏时才会更新状态。

只需在参数状态中传递一个参数或将其保留为黑色数组即可完美运行。

    React.useEffect(() => {
        console.log("effect");
        (async () => {
            try {
                let result = await fetch("/query/countries");
                const res = await result.json();
                let result1 = await fetch("/query/projects");
                const res1 = await result1.json();
                let result11 = await fetch("/query/regions");
                const res11 = await result11.json();
                setData({
                    countries: res,
                    projects: res1,
                    regions: res11
                });
            } catch {}
        })(data)
    }, [setData])
    # or use this
    useEffect(() => {
        (async () => {
            try {
                await Promise.all([
                    fetch("/query/countries").then((response) => response.json()),
                    fetch("/query/projects").then((response) => response.json()),
                    fetch("/query/regions").then((response) => response.json())
                ]).then(([country, project, region]) => {
                    // console.log(country, project, region);
                    setData({
                        countries: country,
                        projects: project,
                        regions: region
                    });
                })
            } catch {
                console.log("data fetch error")
            }
        })()
    }, [setData]);
    

或者，您可以尝试 React.useRef() 在 React hook 中进行即时更改。

    const movies = React.useRef(null);
    useEffect(() => {
    movies.current='values';
    console.log(movies.current)
    }, [])

这里的大多数答案都是关于如何根据其先前的值更新状态，但我不明白这与问题有何关系

> useState set 方法没有立即反映更改

* * *

反应18
====

useState 是异步的：
--------------

当触发某个代码的事件发生时，代码开始运行，当它完成时，react将检查是否有状态更新，如果是，则**只有**`useState`更新钩子的值，这会导致一个新的渲染，其中新值可用。  

    const [example,setExemple] = useState("")
    //...
    <button
      onClick={() => {
        const newValue = "new";
        setExample(newValue);
        console.log(example); // output "" and this is normal, because the component didn't rerenderd yet so the new value is not availabe yet
      }}
    >
      Update state
    </button>
    

假设我们有一个场景，其中一个状态依赖于另一个状态，例如我们希望根据`example`每次更新时的新值进行 API 调用，然后将响应中的数据存储在另一个状态中`anotherExample`。  
为了实现这样我们有两种方法：

**1\. 使用 的值`newValue`：  
**

    <button
      onClick={async () => {
        const newValue = "new";
        const response = await axios.get(`http://127.0.0.1:5000/${newValue}`);
        setExample(newValue);
        setAnotherExample(response.data);
      }}
    >
      test
    </button>
    

因为您知道`example`将收到该值，所以您可以直接基于它创建逻辑。

**2.每次更新时触发[useEffect](https://reactjs.org/docs/hooks-effect.html)运行，方法是将其包含在其依赖项数组中：`example``example`**  

    <button
      onClick={() => {
        const newValue = "new";
        setExample(newValue);
      }}
    >
      test
    </button>
    

    useEffect(() => {
     async function test(){
      const response = await axios.get(`http://127.0.0.1:5000/${example}`);
      setAnotherExample(response.data);
     } 
     test();
    }, [example])
    

因此，当`example`使用事件函数更新组件重新渲染时，**我们现在处于一个新的不同渲染中**，一旦完成，`useEffect`就会运行**，因为 的值`example`与上次渲染期间的值不同**，并且因为它是一个新的不同渲染， useState 挂钩的新值`example`可在此处获得。

**注意：**`useEffect`在第一次安装期间，钩子无论如何都会运行。

哪种方法更好？
-------

*   而第一种方法将使所有工作在一次渲染中完成**（更好的方法）** “React 将多个状态更新分组到单个重新渲染中以获得更好的性能”，第二种方法将在两次渲染中完成，第一次`example`更新时和第二个`anotherExample`是从内部更新的`useEffect`😕
    
*   由于组件仅在`useState`钩子的新值与旧值不同时才重新渲染，因此当`newValue`等于 时`example`组件不会重新渲染，因此`useEffect`不会运行且`anotherExample`不会更新 🙂 **（更好的方法）**，但是在第一个中无论如何，API 都会被调用，如果没有必要，我们不想这样做，如果发生这种情况，`anotherExample`也会更新（`anotherExample`将收到它已经包含的相同数据，因为它是相同的请求，因为`newValue`等于`example`）但是如果然后，在对象或数组中响应，`Object.is`方法（钩子`useState`使用的）无法检测新值是否等于前一个值，因此，组件将重新渲染😕
    

结论：
---

正如上面提到的，每种都有其优点，所以这取决于用例。

**更推荐使用第二种方法**，但是在某些情况下，第一种方法的性能更高，例如，当您确定代码仅在`newValue`使用 获取新值时才会运行`onChange`，或者当您想使用您将要使用的其他一些局部变量时不再能够从 useEffect 内部访问

React useState 设置值后没有立即生效？

CSS 中的媒体查询（Media Queries）是一种非常有用的工具，它可以根据不同的设备特性来应用不同的样式规则。针对 iOS 设备的样式，可以通过特定的媒体查询来针对性地应用。

例如，可以使用 `-webkit-min-device-pixel-ratio` 特性或者 `orientation` 特性来针对 iOS 设备。以下是针对所有具有 Retina 屏幕的 iOS 设备（iPhone、iPad、iPod Touch 等）的媒体查询：

```css
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    /* 在这里编写针对 iOS Retina 设备的 CSS */
}
```

如果要更细致地区分，还可以根据设备的宽度或者高度来写媒体查询，因为不同的 iOS 设备（尤其是横竖屏切换时）的宽度和高度是不同的。比如，针对所有的 iPhone 设备（这里不区分是否为 Retina 屏幕），可以这样写：

```css
@media only screen and (max-device-width: 480px) {
    /* 在这里编写专门针对 iPhone 的 CSS */
}
```

对于 iPad，可以这样区分横竖屏：

```css
/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  /* Styles */
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
  /* Styles */
}
```

值得注意的是，目前市面上的设备种类繁多，iOS 设备也在不断更新，所以需要定期更新你的媒体查询以适应新的设备。此外，使用这些媒体查询时，还应该注意浏览器兼容性和隐私设置，因为某些浏览器可能不支持特定的查询，或者用户的隐私设置可能会限制某些CSS的应用。在CSS中，我们可以使用媒体查询(media queries)来为不同的设备和视口尺寸应用不同的样式。如果想要只针对iOS设备的话，可以使用针对特定设备特性的媒体查询。但是，需要注意的是，由于iOS设备的多样性和Web标准的推进，通常不建议只针对iOS设备编写CSS，而应该更注重响应式设计，以适应不同的屏幕尺寸和分辨率。

不过，如果确实有特殊需求只想针对iOS设备，可以使用以下的媒体查询示例：

```css
@media screen and (min-device-width : 375px) 
               and (max-device-width : 812px) 
               and (-webkit-device-pixel-ratio : 3) 
               and (orientation : portrait) {
  /* 在 iPhone X 上应用的样式 */
}
```

这个例子使用了`min-device-width`和`max-device-width`来指定设备的屏幕宽度范围，`-webkit-device-pixel-ratio`用来指定设备的像素比，`orientation`用来指定设备的方向。这些参数的组合可以较为准确地针对特定的iOS设备。

然而，这种方法有一些限制：

1. **设备更新**：随着新设备的发布，可能需要更新媒体查询以包括新的尺寸和像素密度。
2. **兼容性和维护**：仅针对iOS设备的样式可能导致不必要的复杂性和后期维护问题。
3. **Web标准**：建议根据Web标准进行设计，使用响应式布局来适配不同的设备和屏幕尺寸，而不是专注于特定品牌或平台。

因此，尽管可以使用媒体查询针对iOS设备，但是最好的做法是编写灵活的响应式CSS，以确保在各种设备上都能提供良好的用户体验。

如上所述，简短的答案是否定的。但我现在正在开发的应用程序中需要类似的东西，但 CSS 需要不同的区域仅限于页面的非常特定的区域。

如果您像我一样并且不需要提供完全不同的样式表，另一种选择是按照此问题所选答案中描述的方式检测运行 iOS 的设备：[检测设备是否为 iOS](https://stackoverflow.com/questions/9038625/detect-if-device-is-ios)

一旦您检测到 iOS 设备，您就可以使用 Javascript（例如，`document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");`jQuery、PHP 等）向您的目标区域添加一个类，并使用预先存在的样式表相应地设置该类的样式。

    .iOS-device {
          style-you-want-to-set: yada;
    }

当您想要使用 CSS 媒体查询专门为 iOS 设备编写样式时，可以通过针对特定的设备特性（如屏幕尺寸、分辨率和操作系统特有的视口属性）来编写媒体查询。尽管我们不能直接查询设备是否为iOS设备，但我们可以使用一些常见的iOS设备的屏幕尺寸和分辨率作为参考来编写媒体查询。以下是一个简单的例子：

```css
@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px) 
  and (-webkit-device-pixel-ratio : 3) 
  and (orientation : portrait) {
  /* 在这里编写针对特定iOS设备的样式，例如 iPhone X */
  body {
    background-color: lightblue;
  }
}
```

在这个媒体查询中，我们设置了几个条件：

- `min-device-width` 和 `max-device-width` 处于特定范围内，这个范围匹配了特定的 iPhone 设备。
- `-webkit-device-pixel-ratio` 是设备像素比，`3` 是 iPhone X 的设备像素比。
- `orientation` 是设备的方向，这里设置为 `portrait`（竖屏）。

需要注意的是，随着设备的更新和新增，可能需要更新媒体查询条件以适应新的设备。此外，一些媒体查询参数也可能在未来的iOS版本中发生变化，因此需要定期检查您的媒体查询代码，确保其仍然适用于最新的设备和操作系统。

要使用 CSS 媒体查询针对 iOS 设备应用样式，我们可以依赖于特定的设备和浏览器特性，如 `Webkit` 特有的前缀和设备分辨率。下面是一个使用媒体查询只针对 iOS 设备的示例：

```css
@media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 812px) 
  and (-webkit-min-device-pixel-ratio : 2) 
  and (orientation : portrait) {
    /* 在此处编写你的 CSS 规则 */
    body {
        background-color: #f0f0f0;
    }
}
```

这段样式声明是为了匹配一定分辨率范围内的 iOS 设备（如 iPhone 5/SE, 6/7/8, 6/7/8 Plus, X, XS, 11 Pro 等），并且具有 `2` 倍的像素比（`-webkit-min-device-pixel-ratio : 2`），且设备处于竖屏模式。`-webkit-` 前缀用于针对基于 Webkit 的浏览器，而 iOS 设备的 Safari 浏览器正是建立在这个引擎之上。

请注意，上述媒体查询可能并不完美地涵盖所有 iOS 设备，因为设备的尺寸和分辨率多种多样，而且新设备的发布也可能改变情况。因此，适配 iOS 设备的策略可能需要根据具体情况定期更新。

如果你想针对所有 iOS 设备，而不仅仅是 iPhone，那么你可以省略尺寸的限制，只使用 `-webkit-min-device-pixel-ratio` 这个特性。但这种方法也可能会影响到其他使用 Webkit 浏览器引擎的设备。因此，确保测试你的媒体查询以验证它们是否满足你的需求是非常重要的。

在CSS中，我们可以使用媒体查询(media queries)来为不同的设备和视口尺寸应用不同的样式。如果想要只针对iOS设备的话，可以使用针对特定设备特性的媒体查询。但是，需要注意的是，由于iOS设备的多样性和Web标准的推进，通常不建议只针对iOS设备编写CSS，而应该更注重响应式设计，以适应不同的屏幕尺寸和分辨率。

不过，如果确实有特殊需求只想针对iOS设备，可以使用以下的媒体查询示例：

```css
@media screen and (min-device-width : 375px) 
               and (max-device-width : 812px) 
               and (-webkit-device-pixel-ratio : 3) 
               and (orientation : portrait) {
  /* 在 iPhone X 上应用的样式 */
}
```

这个例子使用了`min-device-width`和`max-device-width`来指定设备的屏幕宽度范围，`-webkit-device-pixel-ratio`用来指定设备的像素比，`orientation`用来指定设备的方向。这些参数的组合可以较为准确地针对特定的iOS设备。

然而，这种方法有一些限制：

1. **设备更新**：随着新设备的发布，可能需要更新媒体查询以包括新的尺寸和像素密度。
2. **兼容性和维护**：仅针对iOS设备的样式可能导致不必要的复杂性和后期维护问题。
3. **Web标准**：建议根据Web标准进行设计，使用响应式布局来适配不同的设备和屏幕尺寸，而不是专注于特定品牌或平台。

因此，尽管可以使用媒体查询针对iOS设备，但是最好的做法是编写灵活的响应式CSS，以确保在各种设备上都能提供良好的用户体验。

要使用 CSS 媒体查询针对 iOS 设备应用样式，我们可以依赖于特定的设备和浏览器特性，如 `Webkit` 特有的前缀和设备分辨率。下面是一个使用媒体查询只针对 iOS 设备的示例：

```css
@media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 812px) 
  and (-webkit-min-device-pixel-ratio : 2) 
  and (orientation : portrait) {
    /* 在此处编写你的 CSS 规则 */
    body {
        background-color: #f0f0f0;
    }
}
```

这段样式声明是为了匹配一定分辨率范围内的 iOS 设备（如 iPhone 5/SE, 6/7/8, 6/7/8 Plus, X, XS, 11 Pro 等），并且具有 `2` 倍的像素比（`-webkit-min-device-pixel-ratio : 2`），且设备处于竖屏模式。`-webkit-` 前缀用于针对基于 Webkit 的浏览器，而 iOS 设备的 Safari 浏览器正是建立在这个引擎之上。

请注意，上述媒体查询可能并不完美地涵盖所有 iOS 设备，因为设备的尺寸和分辨率多种多样，而且新设备的发布也可能改变情况。因此，适配 iOS 设备的策略可能需要根据具体情况定期更新。

如果你想针对所有 iOS 设备，而不仅仅是 iPhone，那么你可以省略尺寸的限制，只使用 `-webkit-min-device-pixel-ratio` 这个特性。但这种方法也可能会影响到其他使用 Webkit 浏览器引擎的设备。因此，确保测试你的媒体查询以验证它们是否满足你的需求是非常重要的。CSS 中使用媒体查询（Media Queries）可以根据不同的设备特性来应用不同的样式规则。如果想特别针对 iOS 设备，我们需要定义一种特定的媒体查询，它能够识别出 iOS 设备的特征。然而，CSS 并没有直接针对 iOS 的媒体查询，因为媒体查询基于设备的能力而不是平台或操作系统。

不过，我们可以使用一些常见的iOS设备分辨率和特性（如设备的宽度、高度和像素比）来间接地定位大部分iOS设备。例如，iPhone、iPad和iPod通常都有特定的屏幕尺寸和分辨率。以下是一个CSS媒体查询的例子，它可能会捕捉到一些iOS设备，但不保证完全精确：

```css
/* iPhone 的横向和纵向 */
@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px) 
  and (-webkit-min-device-pixel-ratio : 3) {
    /* 在这里编写针对特定设备的CSS代码 */
}

/* 特定于iPad的媒体查询 */
@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (-webkit-min-device-pixel-ratio : 2) {
    /* 在这里编写针对特定设备的CSS代码 */
}

/* 可能适用于大多数iOS设备的高像素比 */
@media only screen 
  and (-webkit-min-device-pixel-ratio : 2), 
  only screen 
  and (min--moz-device-pixel-ratio : 2),
  only screen 
  and (-o-min-device-pixel-ratio : 2/1),
  only screen 
  and (min-device-pixel-ratio : 2),
  only screen 
  and (min-resolution : 2dppx) {
    /* 在这里编写针对高像素比设备的CSS代码 */
}
```

但是，要注意，这样的媒体查询并不能保证只会被iOS设备使用，因为其他具有类似特征的非iOS设备（比如其他制造商的高分辨率手机或平板电脑）也可能匹配这些规则。

另一个可能的方法是用JavaScript来检测用户代理（User Agent）字符串中是否含有iOS特有的标识符，然后动态添加一个对应的类名到`<body>`标签或在页面上动态写入特定的CSS。但是这种方法同样不是完全可靠的，因为用户代理字符串可能被伪造或因浏览器更新而改变。

```javascript
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    document.documentElement.className += " ios-device";
}
```

然后，在CSS中，您可以这样做：

```css
.ios-device .some-class {
    /* 特定于 iOS 设备的样式 */
}
```

所以，在实际操作中，我们通常会根据设备的屏幕大小和分辨率来编写媒体查询，而不是试图创建一个完全针对iOS设备的查询。这种做法更加通用，并且更能适应各种设备的屏幕。

CSS 如何利用媒体查询只针对 ios 设备？

在React中，我们可以使用不同的方法来从URL字符串中获取参数值，这通常涉及到处理路由。一个流行的库是React Router。以下是使用React Router v5和v6来从URL中获取参数值的几种方法。

### 使用 React Router v5

在React Router v5中，你可以通过`match`对象来访问URL参数。这些参数是通过定义在路由中的`path`属性捕获的。例子如下：

```jsx
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  // 使用 useParams 钩子来获取参数
  let { param1 } = useParams();

  // 现在你可以使用 param1 作为变量了
  return <div>参数值: {param1}</div>;
};

export default MyComponent;
```

在这个例子中，如果你的应用路由定义如下：

```jsx
<Route path="/somepath/:param1" component={MyComponent} />
```

当用户访问`/somepath/value1`时，`param1`将会是`value1`。

### 使用 React Router v6

在React Router v6中，获取参数的方式类似，但是更倾向于使用钩子而不是组件的props。这是一个例子：

```jsx
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  // 使用 useParams 钩子来获取参数
  const { param1 } = useParams();

  // 现在你可以使用 param1 作为变量了
  return <div>参数值: {param1}</div>;
};

export default MyComponent;
```

路由定义：

```jsx
import { Route, Routes } from 'react-router-dom';

// ...

<Routes>
  <Route path="/somepath/:param1" element={<MyComponent />} />
</Routes>
```

在这种情况下，`useParams` 钩子同样被用来获取动态路径参数。

### 查询参数

如果你需要获取的是查询参数（query parameters），也就是URL中`?`后面的那部分，则可以使用`useLocation`钩子来获取整个location对象，其中包括查询字符串：

```jsx
import React from 'react';
import { useLocation } from 'react-router-dom';

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const MyComponent = () => {
  const query = useQuery();
  const paramValue = query.get('param1'); // 假设URL是 /somepath?param1=value1

  return <div>查询参数值: {paramValue}</div>;
};

export default MyComponent;
```

这里，`useQuery`是一个自定义钩子，它封装了创建`URLSearchParams`实例的逻辑，让你可以通过`get`方法来获取特定的查询参数值。在这个例子中，如果URL是`/somepath?param1=value1`，那么`paramValue`变量将会是`value1`。

总的来说，在React中获取URL参数主要通过使用`useParams`来获取动态路由参数，以及通过`useLocation`和`URLSearchParams`来获取查询参数。这些是React Router库提供的工具，但它们实际上都是基于原生的Web API（比如`window.location`）进行封装的。在React中，从URL字符串中获取参数通常涉及到使用React Router库，因为它为路由相关的任务提供了方便的工具和组件。以下是在不同版本的React Router中获取URL参数的方法。

### 如果您使用的是 React Router v5：

您可以通过`useParams`钩子或`withRouter`高阶组件来获取参数值。这里有两个例子：

1. **使用`useParams`钩子** (适用于函数组件):
   ```javascript
   import React from 'react';
   import { useParams } from 'react-router-dom';

   const MyComponent = () => {
     let { myParam } = useParams();
     console.log(myParam); // 打印出URL参数myParam的值

     // 做其他操作...
     
     return <div>URL中的参数值: {myParam}</div>;
   };

   export default MyComponent;
   ```

   在这个例子中，如果您的路由定义是`<Route path="/somepath/:myParam" component={MyComponent} />`，那么当您访问`/somepath/value`时，`myParam`将会是`value`。

2. **使用`withRouter`高阶组件** (适用于类组件):
   ```javascript
   import React, { Component } from 'react';
   import { withRouter } from 'react-router-dom';

   class MyComponent extends Component {
     componentDidMount() {
       let { myParam } = this.props.match.params;
       console.log(myParam); // 打印出URL参数myParam的值
     }

     render() {
       let { myParam } = this.props.match.params;
       return <div>URL中的参数值: {myParam}</div>;
     }
   }

   export default withRouter(MyComponent);
   ```

   `withRouter`会向您的组件提供`match`、`location`和`history`对象，您可以通过这些对象来访问路由的相关信息。

### 如果您使用的是 React Router v6：

在React Router v6中，`useParams`仍然存在，但`withRouter`已经被移除。以下是使用`useParams`钩子的方法：

```javascript
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  let { myParam } = useParams();
  console.log(myParam); // 打印出URL参数myParam的值

  // 做其他操作...

  return <div>URL中的参数值: {myParam}</div>;
};

export default MyComponent;
```

在v6中，路由API做了许多改动，所以您可能也需要使用`Routes`和`Route`来定义路由，而不是v5的`Switch`和`Route`。

### 从URL查询字符串中获取参数：

除了路由参数之外，有时您可能还需要从URL的查询字符串（`?key=value`部分）中获取参数值。您可以使用`useLocation`钩子结合URLSearchParams API来实现这一点：

```javascript
import React from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  let location = useLocation();
  let queryParams = new URLSearchParams(location.search);
  let myQueryParam = queryParams.get('key'); // 假设URL是“/myroute?key=value”

  console.log(myQueryParam); // 打印出查询参数key的值

  // 做其他操作...

  return <div>URL查询字符串中的参数值: {myQueryParam}</div>;
};

export default MyComponent;
```

在这个例子中，如果URL是`/myroute?key=value`，那么`myQueryParam`将会是`value`。

这些就是在React中获取URL参数的几种常用方法。如果您需要更多帮助，请告诉我。

**React Router v6，使用钩子**

在react-router-dom v6中，有一个名为[useSearchParams](https://reactrouter.com/en/v6/hooks/use-search-params)的新钩子。所以与

    const [searchParams, setSearchParams] = useSearchParams();
    searchParams.get("__firebase_request_key")
    

你会得到`"blablabla"`。请注意，searchParams 是 URLSearchParams 的一个实例，它还实现了一个迭代器，例如用于使用 Object.fromEntries 等。

**React Router v4/v5，无钩子，通用**

React Router v4 不再为您解析查询，但您只能通过`this.props.location.search`（或 useLocation，见下文）访问它。原因请参见[nbeuchat 的回答](https://stackoverflow.com/a/48256676/969483)。

例如，您可以导入[qs](https://github.com/ljharb/qs)库`qs`

    qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
    

另一个库是[query-string](https://github.com/sindresorhus/query-string)。有关解析搜索字符串的更多想法，请参阅[此答案。](https://stackoverflow.com/a/53079875/969483)如果您不需要[IE 兼容性，](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)也可以使用

    new URLSearchParams(this.props.location.search).get("__firebase_request_key")
    

对于功能组件，您可以`this.props.location`用钩子[useLocation](https://reacttraining.com/react-router/core/api/Hooks/uselocation)替换。请注意，您可以使用`window.location.search`，但这不允许在更改时触发 React 渲染。如果您的（非功能性）组件不是 a 的直接子组件，`Switch`您需要使用[withRouter](https://reacttraining.com/react-router/web/api/withRouter)来访问路由器提供的任何道具。

**反应路由器 v3**

React Router 已经为您解析了位置并将其作为 props传递给您的[RouteComponent 。](https://reacttraining.com/react-router/core/api/Route/Route-props)您可以通过以下方式访问查询（网址中？之后）部分

    this.props.location.query.__firebase_request_key
    

如果您正在查找路由器内用冒号 (:) 分隔的路径参数值，可以通过以下方式访问这些值

    this.props.match.params.redirectParam
    

这适用于最新的 React Router v3 版本（不确定是哪个）。据报道，较旧的路由器版本使用`this.props.params.redirectParam`.

**一般的**

nizam.sp 的建议

    console.log(this.props)
    

无论如何都会有帮助。

反应路由器 v4
--------

**使用`component`**

    <Route path="/users/:id" component={UserPage}/> 
    

    this.props.match.params.id
    

该组件是使用路线道具自动渲染的。

  

**使用`render`**

    <Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 
    

    this.props.match.params.id
    

路线道具被传递给渲染函数。

**反应路由器 v3**

使用 React Router v3，您可以从 (?qs1=naisarg&qs2=parmar) 获取查询字符串`this.props.location.search`。例如，使用`let params = queryString.parse(this.props.location.search)`, 会给出`{ qs1 : 'naisarg', qs2 : 'parmar'}`

**反应路由器 v4**

使用 React Router v4，则`this.props.location.query`不再存在。您需要**`this.props.location.search`**自己使用或使用现有的包（例如[`query-string`](https://github.com/sindresorhus/query-string).

**例子**

这是使用 React Router v4 和库的最小示例`query-string`。

    import { withRouter } from 'react-router-dom';
    import queryString from 'query-string';
        
    class ActivateAccount extends Component{
        someFunction(){
            let params = queryString.parse(this.props.location.search)
            ...
        }
        ...
    }
    export default withRouter(ActivateAccount);
    

**合理的**

React Router 团队删除该`query`属性的理由是：

> 有许多流行的软件包在查询字符串解析/字符串化方面略有不同，并且这些差异中的每一个对于某些用户来说可能是“正确”的方式，而对于其他用户来说可能是“不正确”的方式。如果 React Router 选择了“正确”的一个，那么它只适合某些人。然后，需要添加一种方法供其他用户替换他们首选的查询解析包。React Router 没有内部使用搜索字符串，需要它解析键值对，因此它不需要选择其中哪一个应该是“正确的”。
> 
> \[...\]
> 
> 4.0 采取的方法是去掉所有“包含电池”的功能，并恢复到基本的路由。如果您需要查询字符串解析或异步加载或 Redux 集成或其他非常具体的东西，那么您可以将其添加到专门针对您的用例的库中。减少您不需要的东西，您可以根据您的特定偏好和需求进行自定义。

[您可以在GitHub](https://github.com/ReactTraining/react-router/issues/4410)上找到完整的讨论。

据我所知，可以通过三种方法来做到这一点。

1.使用正则表达式获取查询字符串。

2.您可以使用浏览器api。图片当前的url是这样的：

    http://www.google.com.au?token=123
    

我们只想得到123；

第一的

     const query = new URLSearchParams(this.props.location.search);
    

然后

    const token = query.get('token')
    console.log(token)//123
    

3.  使用名为“query-string”的第三个库。首先安装它
    
    npm i query-string 然后将其导入到当前的javascript文件中：
    
    从“查询字符串”导入查询字符串
    

下一步是获取当前 url 中的“token”，执行以下操作：

    const value=queryString.parse(this.props.location.search);
    const token=value.token;
    console.log('token',token)//123
    

**更新于 25/02/2019**

4\. 如果当前 url 如下所示：

[http://www.google.com.au?app=home&act=article&aid=160990](http://www.google.com.au?app=home&act=article&aid=160990)

我们定义一个函数来获取参数：

    function getQueryVariable(variable)
    {
            var query = window.location.search.substring(1);
            console.log(query)//"app=article&act=news_content&aid=160990"
            var vars = query.split("&");
            console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
            for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
            if(pair[0] == variable){return pair[1];}
             }
             return(false);
    }
    

我们可以通过以下方式获得“援助”：

    getQueryVariable('aid') //160990

当使用 React hooks 时，无法访问`this.props.location`. 要捕获 url 参数，请使用`window`object.

    const search = window.location.search;
    const params = new URLSearchParams(search);
    const foo = params.get('bar');

在React中，我们可以使用不同的方法来从URL字符串中获取参数值，这通常涉及到处理路由。一个流行的库是React Router。以下是使用React Router v5和v6来从URL中获取参数值的几种方法。

### 使用 React Router v5

在React Router v5中，你可以通过`match`对象来访问URL参数。这些参数是通过定义在路由中的`path`属性捕获的。例子如下：

```jsx
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  // 使用 useParams 钩子来获取参数
  let { param1 } = useParams();

  // 现在你可以使用 param1 作为变量了
  return <div>参数值: {param1}</div>;
};

export default MyComponent;
```

在这个例子中，如果你的应用路由定义如下：

```jsx
<Route path="/somepath/:param1" component={MyComponent} />
```

当用户访问`/somepath/value1`时，`param1`将会是`value1`。

### 使用 React Router v6

在React Router v6中，获取参数的方式类似，但是更倾向于使用钩子而不是组件的props。这是一个例子：

```jsx
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  // 使用 useParams 钩子来获取参数
  const { param1 } = useParams();

  // 现在你可以使用 param1 作为变量了
  return <div>参数值: {param1}</div>;
};

export default MyComponent;
```

路由定义：

```jsx
import { Route, Routes } from 'react-router-dom';

// ...

<Routes>
  <Route path="/somepath/:param1" element={<MyComponent />} />
</Routes>
```

在这种情况下，`useParams` 钩子同样被用来获取动态路径参数。

### 查询参数

如果你需要获取的是查询参数（query parameters），也就是URL中`?`后面的那部分，则可以使用`useLocation`钩子来获取整个location对象，其中包括查询字符串：

```jsx
import React from 'react';
import { useLocation } from 'react-router-dom';

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const MyComponent = () => {
  const query = useQuery();
  const paramValue = query.get('param1'); // 假设URL是 /somepath?param1=value1

  return <div>查询参数值: {paramValue}</div>;
};

export default MyComponent;
```

这里，`useQuery`是一个自定义钩子，它封装了创建`URLSearchParams`实例的逻辑，让你可以通过`get`方法来获取特定的查询参数值。在这个例子中，如果URL是`/somepath?param1=value1`，那么`paramValue`变量将会是`value1`。

总的来说，在React中获取URL参数主要通过使用`useParams`来获取动态路由参数，以及通过`useLocation`和`URLSearchParams`来获取查询参数。这些是React Router库提供的工具，但它们实际上都是基于原生的Web API（比如`window.location`）进行封装的。

在React中，从URL字符串中获取参数通常涉及到使用React Router库，因为它为路由相关的任务提供了方便的工具和组件。以下是在不同版本的React Router中获取URL参数的方法。

### 如果您使用的是 React Router v5：

您可以通过`useParams`钩子或`withRouter`高阶组件来获取参数值。这里有两个例子：

1. **使用`useParams`钩子** (适用于函数组件):
   ```javascript
   import React from 'react';
   import { useParams } from 'react-router-dom';

   const MyComponent = () => {
     let { myParam } = useParams();
     console.log(myParam); // 打印出URL参数myParam的值

     // 做其他操作...
     
     return <div>URL中的参数值: {myParam}</div>;
   };

   export default MyComponent;
   ```

   在这个例子中，如果您的路由定义是`<Route path="/somepath/:myParam" component={MyComponent} />`，那么当您访问`/somepath/value`时，`myParam`将会是`value`。

2. **使用`withRouter`高阶组件** (适用于类组件):
   ```javascript
   import React, { Component } from 'react';
   import { withRouter } from 'react-router-dom';

   class MyComponent extends Component {
     componentDidMount() {
       let { myParam } = this.props.match.params;
       console.log(myParam); // 打印出URL参数myParam的值
     }

     render() {
       let { myParam } = this.props.match.params;
       return <div>URL中的参数值: {myParam}</div>;
     }
   }

   export default withRouter(MyComponent);
   ```

   `withRouter`会向您的组件提供`match`、`location`和`history`对象，您可以通过这些对象来访问路由的相关信息。

### 如果您使用的是 React Router v6：

在React Router v6中，`useParams`仍然存在，但`withRouter`已经被移除。以下是使用`useParams`钩子的方法：

```javascript
import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  let { myParam } = useParams();
  console.log(myParam); // 打印出URL参数myParam的值

  // 做其他操作...

  return <div>URL中的参数值: {myParam}</div>;
};

export default MyComponent;
```

在v6中，路由API做了许多改动，所以您可能也需要使用`Routes`和`Route`来定义路由，而不是v5的`Switch`和`Route`。

### 从URL查询字符串中获取参数：

除了路由参数之外，有时您可能还需要从URL的查询字符串（`?key=value`部分）中获取参数值。您可以使用`useLocation`钩子结合URLSearchParams API来实现这一点：

```javascript
import React from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  let location = useLocation();
  let queryParams = new URLSearchParams(location.search);
  let myQueryParam = queryParams.get('key'); // 假设URL是“/myroute?key=value”

  console.log(myQueryParam); // 打印出查询参数key的值

  // 做其他操作...

  return <div>URL查询字符串中的参数值: {myQueryParam}</div>;
};

export default MyComponent;
```

在这个例子中，如果URL是`/myroute?key=value`，那么`myQueryParam`将会是`value`。

这些就是在React中获取URL参数的几种常用方法。如果您需要更多帮助，请告诉我。

Query string 如何从 query 字符串中获取参数值？

Redux 本身是一个同步状态管理库，它专注于以可预测的方式管理和更新应用程序的状态。Redux 的核心概念是纯函数的 reducer 和同步的 action。当应用程序需要处理异步操作，如数据的 API 请求时，Redux 单独并不能有效地处理。

异步中间件，如 Redux Thunk 或 Redux Saga，使得在 Redux 应用程序中处理异步逻辑成为可能。下面是一些为什么需要异步中间件的原因：

### 1. 处理异步操作
Redux 的基本原则是 action 应该是一个具有 `type` 属性的对象，而且 reducer 应该是同步的纯函数。这种模式并不适用于执行异步操作，例如 API 调用。异步中间件允许我们在 dispatching action 之前执行异步代码，然后根据异步操作的结果来 dispatch 实际的 action。

**例子：**
假设我们有一个获取用户信息的异步操作。使用 Redux Thunk，我们可以创建一个 thunk action creator，它返回一个函数而非 action 对象。这个函数能够执行异步请求并且在请求完成后 dispatch 一个 action。

```javascript
const fetchUserData = (userId) => {
    return (dispatch) => {
        dispatch({ type: 'FETCH_USER_REQUEST' });
        fetch(`/api/user/${userId}`)
            .then((response) => response.json())
            .then((user) => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
            .catch((error) => dispatch({ type: 'FETCH_USER_FAILURE', error }));
    };
};
```

### 2. 便于管理复杂的异步逻辑
在大型应用程序中，异步逻辑可能变得非常复杂，包括并发请求、条件请求、请求之间的竞争、错误处理等。异步中间件可以帮助管理这些复杂性，提供更清晰和更可维护的代码结构。

**例子：**
在使用 Redux Saga 的情况下，我们可以使用 ES6 的 generator 函数来更加直观和声明式地处理复杂的异步流。

```javascript
function* fetchUserDataSaga(action) {
    try {
        yield put({ type: 'FETCH_USER_REQUEST' });
        const user = yield call(fetchApi, `/api/user/${action.userId}`);
        yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
    } catch (error) {
        yield put({ type: 'FETCH_USER_FAILURE', error });
    }
}
```

### 3. 更好的测试性
异步中间件使得异步逻辑更加独立于组件，这有助于进行单元测试。我们可以在不进行实际的 API 调用的情况下，测试 action creators 和 reducers 的逻辑。

**例子：**
使用 Redux Thunk，我们可以测试 thunk action creator 是否正确地 dispatch 了相应的 actions。

```javascript
// 使用 Jest 测试框架
it('creates FETCH_USER_SUCCESS when fetching user has been done', () => {
    // 模拟 dispatch 和 getState 函数
    const dispatch = jest.fn();
    const getState = jest.fn();

    // 模拟 fetch API
    global.fetch = jest.fn(() =>
        Promise.resolve({
            json: () => Promise.resolve({ id: 1, name: 'John Doe' }),
        })
    );

    // 执行 thunk action creator
    return fetchUserData(1)(dispatch, getState).then(() => {
        // 检查是否 dispatch 了正确的 action
        expect(dispatch).toHaveBeenCalledWith({ type: 'FETCH_USER_SUCCESS', payload: { id: 1, name: 'John Doe' } });
    });
});
```

### 总结
Redux 需要异步中间件来处理异步操作，帮助维护复杂的异步逻辑，并提高代码的可测试性。这些中间件扩展了 Redux，使其能够以一种既有序又高效的方式处理异步数据流。Redux 作为一个状态管理库，其核心设计是围绕着同步的状态更新。也就是说，在没有任何中间件的情况下，当一个 action 被派发（dispatched）时，它会立即通过同步的 reducers 更新状态。然而，在实际的应用中，我们经常需要处理异步操作，比如从服务器获取数据，这些操作并不能立刻完成并返回数据。

因此，为了在 Redux 架构中处理这些异步操作，我们需要一种方式来扩展 Redux 的功能，使其能够处理异步逻辑。这就是异步中间件的用武之地。以下是几个为什么 Redux 需要异步数据流中间件的理由：

1. **维护纯净的 reducer 函数**：
   Reducer 函数应该是纯函数，这意味着给定相同的输入，总是返回相同的输出，并且不产生任何副作用。异步操作（如 API 调用）会产生副作用，因此不能直接在 reducer 中处理。

2. **扩展 Redux 的功能**：
   异步中间件像是 Redux 生态系统中的插件，它允许开发者在不修改原始 Redux 库代码的情况下增加新的功能。例如，可以增加日志记录、错误报告或异步处理等功能。

3. **异步控制流**：
   异步中间件允许开发者在派发 action 和到达 reducer 之间插入一个异步操作。这意味着可以先发出一个表示“开始异步操作”的 action，然后在操作完成时发出另一个表示“异步操作完成”的 action。

4. **更干净的代码结构**：
   通过将异步逻辑封装在中间件内，我们可以保持组件和 reducer 的简洁。这避免了在组件中混合异步调用和状态管理逻辑，有助于代码分离和维护。

5. **测试和调试的便捷性**：
   中间件提供了一个独立的层，可以在这个层中进行单独的测试和模拟异步行为，而不必担心组件逻辑或者 UI 层的细节。

### 例子

在实际应用中，最常见的异步中间件是 `redux-thunk` 和 `redux-saga`。

- **redux-thunk** 允许 action 创建函数（action creators）返回一个函数而不是一个 action 对象。这个返回的函数接收 `dispatch` 和 `getState` 作为参数，让你可以进行异步操作，并在操作结束后派发一个新的 action。

```javascript
const fetchUserData = (userId) => {
  return (dispatch, getState) => {
    dispatch({ type: 'USER_FETCH_REQUESTED', userId });
    return fetchUserFromApi(userId)
      .then(userData => {
        dispatch({ type: 'USER_FETCH_SUCCEEDED', userData });
      })
      .catch(error => {
        dispatch({ type: 'USER_FETCH_FAILED', error });
      });
  };
};
```

- **redux-saga** 则使用 ES6 的 Generator 函数来使异步流更易于读写。Sagas 可以监听派发到 store 的 actions，并在某个 action 被派发时执行复杂的异步逻辑。

```javascript
import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const user = yield call(Api.fetchUser, action.payload.userId);
    yield put({type: 'USER_FETCH_SUCCEEDED', user: user});
  } catch (e) {
    yield put({type: 'USER_FETCH_FAILED', message: e.message});
  }
}

function* mySaga() {
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser);
}
```

总的来说，异步中间件在处理复杂的异步数据流时，可以提高 Redux 应用的可扩

> 这种方法有什么问题吗？正如文档所示，为什么我要使用 Redux Thunk 或 Redux Promise？

这种做法并没有什么问题。这在大型应用程序中很不方便，因为您将有不同的组件执行相同的操作，您可能想要对某些操作进行反跳，或者保留一些本地状态，例如自动递增 ID 靠近操作创建者等。因此，从从维护的角度将动作创建者提取到单独的功能中。

**您可以阅读[我对“如何在超时情况下调度 Redux 操作”的回答，](https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559)以获取更详细的演练。**

像 Redux Thunk 或 Redux Promise 这样的中间件只是为您提供了用于调度 thunk 或 Promise 的“语法糖”，但您不必_使用_它。

因此，如果没有任何中间件，您的动作创建器可能看起来像

    // action creator
    function loadData(dispatch, userId) { // needs to dispatch, so it is first argument
      return fetch(`http://data.com/${userId}`)
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
          err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
        );
    }
    
    // component
    componentWillMount() {
      loadData(this.props.dispatch, this.props.userId); // don't forget to pass dispatch
    }
    

但是使用 Thunk Middleware 你可以这样写：

    // action creator
    function loadData(userId) {
      return dispatch => fetch(`http://data.com/${userId}`) // Redux Thunk handles these
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
          err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
        );
    }
    
    // component
    componentWillMount() {
      this.props.dispatch(loadData(this.props.userId)); // dispatch like you usually do
    }
    

所以没有太大的区别。我喜欢后一种方法的一件事是该组件不关心动作创建者是否异步。它只是正常调用`dispatch`，它也可以用`mapDispatchToProps`简短的语法来绑定这样的动作创建者等。组件不知道动作创建者是如何实现的，你可以在不同的异步方法之间切换（Redux Thunk，Redux Promise，Redux Saga） ）而不改变组件。另一方面，使用前一种显式方法，您的组件_确切地_知道特定调用是异步的，并且需要`dispatch`通过某种约定传递（例如，作为同步参数）。

还要考虑一下这段代码将如何改变。假设我们想要有第二个数据加载功能，并将它们组合在一个动作创建器中。

使用第一种方法时，我们需要注意我们所调用的动作创建者类型：

    // action creators
    function loadSomeData(dispatch, userId) {
      return fetch(`http://data.com/${userId}`)
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
          err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
        );
    }
    function loadOtherData(dispatch, userId) {
      return fetch(`http://data.com/${userId}`)
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
          err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
        );
    }
    function loadAllData(dispatch, userId) {
      return Promise.all(
        loadSomeData(dispatch, userId), // pass dispatch first: it's async
        loadOtherData(dispatch, userId) // pass dispatch first: it's async
      );
    }
    
    
    // component
    componentWillMount() {
      loadAllData(this.props.dispatch, this.props.userId); // pass dispatch first
    }
    

使用 Redux Thunk 动作创建者可以`dispatch`得到其他动作创建者的结果，甚至不用考虑它们是同步还是异步：

    // action creators
    function loadSomeData(userId) {
      return dispatch => fetch(`http://data.com/${userId}`)
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
          err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
        );
    }
    function loadOtherData(userId) {
      return dispatch => fetch(`http://data.com/${userId}`)
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
          err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
        );
    }
    function loadAllData(userId) {
      return dispatch => Promise.all(
        dispatch(loadSomeData(userId)), // just dispatch normally!
        dispatch(loadOtherData(userId)) // just dispatch normally!
      );
    }
    
    
    // component
    componentWillMount() {
      this.props.dispatch(loadAllData(this.props.userId)); // just dispatch normally!
    }
    

通过这种方法，如果您稍后希望操作创建者查看当前的 Redux 状态，您可以只使用`getState`传递给 thunk 的第二个参数，而无需修改调用代码：

    function loadSomeData(userId) {
      // Thanks to Redux Thunk I can use getState() here without changing callers
      return (dispatch, getState) => {
        if (getState().data[userId].isLoaded) {
          return Promise.resolve();
        }
    
        fetch(`http://data.com/${userId}`)
          .then(res => res.json())
          .then(
            data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
            err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
          );
      }
    }
    

如果需要将其更改为同步，也可以在不更改任何调用代码的情况下执行此操作：

    // I can change it to be a regular action creator without touching callers
    function loadSomeData(userId) {
      return {
        type: 'LOAD_SOME_DATA_SUCCESS',
        data: localStorage.getItem('my-data')
      }
    }
    

因此，使用 Redux Thunk 或 Redux Promise 等中间件的好处是，组件不知道操作创建者是如何实现的，也不知道它们是否关心 Redux 状态，它们是同步还是异步，以及它们是否调用其他操作创建者。缺点是有点间接，但我们相信在实际应用中这是值得的。

最后，Redux Thunk 和朋友只是 Redux 应用程序中异步请求的一种可能方法。另一个有趣的方法是[Redux Saga](https://github.com/yelouafi/redux-saga)，它允许您定义长期运行的守护进程（“saga”），这些守护进程在出现操作时采取操作，并在输出操作之前转换或执行请求。这将逻辑从动作创造者转变为传奇。您可能想检查一下，然后选择最适合您的。

> 我在 Redux 存储库中搜索线索，发现过去 Action Creator 被要求是纯函数。

这是不正确的。文档是这么说的，但文档是错误的。  
动作创建者从来不需要是纯函数。  
我们修复了文档以反映这一点。

你不知道。
=====

但是......你应该使用 redux-saga :)
===========================

Dan Abramov 的答案是正确的`redux-thunk`，但我会更多地谈论[redux-saga](https://github.com/yelouafi/redux-saga)，它非常相似但更强大。

命令式 VS 声明式
==========

*   **DOM**：jQuery 是命令式的 / React 是声明式的
*   **Monads**：IO 是命令式的 / Free 是声明式的
*   **Redux 效果**：`redux-thunk`命令式/`redux-saga`声明式

当你手中有一个 thunk 时，比如 IO monad 或 Promise，你无法轻易知道执行后它会做什么。测试 thunk 的唯一方法是执行它，并模拟调度程序（或整个外部世界，如果它与更多东西交互......）。

如果您使用模拟，那么您就不是在进行函数式编程。

> 从副作用的角度来看，模拟是您的代码不纯的标志，并且在函数式程序员的眼中，是出现问题的证据。我们不应该下载一个库来帮助我们检查冰山是否完好，而应该绕着它航行。一位铁杆 TDD/Java 人员曾经问我如何在 Clojure 中进行模拟。答案是，我们通常不会。我们通常将其视为需要重构代码的标志。

[来源](http://blog.jenkster.com/2015/12/which-programming-languages-are-functional.html)

sagas（正如它们在 中实现的那样`redux-saga`）是声明性的，就像 Free monad 或 React 组件一样，它们更容易在没有任何模拟的情况下进行测试。

另请参阅这篇[文章](http://degoes.net/articles/modern-fp)：

> 在现代函数式编程中，我们不应该编写程序——我们应该编写程序的描述，然后我们可以随意内省、转换和解释。

（实际上，Redux-saga 就像一个混合体：流程是命令式的，但效果是声明性的）

混乱：动作/事件/命令...
==============

在前端世界中，对于 CQRS / EventSourcing 和 Flux / Redux 等一些后端概念如何相关可能存在很多困惑，主要是因为在 Flux 中我们使用术语“操作”，它有时可以表示命令式代码 ( )`LOAD_USER`和事件 ( `USER_LOADED`）。我相信，就像事件溯源一样，您应该只调度事件。

在实践中使用传奇
========

想象一个带有用户个人资料链接的应用程序。使用每个中间件处理这个问题的惯用方法是：

`redux-thunk`
-------------

    <div onClick={e => dispatch(actions.loadUserProfile(123)}>Robert</div>
    
    function loadUserProfile(userId) {
      return dispatch => fetch(`http://data.com/${userId}`)
        .then(res => res.json())
        .then(
          data => dispatch({ type: 'USER_PROFILE_LOADED', data }),
          err => dispatch({ type: 'USER_PROFILE_LOAD_FAILED', err })
        );
    }
    

`redux-saga`
------------

    <div onClick={e => dispatch({ type: 'USER_NAME_CLICKED', payload: 123 })}>Robert</div>
    
    
    function* loadUserProfileOnNameClick() {
      yield* takeLatest("USER_NAME_CLICKED", fetchUser);
    }
    
    function* fetchUser(action) {
      try {
        const userProfile = yield fetch(`http://data.com/${action.payload.userId }`)
        yield put({ type: 'USER_PROFILE_LOADED', userProfile })
      } 
      catch(err) {
        yield put({ type: 'USER_PROFILE_LOAD_FAILED', err })
      }
    }
    

这个传奇翻译过来就是：

> 每次单击用户名时，都会获取用户配置文件，然后使用加载的配置文件调度一个事件。

正如您所看到的，有一些优点`redux-saga`。

使用`takeLatest`许可证来表达您只对获取最后单击的用户名的数据感兴趣（处理并发问题，以防用户快速单击大量用户名）。这种东西很难用 thunks 来完成。`takeEvery`如果您不想要这种行为，您可以使用。

你让动作创造者保持纯粹。请注意，保留 actionCreators （在 sagas`put`和 elements中`dispatch`）仍然很有用，因为它可能会帮助您将来添加操作验证（断言/流程/打字稿）。

由于效果是声明性的，您的代码变得更加可测试

您不再需要触发类似 rpc 的调用，例如`actions.loadUser()`. 你的用户界面只需要发送已经发生的事情。我们只触发**事件**（总是过去时！），不再触发动作。这意味着您可以创建解耦的[“鸭子”](https://github.com/erikras/ducks-modular-redux)或[限界上下文](http://martinfowler.com/bliki/BoundedContext.html)，并且传奇可以充当这些模块化组件之间的耦合点。

这意味着您的视图更易于管理，因为它们不再需要包含已发生的情况和应该发生的效果之间的转换层

例如，想象一个无限滚动视图。`CONTAINER_SCROLLED`可以导致`NEXT_PAGE_LOADED`，但是可滚动容器真的有责任决定我们是否应该加载另一个页面吗？然后他必须了解更复杂的事情，例如最后一个页面是否已成功加载，或者是否已经有一个页面正在尝试加载，或者是否没有更多项目可供加载？我不这么认为：为了获得最大的可重用性，可滚动容器应该只描述它已被滚动。页面的加载是该滚动的“业务效果”

有些人可能会认为生成器本质上可以使用局部变量隐藏 redux 存储之外的状态，但是如果您开始通过启动计时器等在 thunk 内部编排复杂的事情，无论如何您都会遇到同样的问题。现在有一个`select`效果允许从 Redux 存储中获取一些状态。

Sagas 可以进行时间旅行，还可以实现复杂的流日志记录和当前正在开发的开发工具。以下是一些已经实现的简单异步流日志记录：

[![传奇流日志记录](https://i.stack.imgur.com/F9Jsh.png)](https://i.stack.imgur.com/F9Jsh.png)

解耦
==

Sagas 不仅取代了 redux thunk。它们来自后端/分布式系统/事件源。

这是一个非常常见的误解，认为 sagas 只是为了取代 redux thunk 来提供更好的可测试性。实际上这只是 redux-saga 的一个实现细节。对于可测试性而言，使用声明性效果比 thunk 更好，但 saga 模式可以在命令式或声明性代码之上实现。

首先，saga 是一个软件，允许协调长期运行的事务（最终一致性）以及跨不同有界上下文的事务（领域驱动设计术语）。

为了简化前端世界，假设有 widget1 和 widget2。当点击 widget1 上的某个按钮时，它应该会对 widget2 产生影响。widget1 没有将 2 个小部件耦合在一起（即小部件 1 调度针对小部件 2 的操作），而是仅调度其按钮被单击。然后 saga 侦听此按钮单击，然后通过调度 widget2 知道的新事件来更新 widget2。

这增加了简单应用程序不必要的间接级别，但使扩展复杂应用程序变得更容易。现在，您可以将 widget1 和 widget2 发布到不同的 npm 存储库，这样它们就永远不必相互了解，而无需让它们共享全局操作注册表。这两个小部件现在是可以单独存在的有界上下文。它们不需要彼此保持一致，也可以在其他应用程序中重复使用。传奇是两个小部件之间的耦合点，以对您的业务有意义的方式协调它们。

一些关于如何构建 Redux 应用程序的好文章，您可以在其中使用 Redux-saga 来实现解耦：

*   [http://jaysoo.ca/2016/02/28/organizing-redux-application/](http://jaysoo.ca/2016/02/28/organizing-redux-application/)
*   [http://marmelab.com/blog/2015/12/17/react-directory-struct.html](http://marmelab.com/blog/2015/12/17/react-directory-structure.html)
*   [https://github.com/slorber/scalable-frontend-with-elm-or-redux](https://github.com/slorber/scalable-frontend-with-elm-or-redux)

具体用例：通知系统
=========

我希望我的组件能够触发应用内通知的显示。但我不希望我的组件与具有自己的业务规则的通知系统高度耦合（最多同时显示 3 个通知、通知排队、4 秒显示时间等...）。

我不希望我的 JSX 组件决定通知何时显示/隐藏。我只是赋予它请求通知的能力，并将复杂的规则留在传奇中。这种事情很难通过 thunk 或 Promise 来实现。

[![通知](https://i.stack.imgur.com/XQ8lx.png)](https://i.stack.imgur.com/XQ8lx.png)

我[在这里](https://stackoverflow.com/a/38574266/82609)描述了如何使用 saga 来完成此操作

为什么叫传奇呢？
========

saga 这个术语来自后端世界。[我最初在一次长时间的讨论](https://github.com/paldepind/functional-frontend-architecture/issues/20#issuecomment-158694062)中向 Yassine（Redux-saga 的作者）介绍了这个术语。

[最初，该术语是在一篇论文](http://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf)中引入的，saga 模式应该用于处理分布式事务中的最终一致性，但后端开发人员已将其用法扩展到更广泛的定义，因此它现在还涵盖“流程管理器”模式（不知何故，原始的 saga 模式是流程管理器的一种特殊形式）。

如今，“传奇”一词很令人困惑，因为它可以描述两种不同的事物。正如它在 redux-saga 中使用的那样，它并不描述一种处理分布式事务的方法，而是一种协调应用程序中操作的方法。`redux-saga`也可以被称为`redux-process-manager`。

也可以看看：

*   [Yassine 关于 Redux-saga 历史的采访](http://survivejs.com/blog/redux-saga-interview/)
*   [Kella Byte：阐释 Saga 模式](http://kellabyte.com/2012/05/30/clarifying-the-saga-pattern/)
*   [Microsoft CQRS 之旅：传奇上的传奇](https://msdn.microsoft.com/en-us/library/jj591569.aspx)
*   [亚辛的中等反应](https://medium.com/@yelouafi/agree-for-the-saga-confusion-3fb2fc375322#.dxe1prl4y)

备择方案
====

如果您不喜欢使用生成器的想法，但对 saga 模式及其解耦属性感兴趣，您也可以使用[redux-observable](https://github.com/redux-observable/redux-observable)实现相同的目的，它使用名称`epic`来描述完全相同的模式，但使用 RxJS。如果您已经熟悉 Rx，您会感到宾至如归。

    const loadUserProfileOnNameClickEpic = action$ =>
      action$.ofType('USER_NAME_CLICKED')
        .switchMap(action =>
          Observable.ajax(`http://data.com/${action.payload.userId}`)
            .map(userProfile => ({
              type: 'USER_PROFILE_LOADED',
              userProfile
            }))
            .catch(err => Observable.of({
              type: 'USER_PROFILE_LOAD_FAILED',
              err
            }))
        );
    

一些 redux-saga 有用的资源
===================

*   [Redux-saga 与带有 async/await 的 Redux-thunk](https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async/34933395)
*   [管理 Redux Saga 中的流程](http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas)
*   [从 actionsCreators 到 Sagas](https://riad.blog/2015/12/28/redux-nowadays-from-actions-creators-to-sagas/)
*   [使用 Redux-saga 实现的贪吃蛇游戏](http://codepen.io/CrocoDillon/pen/pgaRwb?editors=0010)

2017年建议
=======

*   不要为了使用 Redux-saga 而过度使用它。仅可测试的 API 调用是不值得的。
*   对于大多数简单的情况，不要从项目中删除 thunk。
*   `yield put(someActionThunk)`如果有意义的话，请毫不犹豫地发出重击。

如果您害怕使用 Redux-saga （或 Redux-observable）但只需要解耦模式，请检查[redux-dispatch-subscribe](https://github.com/slorber/redux-dispatch-subscribe)：它允许侦听调度并在侦听器中触发新调度。

    const unsubscribe = store.addDispatchListener(action => {
      if (action.type === 'ping') {
        store.dispatch({ type: 'pong' });
      }
    });

**简短的回答**：对我来说，这似乎是解决异步问题的完全合理的方法。有一些警告。

在我们刚刚开始工作的新项目中，我也有非常相似的想法。我是 vanilla Redux 优雅系统的忠实粉丝，该系统以一种远离 React 组件树内部的方式更新存储和重新渲染组件。对我来说，使用这种优雅的`dispatch`机制来处理异步似乎很奇怪。

我最终采用了与我从项目中提取的库中的方法非常相似的方法，我们将其称为“ [react-redux-controller”](https://github.com/artsy/react-redux-controller)。

由于以下几个原因，我最终没有采用您上面的确切方法：

1.  按照您的编写方式，这些调度函数无法访问商店。您可以通过让 UI 组件传入调度函数所需的所有信息来解决这个问题。但我认为这不必要地将这些 UI 组件与调度逻辑耦合起来。更成问题的是，调度函数没有明显的方法来访问异步延续中的更新状态。
2.  调度函数可以通过词法作用域访问`dispatch`自身。一旦该语句失控，这就会限制重构的选项`connect`——而且仅使用这种方法看起来相当笨重`update`。因此，如果您将这些调度程序功能分解为单独的模块，您需要一些系统来组合它们。

总而言之，您必须安装一些系统，以允许`dispatch`将存储以及事件的参数注入到您的调度函数中。我知道这种依赖注入的三种合理方法：

*   [redux-thunk](https://github.com/gaearon/redux-thunk)通过将它们传递到你的 thunk 中，以一种函数式的方式做到这一点（根据 dome 的定义，使它们根本不完全是 thunk）。我没有使用过其他`dispatch`中间件方法，但我认为它们基本上是相同的。
*   React-redux-controller 使用协程来完成此操作。作为奖励，它还使您可以访问“选择器”，这些函数是您可能作为第一个参数传递给 的函数`connect`，而不必直接使用原始的标准化存储。
*   `this`您还可以通过各种可能的机制将它们注入上下文中，以面向对象的方式完成此操作。

**更新**

我发现这个难题的一部分是[react-redux](https://github.com/rackt/react-redux)的限制。第一个参数[`connect`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)获取状态快照，但不获取调度。第二个参数得到调度，但没有得到状态。这两个参数都没有得到关闭当前状态的 thunk，以便能够在继续/回调时看到更新的状态。

Abramov 的目标（也是每个人的理想目标）只是将_复杂性（和异步调用）封装在最合适和可重用的地方_。

在标准 Redux 数据流中执行此操作的最佳位置在哪里？怎么样：

*   **减速机**？决不。它们应该是没有副作用的纯函数。更新商店是一件严肃而复杂的事情。不要污染它。
*   **愚蠢的视图组件？**绝对不是。他们关心的只有一个：演示和用户交互，并且应该尽可能简单。
*   **容器组件？**可能，但不是最优的。这是有道理的，因为容器是我们封装一些与视图相关的复杂性并与存储交互的地方，但是：
    *   容器确实需要比哑组件更复杂，但它仍然是单一职责：提供视图和状态/存储之间的绑定。您的异步逻辑与此完全不同。
    *   通过将其放置在容器中，您可以将异步逻辑锁定到单个上下文中，并与一个或多个视图/路由耦合。馊主意。理想情况下，它都是可重用的，并且与视图完全分离。
    *   （与所有规则一样，如果您拥有可在多个上下文中重用的有状态绑定逻辑，或者您可以以某种方式将所有状态概括为集成 GraphQL 模式之类的东西，则可能存在例外。好吧，好吧，这可能是很酷。但是......大多数时候，绑定似乎最终都非常特定于上下文/视图。）
*   **其他一些服务模块？**坏主意：您需要注入对商店的访问权限，这是可维护性/可测试性的噩梦。最好遵循 Redux 的原则，仅使用提供的 API/模型访问商店。
*   **操作和解释它们的中间件？**为什么不？！对于初学者来说，这是我们剩下的唯一主要选择。:-) 从逻辑上讲，操作系统是解耦的执行逻辑，您可以在任何地方使用它。它可以访问商店并可以调度更多操作。它有一个单一的职责，那就是围绕应用程序组织控制流和数据流，大多数异步都适合这一点。
    *   那么动作创作者呢？为什么不直接在那里进行异步，而不是在操作本身和中间件中进行异步？
        *   首先也是最重要的是，创建者无法像中间件那样访问商店。这意味着您无法调度新的或有操作，无法从存储中读取数据来编写异步操作等。
        *   因此，将复杂性保留在必要性复杂的地方，并保持其他一切简单。创建者可以是简单、相对纯粹、易于测试的函数。

回答一开始提出的问题：

> 为什么容器组件不能调用异步 API，然后分派操作？

请记住，这些文档适用于 Redux，而不是 Redux 加 React。_连接到 React 组件的_Redux 存储可以完全按照你所说的操作，但是没有中间件的 Plain Jane Redux 存储不接受除`dispatch`普通 ol' 对象之外的参数。

没有中间件，你当然仍然可以这样做

    const store = createStore(reducer);
    MyAPI.doThing().then(resp => store.dispatch(...));
    

但这是一个类似的情况，异步是_围绕_Redux 进行的，而不是_由_Redux 处理。因此，中间件通过修改可以直接传递给`dispatch`.

* * *

也就是说，我认为你的建议的精神是有效的。当然还有其他方法可以在 Redux + React 应用程序中处理异步。

使用中间件的好处之一是您可以继续照常使用动作创建器，而不必担心它们是如何连接的。例如，使用`redux-thunk`，您编写的代码看起来很像

    function updateThing() {
      return dispatch => {
        dispatch({
          type: ActionTypes.STARTED_UPDATING
        });
        AsyncApi.getFieldValue()
          .then(result => dispatch({
            type: ActionTypes.UPDATED,
            payload: result
          }));
      }
    }
    
    const ConnectedApp = connect(
      (state) => { ...state },
      { update: updateThing }
    )(App);
    

它看起来与原始版本没有什么不同——只是稍微打乱了一点——并且`connect`不知道这`updateThing`是（或需要）异步的。

如果您还想支持[Promise](https://github.com/acdlite/redux-promise)、[Observables](https://github.com/acdlite/redux-rx)、[Sagas](https://github.com/yelouafi/redux-saga)或[疯狂的自定义](https://github.com/rackt/redux/blob/b35c1c95432e793df92609938ae79be96788e09e/examples/real-world/middleware/api.js#L76-L123)和[高度声明性的](https://github.com/rackt/redux/blob/b35c1c95432e793df92609938ae79be96788e09e/examples/real-world/actions/index.js#L9-L17)Action Creators，那么 Redux 只需更改您传递给的内容`dispatch`（也就是您从 Action Creators 返回的内容）即可做到这一点。无需对 React 组件（或`connect`调用）进行任何改动。

Redux 本身是一个同步状态管理库，它专注于以可预测的方式管理和更新应用程序的状态。Redux 的核心概念是纯函数的 reducer 和同步的 action。当应用程序需要处理异步操作，如数据的 API 请求时，Redux 单独并不能有效地处理。

异步中间件，如 Redux Thunk 或 Redux Saga，使得在 Redux 应用程序中处理异步逻辑成为可能。下面是一些为什么需要异步中间件的原因：

### 1. 处理异步操作
Redux 的基本原则是 action 应该是一个具有 `type` 属性的对象，而且 reducer 应该是同步的纯函数。这种模式并不适用于执行异步操作，例如 API 调用。异步中间件允许我们在 dispatching action 之前执行异步代码，然后根据异步操作的结果来 dispatch 实际的 action。

**例子：**
假设我们有一个获取用户信息的异步操作。使用 Redux Thunk，我们可以创建一个 thunk action creator，它返回一个函数而非 action 对象。这个函数能够执行异步请求并且在请求完成后 dispatch 一个 action。

```javascript
const fetchUserData = (userId) => {
    return (dispatch) => {
        dispatch({ type: 'FETCH_USER_REQUEST' });
        fetch(`/api/user/${userId}`)
            .then((response) => response.json())
            .then((user) => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
            .catch((error) => dispatch({ type: 'FETCH_USER_FAILURE', error }));
    };
};
```

### 2. 便于管理复杂的异步逻辑
在大型应用程序中，异步逻辑可能变得非常复杂，包括并发请求、条件请求、请求之间的竞争、错误处理等。异步中间件可以帮助管理这些复杂性，提供更清晰和更可维护的代码结构。

**例子：**
在使用 Redux Saga 的情况下，我们可以使用 ES6 的 generator 函数来更加直观和声明式地处理复杂的异步流。

```javascript
function* fetchUserDataSaga(action) {
    try {
        yield put({ type: 'FETCH_USER_REQUEST' });
        const user = yield call(fetchApi, `/api/user/${action.userId}`);
        yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
    } catch (error) {
        yield put({ type: 'FETCH_USER_FAILURE', error });
    }
}
```

### 3. 更好的测试性
异步中间件使得异步逻辑更加独立于组件，这有助于进行单元测试。我们可以在不进行实际的 API 调用的情况下，测试 action creators 和 reducers 的逻辑。

**例子：**
使用 Redux Thunk，我们可以测试 thunk action creator 是否正确地 dispatch 了相应的 actions。

```javascript
// 使用 Jest 测试框架
it('creates FETCH_USER_SUCCESS when fetching user has been done', () => {
    // 模拟 dispatch 和 getState 函数
    const dispatch = jest.fn();
    const getState = jest.fn();

    // 模拟 fetch API
    global.fetch = jest.fn(() =>
        Promise.resolve({
            json: () => Promise.resolve({ id: 1, name: 'John Doe' }),
        })
    );

    // 执行 thunk action creator
    return fetchUserData(1)(dispatch, getState).then(() => {
        // 检查是否 dispatch 了正确的 action
        expect(dispatch).toHaveBeenCalledWith({ type: 'FETCH_USER_SUCCESS', payload: { id: 1, name: 'John Doe' } });
    });
});
```

### 总结
Redux 需要异步中间件来处理异步操作，帮助维护复杂的异步逻辑，并提高代码的可测试性。这些中间件扩展了 Redux，使其能够以一种既有序又高效的方式处理异步数据流。

Redux 本身是一个同步状态管理库，它专注于以可预测的方式管理和更新应用程序的状态。Redux 的核心概念是纯函数的 reducer 和同步的 action。当应用程序需要处理异步操作，如数据的 API 请求时，Redux 单独并不能有效地处理。

异步中间件，如 Redux Thunk 或 Redux Saga，使得在 Redux 应用程序中处理异步逻辑成为可能。下面是一些为什么需要异步中间件的原因：

### 1. 处理异步操作
Redux 的基本原则是 action 应该是一个具有 `type` 属性的对象，而且 reducer 应该是同步的纯函数。这种模式并不适用于执行异步操作，例如 API 调用。异步中间件允许我们在 dispatching action 之前执行异步代码，然后根据异步操作的结果来 dispatch 实际的 action。

**例子：**
假设我们有一个获取用户信息的异步操作。使用 Redux Thunk，我们可以创建一个 thunk action creator，它返回一个函数而非 action 对象。这个函数能够执行异步请求并且在请求完成后 dispatch 一个 action。

```javascript
const fetchUserData = (userId) => {
    return (dispatch) => {
        dispatch({ type: 'FETCH_USER_REQUEST' });
        fetch(`/api/user/${userId}`)
            .then((response) => response.json())
            .then((user) => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
            .catch((error) => dispatch({ type: 'FETCH_USER_FAILURE', error }));
    };
};
```

### 2. 便于管理复杂的异步逻辑
在大型应用程序中，异步逻辑可能变得非常复杂，包括并发请求、条件请求、请求之间的竞争、错误处理等。异步中间件可以帮助管理这些复杂性，提供更清晰和更可维护的代码结构。

**例子：**
在使用 Redux Saga 的情况下，我们可以使用 ES6 的 generator 函数来更加直观和声明式地处理复杂的异步流。

```javascript
function* fetchUserDataSaga(action) {
    try {
        yield put({ type: 'FETCH_USER_REQUEST' });
        const user = yield call(fetchApi, `/api/user/${action.userId}`);
        yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
    } catch (error) {
        yield put({ type: 'FETCH_USER_FAILURE', error });
    }
}
```

### 3. 更好的测试性
异步中间件使得异步逻辑更加独立于组件，这有助于进行单元测试。我们可以在不进行实际的 API 调用的情况下，测试 action creators 和 reducers 的逻辑。

**例子：**
使用 Redux Thunk，我们可以测试 thunk action creator 是否正确地 dispatch 了相应的 actions。

```javascript
// 使用 Jest 测试框架
it('creates FETCH_USER_SUCCESS when fetching user has been done', () => {
    // 模拟 dispatch 和 getState 函数
    const dispatch = jest.fn();
    const getState = jest.fn();

    // 模拟 fetch API
    global.fetch = jest.fn(() =>
        Promise.resolve({
            json: () => Promise.resolve({ id: 1, name: 'John Doe' }),
        })
    );

    // 执行 thunk action creator
    return fetchUserData(1)(dispatch, getState).then(() => {
        // 检查是否 dispatch 了正确的 action
        expect(dispatch).toHaveBeenCalledWith({ type: 'FETCH_USER_SUCCESS', payload: { id: 1, name: 'John Doe' } });
    });
});
```

### 总结
Redux 需要异步中间件来处理异步操作，帮助维护复杂的异步逻辑，并提高代码的可测试性。这些中间件扩展了 Redux，使其能够以一种既有序又高效的方式处理异步数据流。
Redux 作为一个状态管理库，其核心设计是围绕着同步的状态更新。也就是说，在没有任何中间件的情况下，当一个 action 被派发（dispatched）时，它会立即通过同步的 reducers 更新状态。然而，在实际的应用中，我们经常需要处理异步操作，比如从服务器获取数据，这些操作并不能立刻完成并返回数据。

因此，为了在 Redux 架构中处理这些异步操作，我们需要一种方式来扩展 Redux 的功能，使其能够处理异步逻辑。这就是异步中间件的用武之地。以下是几个为什么 Redux 需要异步数据流中间件的理由：

1. **维护纯净的 reducer 函数**：
   Reducer 函数应该是纯函数，这意味着给定相同的输入，总是返回相同的输出，并且不产生任何副作用。异步操作（如 API 调用）会产生副作用，因此不能直接在 reducer 中处理。

2. **扩展 Redux 的功能**：
   异步中间件像是 Redux 生态系统中的插件，它允许开发者在不修改原始 Redux 库代码的情况下增加新的功能。例如，可以增加日志记录、错误报告或异步处理等功能。

3. **异步控制流**：
   异步中间件允许开发者在派发 action 和到达 reducer 之间插入一个异步操作。这意味着可以先发出一个表示“开始异步操作”的 action，然后在操作完成时发出另一个表示“异步操作完成”的 action。

4. **更干净的代码结构**：
   通过将异步逻辑封装在中间件内，我们可以保持组件和 reducer 的简洁。这避免了在组件中混合异步调用和状态管理逻辑，有助于代码分离和维护。

5. **测试和调试的便捷性**：
   中间件提供了一个独立的层，可以在这个层中进行单独的测试和模拟异步行为，而不必担心组件逻辑或者 UI 层的细节。

### 例子

在实际应用中，最常见的异步中间件是 `redux-thunk` 和 `redux-saga`。

- **redux-thunk** 允许 action 创建函数（action creators）返回一个函数而不是一个 action 对象。这个返回的函数接收 `dispatch` 和 `getState` 作为参数，让你可以进行异步操作，并在操作结束后派发一个新的 action。

```javascript
const fetchUserData = (userId) => {
  return (dispatch, getState) => {
    dispatch({ type: 'USER_FETCH_REQUESTED', userId });
    return fetchUserFromApi(userId)
      .then(userData => {
        dispatch({ type: 'USER_FETCH_SUCCEEDED', userData });
      })
      .catch(error => {
        dispatch({ type: 'USER_FETCH_FAILED', error });
      });
  };
};
```

- **redux-saga** 则使用 ES6 的 Generator 函数来使异步流更易于读写。Sagas 可以监听派发到 store 的 actions，并在某个 action 被派发时执行复杂的异步逻辑。

```javascript
import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const user = yield call(Api.fetchUser, action.payload.userId);
    yield put({type: 'USER_FETCH_SUCCEEDED', user: user});
  } catch (e) {
    yield put({type: 'USER_FETCH_FAILED', message: e.message});
  }
}

function* mySaga() {
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser);
}
```

总的来说，异步中间件在处理复杂的异步数据流时，可以提高 Redux 应用的可扩

Redux 为什么需要异步流的中间件？

在React中，检测组件外部的点击事件通常可以通过以下几个步骤进行：

1. **添加全局事件监听器**：在组件挂载（`componentDidMount` 或者 `useEffect`）后，添加一个点击事件监听器到`document`上，这样可以监听到所有的点击事件。

2. **设置引用（Ref）**：使用`useRef`创建一个引用，并将其附加到你希望检测外部点击的组件上。这允许我们可以访问真实的DOM节点，以判断点击事件是否发生在其内部。

3. **检测点击位置**：当全局点击事件被触发时，可以使用该事件的`target`属性，并与我们的组件的DOM节点进行比较，来确定点击是否在组件外部进行。

4. **清理事件监听器**：在组件卸载（`componentWillUnmount` 或者 `useEffect`的返回函数）时，要移除事件监听器，避免内存泄漏。

下面是一个使用Hooks实现的例子：

```jsx
import React, { useEffect, useRef } from 'react';

function OutsideClickExample() {
  const wrapperRef = useRef(null); // Step 2

  useEffect(() => {
    // Step 1
    function handleClickOutside(event) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        // Step 3
        console.log('你点击了组件外部');
      }
    }

    // 在document上添加事件监听器
    document.addEventListener('mousedown', handleClickOutside);

    // Step 4
    return () => {
      // 在组件卸载时移除事件监听器
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [wrapperRef]);

  return (
    <div ref={wrapperRef}>
      <p>点击我之外的地方试试看!</p>
    </div>
  );
}

export default OutsideClickExample;
```

在这个例子中，`useEffect`确保了事件监听器仅在组件挂载后添加，并在组件卸载时移除。`ref`的作用是提供了一种方式来引用实际的DOM元素，从而我们可以判断点击事件是否在这个元素之外发生。注意，这个例子使用了`mousedown`事件，它会在点击鼠标按钮时立即触发，而不是在释放按钮时（`click`事件）。根据你的应用场景，你可能需要选择不同的事件类型。

以下解决方案使用 ES6 并遵循绑定的最佳实践以及通过方法设置引用。

要查看它的实际效果：

*   [钩子实现](https://codesandbox.io/s/outside-alerter-hooks-lmr2y?module=%2Fsrc%2FOutsideAlerter.js)
*   [React 16.3 之后的类实现](https://codesandbox.io/s/outside-alerter-react-16-3-0-bn267m?file=/src/OutsideAlerter.js)
*   [React 16.3 之前的类实现](https://codesandbox.io/s/30q3mzjv91?module=%2Fsrc%2FOutsideAlerter.js)

钩子实现：
-----

    import React, { useRef, useEffect } from "react";
    
    /**
     * Hook that alerts clicks outside of the passed ref
     */
    function useOutsideAlerter(ref) {
      useEffect(() => {
        /**
         * Alert if clicked on outside of element
         */
        function handleClickOutside(event) {
          if (ref.current && !ref.current.contains(event.target)) {
            alert("You clicked outside of me!");
          }
        }
        // Bind the event listener
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
          // Unbind the event listener on clean up
          document.removeEventListener("mousedown", handleClickOutside);
        };
      }, [ref]);
    }
    
    /**
     * Component that alerts if you click outside of it
     */
    export default function OutsideAlerter(props) {
      const wrapperRef = useRef(null);
      useOutsideAlerter(wrapperRef);
    
      return <div ref={wrapperRef}>{props.children}</div>;
    }
    

类实现：
----

**16.3之后**

    import React, { Component } from "react";
    
    /**
     * Component that alerts if you click outside of it
     */
    export default class OutsideAlerter extends Component {
      constructor(props) {
        super(props);
    
        this.wrapperRef = React.createRef();
        this.handleClickOutside = this.handleClickOutside.bind(this);
      }
    
      componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
      }
    
      componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
      }
    
      /**
       * Alert if clicked on outside of element
       */
      handleClickOutside(event) {
        if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
          alert("You clicked outside of me!");
        }
      }
    
      render() {
        return <div ref={this.wrapperRef}>{this.props.children}</div>;
      }
    }
    

**16.3之前**

    import React, { Component } from "react";
    
    /**
     * Component that alerts if you click outside of it
     */
    export default class OutsideAlerter extends Component {
      constructor(props) {
        super(props);
    
        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
      }
    
      componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
      }
    
      componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
      }
    
      /**
       * Set the wrapper ref
       */
      setWrapperRef(node) {
        this.wrapperRef = node;
      }
    
      /**
       * Alert if clicked on outside of element
       */
      handleClickOutside(event) {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
          alert("You clicked outside of me!");
        }
      }
    
      render() {
        return <div ref={this.setWrapperRef}>{this.props.children}</div>;
      }
    }

我被困在同样的问题上。我参加这里的聚会有点晚了，但对我来说，这是一个非常好的解决方案。希望它对其他人有帮助。您需要`findDOMNode`从以下位置导入`react-dom`

    import ReactDOM from 'react-dom';
    // ... ✂
    
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside, true);
    }
    
    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside, true);
    }
    
    handleClickOutside = event => {
        const domNode = ReactDOM.findDOMNode(this);
    
        if (!domNode || !domNode.contains(event.target)) {
            this.setState({
                visible: false
            });
        }
    }
    

* * *

React Hooks 方法 (16.8 +)
-----------------------

您可以创建一个名为 的可重用挂钩`useComponentVisible`。

    import { useState, useEffect, useRef } from 'react';
    
    export default function useComponentVisible(initialIsVisible) {
        const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
        const ref = useRef(null);
    
        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                setIsComponentVisible(false);
            }
        };
    
        useEffect(() => {
            document.addEventListener('click', handleClickOutside, true);
            return () => {
                document.removeEventListener('click', handleClickOutside, true);
            };
        }, []);
    
        return { ref, isComponentVisible, setIsComponentVisible };
    }
    

然后在您希望添加功能的组件中执行以下操作：

    const DropDown = () => {
        const { ref, isComponentVisible } = useComponentVisible(true);
        return (
           <div ref={ref}>
              {isComponentVisible && (<p>Dropdown Component</p>)}
           </div>
        );
     
    }
    

在这里找到一个[codesandbox](https://codesandbox.io/s/989y0758np)示例。

**2021 年更新：**

自从我添加此响应以来已经有一段时间了，由于它似乎仍然引起了一些兴趣，我想我会将其更新到更新的 React 版本。到 2021 年，我会这样编写这个组件：

    import React, { useState } from "react";
    import "./DropDown.css";
    
    export function DropDown({ options, callback }) {
        const [selected, setSelected] = useState("");
        const [expanded, setExpanded] = useState(false);
    
        function expand() {
            setExpanded(true);
        }
    
        function close() {
            setExpanded(false);
        }
    
        function select(event) {
            const value = event.target.textContent;
            callback(value);
            close();
            setSelected(value);
        }
    
        return (
            <div className="dropdown" tabIndex={0} onFocus={expand} onBlur={close} >
                <div>{selected}</div>
                {expanded ? (
                    <div className={"dropdown-options-list"}>
                        {options.map((O) => (
                            <div className={"dropdown-option"} onClick={select}>
                                {O}
                            </div>
                        ))}
                    </div>
                ) : null}
            </div>
        );
    }
    

* * *

**原答案（2016）：**
--------------

这是最适合我的解决方案，无需将事件附加到容器：

某些 HTML 元素可以具有所谓的“**焦点**”，例如输入元素。当这些元素失去焦点时，它们也会响应_模糊事件。_

要赋予任何元素获得焦点的能力，只需确保其 tabindex 属性设置为除 -1 之外的任何值。在常规 HTML 中，可以通过设置`tabindex`属性来实现，但在 React 中，您必须使用`tabIndex`（注意大写`I`）。

你也可以通过 JavaScript 来完成`element.setAttribute('tabindex',0)`

这就是我用它来制作自定义下拉菜单的目的。

    var DropDownMenu = React.createClass({
        getInitialState: function(){
            return {
                expanded: false
            }
        },
        expand: function(){
            this.setState({expanded: true});
        },
        collapse: function(){
            this.setState({expanded: false});
        },
        render: function(){
            if(this.state.expanded){
                var dropdown = ...; //the dropdown content
            } else {
                var dropdown = undefined;
            }
            
            return (
                <div className="dropDownMenu" tabIndex="0" onBlur={ this.collapse } >
                    <div className="currentValue" onClick={this.expand}>
                        {this.props.displayValue}
                    </div>
                    {dropdown}
                </div>
            );
        }
    });

在尝试了多种方法之后，我决定使用[github.com/Pomax/react-onclickoutside](https://github.com/Pomax/react-onclickoutside)因为它非常完整。

我通过 npm 安装了该模块并将其导入到我的组件中：

    import onClickOutside from 'react-onclickoutside'
    

然后，在我的组件类中我定义了该`handleClickOutside`方法：

    handleClickOutside = () => {
      console.log('onClickOutside() method called')
    }
    

当导出我的组件时，我将其包装在`onClickOutside()`：

    export default onClickOutside(NameOfComponent)
    

就是这样。

Hook 实现基于 Tanner Linsley[在 JSConf Hawaii 2020 上的精彩演讲](https://www.youtube.com/watch?v=J-g9ZJha8FE&feature=youtu.be&t=481)：

### `useOuterClick`应用程序编程接口

    const Client = () => {
      const innerRef = useOuterClick(ev => {/*event handler code on outer click*/});
      return <div ref={innerRef}> Inside </div> 
    };
    

### 执行

    function useOuterClick(callback) {
      const callbackRef = useRef(); // initialize mutable ref, which stores callback
      const innerRef = useRef(); // returned to client, who marks "border" element
    
      // update cb on each render, so second useEffect has access to current value 
      useEffect(() => { callbackRef.current = callback; });
      
      useEffect(() => {
        document.addEventListener("click", handleClick);
        return () => document.removeEventListener("click", handleClick);
        function handleClick(e) {
          if (innerRef.current && callbackRef.current && 
            !innerRef.current.contains(e.target)
          ) callbackRef.current(e);
        }
      }, []); // no dependencies -> stable click listener
          
      return innerRef; // convenience for client (doesn't need to init ref himself) 
    }
    

这是一个工作示例：

显示代码片段

    /*
      Custom Hook
    */
    function useOuterClick(callback) {
      const innerRef = useRef();
      const callbackRef = useRef();
    
      // set current callback in ref, before second useEffect uses it
      useEffect(() => { // useEffect wrapper to be safe for concurrent mode
        callbackRef.current = callback;
      });
    
      useEffect(() => {
        document.addEventListener("click", handleClick);
        return () => document.removeEventListener("click", handleClick);
    
        // read most recent callback and innerRef dom node from refs
        function handleClick(e) {
          if (
            innerRef.current && 
            callbackRef.current &&
            !innerRef.current.contains(e.target)
          ) {
            callbackRef.current(e);
          }
        }
      }, []); // no need for callback + innerRef dep
      
      return innerRef; // return ref; client can omit `useRef`
    }
    
    /*
      Usage 
    */
    const Client = () => {
      const [counter, setCounter] = useState(0);
      const innerRef = useOuterClick(e => {
        // counter state is up-to-date, when handler is called
        alert(`Clicked outside! Increment counter to ${counter + 1}`);
        setCounter(c => c + 1);
      });
      return (
        <div>
          <p>Click outside!</p>
          <div id="container" ref={innerRef}>
            Inside, counter: {counter}
          </div>
        </div>
      );
    };
    
    ReactDOM.render(<Client />, document.getElementById("root"));

    #container { border: 1px solid red; padding: 20px; }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js" integrity="sha256-Ef0vObdWpkMAnxp39TYSLVS/vVUokDE8CDFnx7tjY6U=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js" integrity="sha256-p2yuFdE8hNZsQ31Qk+s8N+Me2fL5cc6NKXOC0U9uGww=" crossorigin="anonymous"></script>
    <script> var {useRef, useEffect, useCallback, useState} = React</script>
    <div id="root"></div>

Run code snippetHide results

Expand snippet

### 关键点

*   `useOuterClick`利用[可变引用](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables)来提供精益`Client`API
*   在包含组件 ( `[]`deps)的生命周期内_保持稳定的点击侦听器_
*   `Client`可以设置回调而不需要通过以下方式记住它`useCallback`
*   回调主体可以访问最新的 props 和状态 -[没有过时的闭包值](https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)

### （iOS 的旁注）

iOS 通常只将某些元素视为可点击。要使外部点击起作用，请选择不同的点击侦听器`document`\- 没有向上，包括`body`。例如，在 React 根上添加一个侦听器`div`并扩展其高度，例如`height: 100vh`，以捕获所有外部点击。资料来源：[quirksmode.org](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)

React 如何监听组件外部的点击事件？

npx 和 npm 之间的区别？`npx` 和 `npm` 都是 Node.js 环境中常用的工具，它们在 Node.js 和 JavaScript 生态系统中扮演着关键的角色。以下是它们之间的一些主要区别：

### npm (Node Package Manager):

- **Package 管理器**：npm 是 Node.js 默认的包管理器，用来安装、更新和管理项目中的依赖包。
- **全局安装**：npm 可以全局安装包，这样你就可以在命令行中任何位置使用这些包。
- **本地安装**：npm 也可用来在特定项目中安装包，通常这些包会被放在项目的 `node_modules` 文件夹中。
- **脚本运行**：npm 还可以运行定义在 `package.json` 文件中的脚本。
- **版本管理**：npm 通过 `package.json` 和 `package-lock.json` 文件帮助管理包的版本。
- **包发布**：npm 可用于发布和更新包到 npm registry。

### npx (Node Package Execute):

- **执行包**：npx 用来执行在 npm registry 中的包，无需手动下载或者安装。
- **一次性命令**：npx 非常适合一次性使用命令，它可以在不全局安装包的情况下执行包的二进制文件。
- **即时安装执行**：npx 会在本地或者全局找不到命令的时候，自动从 npm registry 安装包并立即执行。
- **避免全局污染**：npx 避免了全局安装多个包可能导致的版本冲突或环境污染问题。
- **测试不同版本**：npx 可以用来轻松地测试不同版本的包，而不需要更改项目中的依赖。

简而言之，`npm` 主要用作包的安装和管理工具，而 `npx` 是一个辅助工具，用于执行包中的命令，特别是在不想或不需要永久安装这些包的情况下。这两个工具经常一起使用，以更有效地开发和管理 Node.js 项目。

[Introducing npx: an npm package runner](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner)
------------------------------------------------------------------------------------------------------------------------

### `NPM` - _Manages_ packages _but_ doesn't make life easy _executing_ any.  
`NPX` - A tool for _executing_ Node packages.

> `NPX` comes bundled with `NPM` version `5.2+`  

`NPM` by itself does not simply run any package. It doesn't run any package as a matter of fact. If you want to run a package using NPM, you must specify that package in your `package.json` file.

When executables are installed via NPM packages, NPM links to them:

1.  _local_ installs have "links" created at `./node_modules/.bin/` directory.
2.  _global_ installs have "links" created from the global `bin/` directory (e.g. `/usr/local/bin`) on Linux or at `%AppData%/npm` on Windows.

[**Documentation you should read**](https://docs.npmjs.com/files/folders#executables)

* * *

NPM:
====

One might install a package locally on a certain project:

    npm install some-package
    

Now let's say you want NodeJS to execute that package from the command line:

    $ some-package
    

The above will **fail**. Only **globally installed** packages can be executed by typing their name _only_.

To fix this, and have it run, you must type the local path:

    $ ./node_modules/.bin/some-package
    

You can technically run a locally installed package by editing your `packages.json` file and adding that package in the `scripts` section:

    {
      "name": "whatever",
      "version": "1.0.0",
      "scripts": {
        "some-package": "some-package"
      }
    }
    

Then run the script using [`npm run-script`](https://docs.npmjs.com/cli/run-script) (or `npm run`):

    npm run some-package
    

* * *

NPX:
====

`npx` will check whether `<command>` exists in `$PATH`, or in the local project binaries, and execute it. So, for the above example, if you wish to execute the locally-installed package `some-package` all you need to do is type:

    npx some-package
    

Another **major** advantage of `npx` is the ability to execute a package which wasn't previously installed:

    $ npx create-react-app my-app
    

The above example will generate a `react` app boilerplate _within_ the path the command had run in, and ensures that you always use the latest version of a generator or build tool without having to upgrade each time you’re about to use it.

* * *

### Use-Case Example:

`npx` command may be helpful in the `script` section of a `package.json` file, when it is unwanted to define a dependency which might not be commonly used or any other reason:

    "scripts": {
        "start": "npx gulp@3.9.1",
        "serve": "npx http-server"
    }
    

Call with: `npm run serve`

* * *

### Related questions:

1.  [How to use package installed locally in node\_modules?](https://stackoverflow.com/q/9679932/104380)
2.  [NPM: how to source ./node\_modules/.bin folder?](https://stackoverflow.com/q/18033754/104380)
3.  [How do you run a js file using npm scripts?](https://stackoverflow.com/q/32964900/104380)

_**npx**_ is a npm package runner (x probably stands for eXecute). One common way to use _npx_ is to download and run a package temporarily or for trials.

_**create-react-app**_ is an npm package that is expected to be run only once in a project's lifecycle. Hence, it is preferred to use npx to install and run it in a single step.

As mentioned in the main page [https://www.npmjs.com/package/npx](https://www.npmjs.com/package/npx), _npx_ can run commands in the PATH or from node\_modules/.bin by default.

**Note:** With some digging, we can find that create-react-app points to a Javascript file (possibly to /usr/lib/node\_modules/create-react-app/index.js on Linux systems) that is executed within the node environment. This is simply a global tool that does some checks. The actual setup is done by react-scripts, whose latest version is installed in the project. Refer [https://github.com/facebook/create-react-app](https://github.com/facebook/create-react-app) for more info.

NPM is a package manager, you can install node.js packages using NPM

NPX is a tool to execute node.js packages.

It doesn't matter whether you installed that package globally or locally. NPX will temporarily install it and run it. NPM also can run packages if you configure a package.json file and include it in the script section.

> So remember this, if you want to check/run a node package quickly without installing locally or globally use NPX.

np**M** - Manager

np**X** - Execute - easy to remember

**npm** - Package manager for JavaScript, just like: `pip` (Python), `Maven` (Java), `NuGet` (.NET), `Composer` (PHP), `RubyGems` (Ruby), ...

**npx** - runs a command of a package without installing it explicitly.

Use cases:

*   You don't want to install packages neither globally nor locally.
*   You don't have permission to install it globally.
*   Just want to test some commands.
*   Sometime, you want to have a script command (generate, convert something, ...) in `package.json` to execute something without installing these packages as project's dependencies.

Syntax:

    npx [options] [-p|--package <package>] <command> [command-arg]...
    

Package is optional:

    npx   -p uglify-js         uglifyjs --output app.min.js app.js common.js
          +----------------+   +--------------------------------------------+
          package (optional)   command, followed by arguments
    

For example:

    Start a HTTP Server      : npx http-server
    Lint code                : npx eslint ./src
                             # Run uglifyjs command in the package uglify-js
    Minify JS                : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
    Minify CSS               : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
    Minify HTML              : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
    Scan for open ports      : npx evilscan 192.168.1.10 --port=10-9999
    Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4
    

More about `command`:

*   [https://docs.npmjs.com/files/package.json#bin](https://docs.npmjs.com/files/package.json#bin)
*   [https://github.com/mishoo/UglifyJS2/blob/master/package.json#L17](https://github.com/mishoo/UglifyJS2/blob/master/package.json#L17)

NPX:

From [https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/](https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/):

> Web developers can have dozens of projects on their development machines, and each project has its own particular set of npm-installed dependencies. A few years back, the usual advice for dealing with CLI applications like Grunt or Gulp was to install them locally in each project and also globally so they could easily be run from the command line.
> 
> But installing globally caused as many problems as it solved. Projects may depend on different versions of command line tools, and polluting the operating system with lots of development-specific CLI tools isn’t great either. Today, most developers prefer to install tools locally and leave it at that.
> 
> Local versions of tools allow developers to pull projects from GitHub without worrying about incompatibilities with globally installed versions of tools. NPM can just install local versions and you’re good to go. But project specific installations aren’t without their problems: how do you run the right version of the tool without specifying its exact location in the project or playing around with aliases?
> 
> That’s the problem npx solves. A new tool included in NPM 5.2, npx is a small utility that’s smart enough to run the right application when it’s called from within a project.
> 
> If you wanted to run the project-local version of mocha, for example, you can run npx mocha inside the project and it will do what you expect.
> 
> A useful side benefit of npx is that it will automatically install npm packages that aren’t already installed. So, as the tool’s creator Kat Marchán points out, you can run npx benny-hill without having to deal with Benny Hill polluting the global environment.
> 
> If you want to take npx for a spin, update to the most recent version of npm.

Npx 和 npm 的区别？

React Native 和 React 在很多方面是相似的，因为 React Native 是基于 React 的，但是它们也有一些关键的区别，主要体现在它们的使用平台和渲染机制上。

### React

React 是一个用于构建用户界面的JavaScript库，它专注于构建Web应用程序的前端。React 使用了一种名为JSX的语法，它允许开发者在JavaScript代码中编写类似HTML的结构。

#### 特点：

- **Virtual DOM**：React 通过使用虚拟DOM来优化DOM操作，提高渲染性能。
- **组件化**：React 强调构建可重用的组件，这有助于代码的维护和管理。
- **单向数据流**：React 通常与如Redux这样的状态管理库一起使用，以提供一个可预测的单向数据流环境。

### React Native

React Native 是一个用于构建原生移动应用的框架，它允许开发者使用JavaScript和React来构建iOS和Android应用程序。

#### 特点：

- **跨平台**：使用React Native，开发者可以用相同的代码库创建在iOS和Android上运行的应用程序。
- **原生组件**：React Native将React的组件转换成对应平台的原生组件，这样可以保证用户获得接近原生应用的体验。
- **动态更新**：React Native支持热更新，允许开发者直接推送更新到用户的设备上，而无需经过应用商店的审核。

### 主要区别

- **平台**：React 通常用于构建Web应用程序，而 React Native 则用于构建移动应用程序。
- **渲染机制**：React 在浏览器中使用虚拟DOM来渲染Web界面，而React Native 使用的是桥接技术（Bridge）来调用原生模块，这样可以使得应用在不同的设备上拥有原生的性能和外观。
- **样式**：React 使用CSS来定义样式，而React Native 则使用JavaScript对象来定义样式，这些样式对象最后会被转换成对应平台的样式规则。
- **导航**：Web应用的导航是建立在URL和浏览器历史上的，而移动应用则通常使用屏幕之间的导航堆栈。

#### 示例：

在React中，你可能会这样创建一个按钮组件：

```jsx
function MyButton() {
  return <button className="my-button">Click me</button>;
}
```

在React Native中，相同的按钮组件会是这样：

```jsx
import { Button } from 'react-native';

function MyButton() {
  return <Button title="Click me" />;
}
```

总结来说，虽然React和React Native在设计理念和开发模式上有着很多共通之处，但它们是为不同平台和不同类型的应用程序设计的。React 更适合Web应用程序的开发，而React Native 则是为了解决移动应用开发中的跨平台问题。

[ReactJS](https://reactjs.org/)是一个 JavaScript 库，支持前端 Web 并在服务器上运行，用于构建用户界面和 Web 应用程序。它遵循可重用组件的概念。

[React Native](https://reactnative.dev/)是一个移动框架，它利用主机上可用的 JavaScript 引擎，允许您使用 JavaScript 为不同平台（iOS、Android 和 Windows Mobile）构建移动应用程序，从而允许您使用 ReactJS 构建可重用组件并进行通信与本机组件[进一步解释](https://stackoverflow.com/questions/41124338/does-react-native-compile-javascript-into-java-for-android)

两者都遵循 JavaScript 的 JSX 语法扩展。它编译为`React.createElement`底层调用。[JSX 深入](https://reactjs.org/docs/jsx-in-depth.html)

两者都是 Facebook 开源的。

这是[**React**项目](https://github.com/facebook/react)。

在 Facebook，他们发明了**React**，这样 JavaScript 就可以使用虚拟 DOM 模型更快地操作网站 DOM。

[与React virtual-dom 模型](https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode)相比，DOM 完全刷新速度较慢，React virtual-dom 模型仅刷新页面的部分内容（读作：部分刷新）。

[从这段视频](https://www.youtube.com/watch?v=oWPoW0gIzvs)中你可能会了解到，Facebook 并没有发明 React，因为他们立即意识到部分刷新会比传统刷新更快。最初他们需要一种方法来减少 Facebook 应用程序重新构建时间，幸运的是，这使部分 DOM 刷新变得栩栩如生。

[**React Native**](https://github.com/facebook/react-native)只是 React 的结果。它是一个使用 JavaScript 构建本机应用程序的平台。

**在使用React Native**之前，您需要了解适用于 Android 的 Java 或 Kotlin 以及适用于 iPhone 和 iPad 的 Swift 或 Objective-C 来创建本机应用程序。

使用 React Native，可以在 JavaScript 中模仿本机应用程序的行为，最终，您将获得特定于平台的代码作为输出。如果您需要进一步优化您的应用程序，您甚至可以将**本机代码与 JavaScript 混合。**

正如 Olivia Bishop 在[视频](https://www.youtube.com/watch?v=oWPoW0gIzvs)中所说，85% 的**React 原生**代码库可以在平台之间共享。这些将是应用程序通常使用的组件和通用逻辑。

15% 的代码是特定于平台的。特定于平台的 JavaScript 赋予了平台风味（并带来了不同的体验）。

最酷的是这个特定于平台的代码 - 已经编写好了，所以您只需要使用它即可。

**反应：**

> React 是一个声明式、高效且灵活的 JavaScript 库，用于构建用户界面。  

**反应本机：**

> React Native 允许您仅使用 JavaScript 构建移动应用程序。它使用与 React 相同的设计，让您可以通过声明性组件构建丰富的移动 UI。  
> 使用 React Native，您不需要构建“移动 Web 应用程序”、“HTML5 应用程序”或“混合应用程序”。您构建的真正的移动应用程序与使用 Objective-C 或 Java 构建的应用程序没有什么区别。React Native 使用与常规 iOS 和 Android 应用程序相同的基本 UI 构建块。您只需使用 JavaScript 和 React 将这些构建块组合在一起即可。  
> React Native 可让您更快地构建应用程序。您可以立即重新加载应用程序，而不用重新编译。通过热重载，您甚至可以在保留应用程序状态的同时运行新代码。尝试一下 - 这是一次神奇的体验。  
> React Native 与 Objective-C、Java 或 Swift 编写的组件顺利结合。如果您需要优化应用程序的某些方面，那么可以简单地使用本机代码。在 React Native 中构建应用程序的一部分，以及直接使用本机代码构建应用程序的一部分也很容易 - 这就是 Facebook 应用程序的工作原理。

所以基本上**React**是用于 Web 应用程序视图的 UI 库，使用**javascript**和**JSX**，**React Native**是 React 之上的一个额外库，用于为`iOS`和`Android`设备制作本机应用程序。  
  

**反应**代码示例：

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
    
      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
    
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
    
      tick() {
        this.setState({
          date: new Date()
        });
      }
    
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    );
    

**React Native**代码示例：

    import React, { Component } from 'react';
    import { Text, View } from 'react-native';
    
    class WhyReactNativeIsSoGreat extends Component {
      render() {
        return (
          <View>
            <Text>
              If you like React on the web, you'll like React Native.
            </Text>
            <Text>
              You just use native components like 'View' and 'Text',
              instead of web components like 'div' and 'span'.
            </Text>
          </View>
        );
      }
    }
    

有关**React**的更多信息，请访问由 facebook 团队创建的官方网站：

[https://reactjs.org/](https://reactjs.org/)

有关**React Native**的更多信息，请访问下面的 React Native 网站：

[https://reactnative.dev/](https://reactnative.dev/)

**首先，相似之处：** React 和 React Native (RN) 都旨在创建灵活的用户界面。这些框架有很多好处，但最基本的要点是它们是为 UI 开发而设计的。Facebook 在 React 几年后开发了 RN。

**React：** Facebook 设计这个框架几乎就像在 HTML/XML 中编写 JavaScript 一样，这就是为什么这些标签被称为“ _JSX_ ”（JavaScript XML）并且类似于熟悉的类似 HTML 的标签，例如`<div>`或`<p>`。React 的一个标志是大写字母标签，它表示自定义组件，例如`<MyFancyNavbar />`，它也存在于 RN 中。然而，React 使用[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)。DOM 是为 HTML 而存在的，因此 React 用于 Web 开发。

**React Native：** RN不使用HTML，因此不用于Web开发。它用于……几乎所有其他用途！移动开发（iOS 和 Android）、智能设备（例如手表、电视）、增强现实等。由于 RN 没有可交互的 DOM，因此它没有使用 React 中使用的同类 HTML 标签，而是使用其标签然后被编译成其他语言。例如，`<div>`RN 开发人员使用 RN 的内置标签代替`<View>`标签，该标签在底层编译成其他本机代码（例如`android.view`在 Android 上；`UIView`在 iOS 上）。

_简而言之：它们非常相似（对于 UI 开发），但用于不同的媒介。_

ReactJS 是一个用于构建 UI 组件层次结构的框架。每个组件都有状态和道具。数据通过 props 从顶层组件流向底层组件。使用事件处理程序在顶级组件中更新状态。

React Native 使用 React 框架来构建移动应用程序的组件。React Native 为 iOS 和 Android 平台提供了一组基本组件。React Native 中的一些组件包括 Navigator、TabBar、Text、TextInput、View、ScrollView。这些组件在内部使用原生 iOS UIKit 和 Android UI 组件。React Native 还允许使用 NativeModules，其中 iOS 的 Objective-C 和 Android 的 Java 编写的代码可以在 JavaScript 中使用。

注意：React Native 作为一个框架，允许使用与 HTML 和 CSS 类似的语法来开发移动应用程序。React Native 组件有效地取代了原生开发中的 HTML。

React Native 和 React 有什么区别？

在React中，通常我们通过调用`setState`来通知组件需要更新其状态，并触发重新渲染。不过，如果需要在不直接调用`setState`的情况下强制组件重新渲染，可以使用下面几种方法：

1. 使用`forceUpdate()`方法
   React类组件中的`forceUpdate()`方法会使组件跳过`shouldComponentUpdate`，直接触发一个重新渲染。

   ```jsx
   class MyComponent extends React.Component {
     someMethod() {
       // ... 执行某些操作后，需要强制重新渲染
       this.forceUpdate();
     }

     render() {
       // render logic
     }
   }
   ```

   这种方式不推荐频繁使用，因为它绕过了React的正常更新流程（如`shouldComponentUpdate`生命周期方法），可能导致性能问题。

2. 使用Hooks中的一个小技巧
   在函数组件中，我们可以使用`useState`和一个更新函数来强制重新渲染。

   ```jsx
   import { useState, useCallback } from 'react';

   function MyComponent() {
     const [, updateState] = useState();
     const forceUpdate = useCallback(() => updateState({}), []);

     function handleSomeAction() {
       // ... 执行某些操作后，需要强制重新渲染
       forceUpdate();
     }

     return (
       // render logic
     );
   }
   ```

   通过更改状态来触发重新渲染，即使状态值没有实际改变。

3. 使用Key改变
   通过改变组件的`key`属性，可以让React卸载当前组件并且装载一个新的组件实例。

   ```jsx
   function MyParentComponent() {
     const [key, setKey] = useState(0);

     function forceRender() {
       setKey(prevKey => prevKey + 1);
     }

     return <MyComponent key={key} />;
   }
   ```

   当`key`发生变化时，React将会认为是不同的组件，并且进行重新装载。这会导致组件的状态被重置，因此该方法适用于没有状态或者可以丢弃状态的组件。

需要注意的是，不推荐在常规开发中绕过React的正常更新流程来强制渲染，这样做通常会违背React声明式编程的理念，可能造成不可预见的问题。在大部分情况下，合理使用state和props来控制组件的渲染会更加符合React的设计哲学。强制更新通常用于与外部库交互或者处理一些特殊的副作用。

In class components, you can call `this.forceUpdate()` to force a rerender.

Documentation: [https://facebook.github.io/react/docs/component-api.html](https://facebook.github.io/react/docs/react-component.html#forceupdate)

In function components, there's no equivalent of `forceUpdate`, but you can [contrive a way to force updates with the `useState` hook](https://stackoverflow.com/a/53837442/200224).

`forceUpdate` should be avoided because it deviates from a React mindset. The React docs cite an example of when `forceUpdate` might be used:

> By default, when your component's state or props change, your component will re-render. However, if these change implicitly (eg: data deep within an object changes without changing the object itself) or if your render() method depends on some other data, you can tell React that it needs to re-run render() by calling forceUpdate().

However, I'd like to propose the idea that even with deeply nested objects, `forceUpdate` is unnecessary. By using an immutable data source tracking changes becomes cheap; a change will always result in a new object so we only need to check if the reference to the object has changed. You can use the library [Immutable JS](http://facebook.github.io/immutable-js/) to implement immutable data objects into your app.

> Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). This makes your component "pure" and your application much simpler and more efficient.[forceUpdate()](https://facebook.github.io/react/docs/component-api.html#forceupdate)

Changing the key of the element you want re-rendered will work. Set the key prop on your element via state and then when you want to update set state to have a new key.

    <Element key={this.state.key} /> 
    

Then a change occurs and you reset the key

    this.setState({ key: Math.random() });
    

I want to note that this will replace the element that the key is changing on. An example of where this could be useful is when you have a file input field that you would like to reset after an image upload.

While the true answer to the OP's question would be `forceUpdate()` I have found this solution helpful in different situations. I also want to note that if you find yourself using `forceUpdate` you may want to review your code and see if there is another way to do things.

**NOTE 1-9-2019:**

The above (changing the key) will completely replace the element. If you find yourself updating the key to make changes happen you probably have an issue somewhere else in your code. Using `Math.random()` in key will re-create the element with each render. I would NOT recommend updating the key like this as react uses the key to determine the best way to re-render things.

In 2021 and 2022, this is [the official way](https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate) to forceUpdate a React Functional Component.

    const [, forceUpdate] = useReducer(x => x + 1, 0);
    
      function handleClick() {
        forceUpdate();
      }
    

I know the OP is for a class component. But the question was asked in 2015 and now that hooks are available, many may search for `forceUpdate` in functional components. This little bit is for them.

**Edit 18th Apr 2022**

It's usually bad practice to force update your components.

A few reasons that can cause the need to use force updates.

*   Not using state variables where you have to - local, redux, context.
*   The field from the state object you are trying to access and expecting to update/change is too deeply nested in objects or arrays. Even Redux advises to maintain flat objects or arrays. If only one field value changes in a complex object, React may not figure out that the state object has changed, thus it does not update the component. Keep your state flat and simple.
*   The key on your list items, as mentioned in another answer. In fact, this can cause other unexpected behaviors as well. I've seen lists where items are repeatedly rendered (duplicates) because the keys aren't identical or the keys are just missing altogether. Always request the backend team to send unique ids everywhere possible! Avoid using array indexes for keys. Do not try to create unique ids on the front-end by using nanoid, uuid or random. Because ids created using above methods change each time the component updates (keys provided to a list need to be static and the same on each render). Creating unique ids is usually a backend concern. Try your best to not bring that requirement to the front-end. The front-end's responsibility is only to paint what data the backend returns and not create data on the fly.
*   If your useEffect, useCallback dependency arrays do not have the proper values set. Use ESLint to help you with this one! Also, this is one of the biggest causes for memory leaks in React. Clean up your state and event listeners in the return callback to avoid memory leaks. Because such memory leaks are awfully difficult to debug.
*   Always keep an eye on the console. It's your best friend at work. Solving warning and errors that show up in the console can fix a whole lot of nasty things - bugs and issues that you aren't even aware off.

A few things I can remember that I did wrong. In case it helps..

Actually, `forceUpdate()` is the only correct solution as `setState()` might **not** trigger a re-render if additional logic is implemented in `shouldComponentUpdate()` or when it simply returns `false`.

### forceUpdate()

> Calling `forceUpdate()` will cause `render()` to be called on the component, skipping `shouldComponentUpdate()`. _[more...](https://facebook.github.io/react/docs/component-api.html#forceupdate)_

### setState()

> `setState()` will always trigger a re-render unless conditional rendering logic is implemented in `shouldComponentUpdate()`. _[more...](https://facebook.github.io/react/docs/component-api.html#setstate)_

* * *

`forceUpdate()` can be called from within your component by `this.forceUpdate()`

* * *

Hooks: [How can I force component to re-render with hooks in React?](https://stackoverflow.com/questions/53215285/how-can-i-force-component-to-re-render-with-hooks-in-react/58606536#58606536)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

* * *

### BTW: Are you mutating state or your nested properties don't propagate?

*   [How to update nested state properties in React](https://stackoverflow.com/a/50149659/985454)
*   [Sandbox](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react/50149659?noredirect=1#comment109484301_50149659)

I Avoided `forceUpdate` by doing following
------------------------------------------

> **WRONG WAY** : do not use index as key

    this.state.rows.map((item, index) =>
       <MyComponent cell={item} key={index} />
    )
    

> **CORRECT WAY** : Use data id as key, it can be some guid etc

    this.state.rows.map((item) =>
       <MyComponent item={item} key={item.id} />
    )
    

so by doing such code improvement your component will be **UNIQUE** and render naturally

React 在不使用 setState 的情况下实现组件的强制刷新？

在CSS中，`display: none`用于隐藏元素，但它不会阻止浏览器下载背景图像。例如，如果你在一个`div`元素上使用`display: none`样式，并且这个`div`有一个CSS背景图像，那么浏览器仍然会下载这个图像，尽管它在视觉上是不可见的。

但是，如果我们谈论的是`<img>`标签中的图像，使用`display: none`会有所不同。对于`<img>`标签，大多数现代浏览器会优化加载过程，如果图像使用`display: none`进行了隐藏，浏览器可能会推迟图像的加载，或者在图像不会对用户可见的情况下完全不加载它。

这种行为并不是在所有浏览器中都是一样的，也可能随着浏览器的更新而变化。一般来说，如果确实希望防止图像加载，最好的做法是不要在HTML代码中包含该图像。如果需要在用户交互之后加载图像，可以采取动态插入图像标签的方法或使用JavaScript按需加载。

要举一个例子，假设有一个网页，其中包含以下HTML和CSS代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Loading Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<img src="example.jpg" alt="Example Image" class="hidden">

</body>
</html>
```

在上述代码中，即使`.hidden`类应用了`display: none`，某些浏览器可能仍然会下载`example.jpg`图像。但如果你打算确保图像不被预加载，你可以通过JavaScript动态设置图像的`src`属性来控制加载：

```javascript
document.addEventListener('DOMContentLoaded', function() {
  // 假设用户执行了某个操作，例如点击按钮
  document.getElementById('loadImageButton').addEventListener('click', function() {
    var img = document.getElementById('exampleImage');
    img.src = 'example.jpg';
    img.classList.remove('hidden');
  });
});
```

在这个例子中，只有在用户点击了一个按钮之后，图像才会被加载，因此在页面初始加载时，`example.jpg`并不会被下载。

浏览器变得越来越智能。今天，如果您的浏览器（取决于版本）确定图像没有用，可能会跳过图像加载。

图像具有`display:none`样式，但其大小可以由脚本读取。如果父级隐藏，Chrome v68.0 不会加载图像。

您可以在那里查看： http: [//jsfiddle.net/tnk3j08s/](http://jsfiddle.net/tnk3j08s/)

您还可以通过查看浏览器开发人员工具的“网络”选项卡来检查它。

请注意，如果浏览器位于小型 CPU 计算机上，则不必渲染图像（并布局页面）将使整个渲染操作更快，但我怀疑这在今天是否真正有意义。

如果您想阻止图像加载，您可以简单地不将 IMG 元素添加到文档中（或将 IMG`src`属性设置为`"data:"`或`"about:blank"`）。

如果图像位于第一个屏幕上且未延迟加载，“display: none”将不起作用。图像将加载但不显示。

如果您在 CSS 中将图像设置为 div 的背景图像，则当该 div 设置为“display: none”时，图像将不会加载。当 CSS 被禁用时，它仍然不会加载，因为 CSS 被禁用了。

答案并不像简单的是或否那么简单。看看我最近做的测试结果：

*   在 Chrome 中：已加载所有 8 个屏幕截图-\* 图像 (img 1)
*   在 Firefox 中：仅加载当前显示的 1 个屏幕截图-\* 图像 (img 2)

因此，在进一步挖掘之后，我发现了[这个](http://web.archive.org/web/20130830082659/http://www.justinmarsan.com/blog/researches/hidden-elements-and-http-requests.html)，它解释了每个浏览器如何处理基于 css display: none; 加载 img 资源。

博客文章摘录：

> *   Chrome 和 Safari (WebKit)：  
>     WebKit 每次都会下载文件，除非通过不匹配的媒体查询应用背景。
> *   Firefox：  
>     如果样式被隐藏，Firefox将不会下载带有背景图像的图像，但它们仍然会从img标签下载资源。
> *   Opera：  
>     与 Firefox 一样，Opera 不会加载无用的背景图像。
> *   Internet Explorer：  
>     IE，像WebKit一样，会下载背景图像，即使它们有display：none； IE6 中出现了一些奇怪的情况：具有背景图像和显示的元素：不会下载内联设置的元素...但如果这些样式未内联应用，它们就会被下载。

![Chrome-全部 8 张屏幕截图-* 图像已加载](https://i.stack.imgur.com/pzKgS.png)

![Firefox - 仅加载当前显示的 1 个屏幕截图 -* 图像](https://i.stack.imgur.com/ARF9g.png)

HTML5`<picture>`标签将帮助您根据屏幕宽度解析正确的图像源
====================================

显然，浏览器的行为在过去 5 年里没有太大变化，许多人仍然会下载隐藏的图像，即使它们设置了属性`display: none`。

尽管有[媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)解决方法，但只有当图像在 CSS 中设置为背景时它才有用。

虽然我认为只有一个 JS 解决方案可以解决这个问题（[延迟加载](https://css-tricks.com/snippets/javascript/lazy-loading-images/)、[图片填充](http://scottjehl.github.io/picturefill/)等），但似乎有一个很好的纯 HTML 解决方案，可以随 HTML5 一起使用。

这就是`<picture>`标签。

[MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/picture)是这样描述的：

> HTML**元素**是一个容器，用于指定其中包含的**特定`<picture>`**`<source>`多个元素。`<img>`浏览器将根据页面的当前布局（图像将出现的框的约束）和将显示图像的设备（例如普通或 hiDPI 设备）来选择最合适的源。

使用方法如下：

    <picture>
     <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
     <img src="mdn-logo-narrow.png" alt="MDN">
    </picture>
    

### 背后的逻辑

`img`仅当没有任何媒体规则适用时，浏览器才会加载标记的源。当`<picture>`浏览器不支持该元素时，它将再次回退到显示标签`img`。

通常，您会将最小的图像作为源`<img>`，因此不会为较大的屏幕加载较重的图像。反之亦然，如果适用媒体规则，则`<img>`不会下载源，而是下载相应`<source>`标签的 url 内容。

这里唯一的陷阱是，如果浏览器不支持该元素，它只会加载小图像。另一方面，2017 年我们应该以_移动优先的_方式思考和编码。

在有人退出之前，以下是_当前_浏览器对以下内容的支持`<picture>`：

桌面浏览器
-----

[![桌面浏览器支持](https://i.stack.imgur.com/wk7IN.png)](https://developer.mozilla.org/en/docs/Web/HTML/Element/picture)

移动浏览器
-----

[![移动浏览器支持](https://i.stack.imgur.com/NhzVq.png)](https://i.stack.imgur.com/wk7IN.png)

有关浏览器支持的更多信息，您可以在[我可以使用](http://caniuse.com/#search=picture)上找到。

好处是[html5please](http://html5please.com/#picture)的这句话是用_后备来使用它_。我个人打算听取他们的建议。

[有关该标签的更多信息，您可以在W3C 规范](http://w3c.github.io/html/semantics-embedded-content.html#the-picture-element)中找到。其中有一个免责声明，我认为值得一提的是：

> 该`picture`元素与外观相似的`video`和`audio`元素有些不同。虽然它们都包含元素，但当元素嵌套在元素内时，`source`源元素的属性没有任何意义，并且资源选择算法不同。同样，元素本身不显示任何内容；它只是为其包含的元素提供上下文，使其能够从多个 URL 中进行选择。`src``picture``picture``img`

所以它的意思是，它只是通过为图像提供一些上下文来帮助您提高加载图像时的性能。

你仍然可以使用一些 CSS 魔法来隐藏小型设备上的图像：

    <style>
      picture { display: none; }
    
      @media (min-width: 600px) {
        picture {
          display: block;
        }
      }
    </style>
    
    <picture>
     <source srcset="the-real-image-source" media="(min-width: 600px)">
     <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
    </picture>
    

因此，浏览器不会_显示_实际图像，而只会下载`1x1`像素图像（如果多次使用，可以缓存该图像）。但请注意，如果`<picture>`浏览器不支持该标签，即使在桌面屏幕上也_不会_显示实际图像（因此您肯定需要在那里进行填充备份）。

2023 年更新：
=========

`display: none`不，但`loading=lazy`确实！
-----------------------------------

即使图像直接或间接被`display: none`属性隐藏，浏览器仍然会下载图像。防止这种情况发生的唯一标准方法是使用[`loading="lazy"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading)：

    <img src="https://cdn.example/image.jpg" loading="lazy">
    

> 推迟加载图像，直到图像达到浏览器定义的距视口的计算距离。目的是避免处理图像所需的网络和存储带宽，直到相当确定需要它为止。这通常会提高大多数典型用例中内容的性能。

所有最新的桌面和移动网络浏览器都[支持它](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#browser_compatibility)。

在CSS中，`display: none`用于隐藏元素，但它不会阻止浏览器下载背景图像。例如，如果你在一个 `div`元素上使用 `display: none`样式，并且这个 `div`有一个CSS背景图像，那么浏览器仍然会下载这个图像，尽管它在视觉上是不可见的。

但是，如果我们谈论的是 `<img>`标签中的图像，使用 `display: none`会有所不同。对于 `<img>`标签，大多数现代浏览器会优化加载过程，如果图像使用 `display: none`进行了隐藏，浏览器可能会推迟图像的加载，或者在图像不会对用户可见的情况下完全不加载它。

这种行为并不是在所有浏览器中都是一样的，也可能随着浏览器的更新而变化。一般来说，如果确实希望防止图像加载，最好的做法是不要在HTML代码中包含该图像。如果需要在用户交互之后加载图像，可以采取动态插入图像标签的方法或使用JavaScript按需加载。

要举一个例子，假设有一个网页，其中包含以下HTML和CSS代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Loading Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<img src="https://cdn.portal.levenx.com/levenx-world/3hQQtcQif-8j446Z.jpg" alt="Example Image" class="hidden">

</body>
</html>
```

在上述代码中，即使 `.hidden`类应用了 `display: none`，某些浏览器可能仍然会下载 `example.jpg`图像。但如果你打算确保图像不被预加载，你可以通过JavaScript动态设置图像的 `src`属性来控制加载：

```javascript
document.addEventListener('DOMContentLoaded', function() {
  // 假设用户执行了某个操作，例如点击按钮
  document.getElementById('loadImageButton').addEventListener('click', function() {
    var img = document.getElementById('exampleImage');
    img.src = 'example.jpg';
    img.classList.remove('hidden');
  });
});
```

CSS 的 display:none 是否阻止 image 的加载？

将 CSS 放在 JavaScript 之前有两个主要原因。

1.  旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您`a.js`遵循，`b.css`它们将按顺序下载：先是 a，然后是 b。如果您`b.css`遵循，`a.js`它们会并行下载，因此页面加载速度更快。
    
2.  在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。**最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。**
    

[使用Cuzillion](http://cuzillion.com/)创建示例很有趣。例如，[此页面的](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f)HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在[此页面](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f)上看到的那样。

This answer is useful

754

This answer is not useful

Save this answer.

[](/posts/9272730/timeline)

Show activity on this post.

This is a very interesting question. I've always put my CSS `<link href="...">`s before my JavaScript `<script src="...">`s because "I read one time that it's better." So, you're right; it's high time we do some actual research!

I set up my own test harness in [Node.js](https://en.wikipedia.org/wiki/Node.js) (code below). Basically, I:

*   Made sure there was no HTTP caching so the browser would have to do a full download each time a page is loaded.
*   To simulate reality, I included jQuery and the [H5BP](http://html5boilerplate.com/) CSS (so there's a decent amount of script/CSS to parse)
*   Set up two pages - one with CSS before script, one with CSS after script.
*   Recorded how long it took for the external script in the **`<head>`** to execute
*   Recorded how long it took for the inline script in the **`<body>`** to execute, which is analogous to `DOMReady`.
*   Delayed sending CSS and/or script to the browser by 500 ms.
*   Ran the test 20 times in the three major browsers.

Results
=======

First, with the CSS file delayed by 500 ms (the unit is milliseconds):

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

Next, I set jQuery to delay by 500 ms instead of the CSS:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

Finally, I set **both** jQuery and the CSS to delay by 500 ms:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

Conclusions
===========

First, it's important to note that I'm operating under the assumption that you have scripts located in the `<head>` of your document (as opposed to the end of the `<body>`). There are various arguments regarding why you might link to your scripts in the `<head>` versus the end of the document, but that's outside the scope of this answer. This is strictly about whether `<script>`s should go before `<link>`s in the `<head>`.

**In modern DESKTOP browsers,** it looks like linking to CSS first **never** provides a performance gain. Putting CSS after script gets you a trivial amount of gain when both CSS and script are delayed, but gives you large gains when CSS is delayed. (Shown by the `last` columns in the first set of results.)

Given that linking to CSS last does not seem to hurt performance but _can_ provide gains under certain circumstances, **you should link to external style sheets _after_ you link to external scripts _only on desktop browsers_** if the performance of old browsers is not a concern. **Read on for the mobile situation.**

Why?
====

Historically, when a browser encountered a `<script>` tag pointing to an external resource, the browser would **stop** parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a `<link>` for an external style sheet, it would _continue_ parsing the HTML while it fetched the CSS file (in parallel).

Hence, the widely-repeated advice to put style sheets first – they would download first, and the first script to download could be loaded in parallel.

However, modern browsers (including all of the browsers I tested with above) have implemented [_speculative parsing_](https://www.google.com/search?q=speculative+parsing), where the browser "looks ahead" in the HTML and begins downloading resources _before_ scripts download and execute.

In old browsers without speculative parsing, putting scripts first will affect performance since they will not download in parallel.

Browser Support
---------------

Speculative parsing was first implemented in: (along with the percentage of worldwide desktop browser users using this version or greater as of Jan 2012)

*   Chrome 1 ([WebKit](https://en.wikipedia.org/wiki/WebKit) 525) (100%)
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   Firefox 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [Opera](https://en.wikipedia.org/wiki/Opera_%28web_browser%29) 11.60 (85%)

In total, roughly 85% of desktop browsers in use today support speculative loading. Putting scripts before CSS will have a performance penalty on 15% of users _globally_; your mileage may vary based on your site's specific audience. (And remember that number is shrinking.)

On mobile browsers, it's a little harder to get definitive numbers simply due to how heterogeneous the mobile browser and OS landscape is. Since speculative rendering was implemented in WebKit 525 (released Mar 2008), and just about every worthwhile mobile browser is based on WebKit, we can conclude that "most" mobile browsers _should_ support it. According to [quirksmode](http://www.quirksmode.org/webkit.html), iOS 2.2/Android 1.0 use WebKit 525. I have no idea what Windows Phone looks like.

**However,** I ran the test on my Android 4 device, and while I saw numbers similar to the desktop results, I hooked it up to the fantastic new [remote debugger](http://code.google.com/chrome/mobile/docs/debugging.html) in Chrome for Android, and _Network_ tab showed that the browser was actually waiting to download the CSS until the JavaScript code completely loaded – in other words, **even the newest version of WebKit for Android does not appear to support speculative parsing.** I suspect it might be turned off due to the CPU, memory, and/or network constraints inherent to mobile devices.

Code
====

Forgive the sloppiness – this was Q&D.

### File _app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### File _css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### File _js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### File _test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery) was [jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

[Share](/a/9272730/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9272730/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 17:40](/posts/9272730/revisions "show all edits to this post")

[

![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 6:37

[

![josh3736's user avatar](https://i.stack.imgur.com/4wIGc.jpg?s=64&g=1)

](/users/201952/josh3736)

[josh3736](/users/201952/josh3736)josh3736

141k3333 gold badges220220 silver badges268268 bronze badges

9

*   146
    
    this is a fantastic answer, thanks for [using the science!](http://blog.stackoverflow.com/2011/12/dont-be-afraid-to-use-the-science/) Per your result **"in modern browsers, it looks like linking to CSS first never provides a performance gain"**, I think the answer to the question title is _yes_, the old advice of CSS first is clearly invalid.
    
    – [Jeff Atwood](/users/1/jeff-atwood "63,618 reputation")
    
    [Feb 14, 2012 at 7:54](#comment11690017_9272730)
    
*   Regarding @josh3736's update about the inverse on mobile... this is a case in point to not to jump the gun on this significant change. I'd be curious how other mobile browser behave (webkit, gecko, presto, trident, etc.) as performance in mobile is often more important.
    
    – [scunliffe](/users/6144/scunliffe "62,886 reputation")
    
    [Feb 14, 2012 at 19:17](#comment11704299_9272730)
    
*   1
    
    You should also try adding some slowness to printing out the css/js, to simulate speeds of a slow server.
    
    – [kirb](/users/709376/kirb "2,031 reputation")
    
    [Feb 14, 2012 at 21:19](#comment11706774_9272730)
    
*   How about if you use defer or async? Does that change? (try with inline scripts and without inline scripts) Does that change?
    
    – [brunoais](/users/551625/brunoais "6,448 reputation")
    
    [Dec 25, 2012 at 18:28](#comment19384658_9272730)
    
*   1
    
    _"First, it's important to note that I'm operating under the assumption that you have scripts located in the `<head>` of your document (as opposed to the end of the `<body>`)."_ I would highlight that **much** earlier in the answer, like at the top. Including a `script` in `head` that refers to an external file is almost never correct, from almost any perspective (certainly not a performance one). I don't recall ever having had to do it in real life. The odd line or two of _inline_ script maybe, but that's all. The default, without **very** good contrary reasons, should be the end of the body.
    
    – [T.J. Crowder](/users/157247/t-j-crowder "1,049,803 reputation")
    
    [Dec 12, 2018 at 11:46](#comment94337184_9272730)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **4** more comments](# "Expand to show all comments on this post")

This answer is useful

313

This answer is not useful

Save this answer.

[](/posts/9272629/timeline)

Show activity on this post.

There are two main reasons to put CSS before JavaScript.

1.  Old browsers (Internet Explorer 6-7, Firefox 2, etc.) would block all subsequent downloads when they started downloading a script. So if you have `a.js` followed by `b.css` they get downloaded sequentially: first a then b. If you have `b.css` followed by `a.js` they get downloaded in parallel so the page loads more quickly.
    
2.  Nothing is rendered until all stylesheets are downloaded - this is true in all browsers. Scripts are different - they block rendering of all DOM elements that are _below the script tag_ in the page. If you put your scripts in the HEAD then it means the entire page is blocked from rendering until all stylesheets and all scripts are downloaded. While it makes sense to block all rendering for stylesheets (so you get the correct styling the first time and avoid the flash of unstyled content FOUC), it doesn't make sense to block rendering of the entire page for scripts. Often scripts don't affect any DOM elements or just a portion of DOM elements. **It's best to load scripts as low in the page as possible, or even better load them asynchronously.**
    

It's fun to create examples with [Cuzillion](http://cuzillion.com/). For example, [this page](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f) has a script in the HEAD so the entire page is blank until it's done downloading. However, if we move the script to the end of the BODY block the page header renders since those DOM elements occur above the SCRIPT tag, as you can see on [this page](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f).

[Share](/a/9272629/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[Edit](/posts/9272629/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Feb 15, 2012 at 7:06](/posts/9272629/revisions "show all edits to this post")

[

![Jeff Atwood's user avatar](https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=64&d=identicon&r=PG)

](/users/1/jeff-atwood)

[Jeff Atwood](/users/1/jeff-atwood)

63.6k4848 gold badges150150 silver badges153153 bronze badges

answered Feb 14, 2012 at 6:27

[

![Steve Souders's user avatar](https://www.gravatar.com/avatar/aabd4fe494747fd05d0bf725bf773c73?s=64&d=identicon&r=PG)

](/users/1208454/steve-souders)

[Steve Souders](/users/1208454/steve-souders)Steve Souders

1,89711 gold badge1010 silver badges33 bronze badges

7

*   12
    
    Honored Steve beat me to the answer, but I'll add an article relevant to what he mentions: [stevesouders.com/blog/2009/04/27/…](http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/)
    
    – [Juan Pablo Buritica](/users/970182/juan-pablo-buritica "507 reputation")
    
    [Feb 14, 2012 at 6:31](#comment11689096_9272629)
    
*   4
    
    see which browsers support the `async` attribute, which Steve is recommending here when he says "even better load them asynchronously" -- [stackoverflow.com/questions/1834077/…](http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async "which browsers support script async async")
    
    – [Jeff Atwood](/users/1/jeff-atwood "63,618 reputation")
    
    [Feb 14, 2012 at 6:42](#comment11689152_9272629)
    
*   Hey can you tell me why anyone would link CSS files with `@import` directives?
    
    – [Josh Stodola](/users/54420/josh-stodola "81,965 reputation")
    
    [Feb 14, 2012 at 6:42](#comment11689160_9272629)
    
*   7
    
    What's the source for 2), and if it's true, can you then explain why on occasion a page will finish loading the content, then the CSS is applied a second or two later? (This has happened, rarely, on my own pages where the CSS was in the <head> tags)
    
    – [Izkata](/users/500202/izkata "9,097 reputation")
    
    [Feb 14, 2012 at 14:59](#comment11698302_9272629)
    
*   2
    
    So we should put `jQuery` + `jQuery UI` + `$(document).ready(function () { });` at the end of the page? Will it **always** work as expected?
    
    – [Olivier Pons](/users/106140/olivier-pons "15,553 reputation")
    
    [Feb 16, 2012 at 9:06](#comment11741180_9272629)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "Expand to show all comments on this post")

This answer is useful

48

This answer is not useful

Save this answer.

[](/posts/9273445/timeline)

Show activity on this post.

I would not emphasize too much on the results that you have got. I believe that it is subjective, but I have a reason to explain you that it is better to put in CSS before JavaScript.

During the loading of your website, there are two scenarios that you would see:

_**Case 1**_: white screen → unstyled website → styled website → interaction → styled and interactive website

_**Case 2**_: white screen → unstyled website → interaction → styled website → styled and interactive website

I honestly can't imagine anyone choosing Case 2. This would mean that visitors using slow Internet connections will be faced with an unstyled website, that allows them to interact with it using JavaScript (since that is already loaded). Furthermore, the amount of time spend looking at an unstyled website would be maximized this way. Why would anyone want that?

It also works better, as [jQuery states](http://api.jquery.com/ready/):

> "When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts".

When the files are loaded in the wrong order (first JavaScript, then CSS), any JavaScript code relying on properties set in CSS files (for example, the width or height of a _div_) won't be loaded correctly. It seems that with the wrong loading order, the correct properties are 'sometimes' known to JavaScript (perhaps this is caused by a race condition?). This effect seems bigger or smaller depending on the browser used.

[Share](/a/9273445/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9273445/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 19:31](/posts/9273445/revisions "show all edits to this post")

[

![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 7:55

[

![defau1t's user avatar](https://www.gravatar.com/avatar/a1d5dd07adb7418d1ac99e250942f70c?s=64&d=identicon&r=PG)

](/users/724764/defau1t)

[defau1t](/users/724764/defau1t)defau1t

10.6k22 gold badges3535 silver badges4747 bronze badges

2

*   2
    
    How would you go about guaranteeing all the css was loaded before the javascript executes? Can you? or should your javascript be robust enough to deal with the situation where the styles might not necessarily be loaded.
    
    – [Jonnio](/users/219341/jonnio "267 reputation")
    
    [Feb 15, 2012 at 12:13](#comment11719439_9273445)
    
*   @Jonnio If your JS has a dependency, then you should make that dependency explicit. Otherwise, you will always have rare timing issues. ES6 modules are a good way to make that happen, but there are many libraries that could be used as well.
    
    – [kmkemp](/users/725957/kmkemp "1,656 reputation")
    
    [Nov 9, 2018 at 19:24](#comment93351088_9273445)
    

[Add a comment](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.")  | [](# "Expand to show all comments on this post")

This answer is useful

30

This answer is not useful

Save this answer.

[](/posts/9271660/timeline)

Show activity on this post.

Were your tests performed on your personal computer, or on a web server? It is a blank page, or is it a complex online system with images, databases, etc.? Are your scripts performing a simple hover event action, or are they a core component to how your website renders and interacts with the user? There are several things to consider here, and the relevance of these recommendations almost always become rules when you venture into high-caliber web development.

**The purpose of the "put stylesheets at the top and scripts at the bottom" rule is that, in general, it's the best way to achieve optimal _progressive rendering_,** which is critical to the user experience.

All else aside: assuming your test is valid, and you really are producing results contrary to the popular rules, it'd come as no surprise, really. Every website (and everything it takes to make the whole thing appear on a user's screen) is different and the Internet is constantly evolving.

[Share](/a/9271660/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[Edit](/posts/9271660/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Feb 14, 2012 at 6:54](/posts/9271660/revisions "show all edits to this post")

community wiki

  

[11 revs  
](/posts/9271660/revisions "show revision history for this post")[sunday](/users/1152633)

2

*   1
    
    I appreciate the point you are making in bold, but the OP is talking about what happens when you vary the order with _both_ at the top, neither at the bottom.
    
    – [nnnnnn](/users/615754/nnnnnn "148,470 reputation")
    
    [Feb 14, 2012 at 5:35](#comment11688395_9271660)
    
*   1
    
    Thus, "assuming \[his\] test is valid."
    
    – [skippr](/users/1152633/skippr "2,656 reputation")
    
    [Feb 14, 2012 at 5:40](#comment11688458_9271660)
    

[Add a comment](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.")  | [](# "Expand to show all comments on this post")

This answer is useful

24

This answer is not useful

Save this answer.

[](/posts/9277745/timeline)

Show activity on this post.

I include CSS files before JavaScript for a different reason.

If my JavaScript code needs to do dynamic sizing of some page element (for those corner cases where CSS is really a main in the back) then loading the CSS after the JS is russing can lead to race conditions, where the element is resized before CSS styles are applied and thus looks weird when the styles finally kick in. If I load the CSS beforehand I can guarantee that things run in the intended order and that the final layout is what I want it to be.

[Share](/a/9277745/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9277745/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 17:43](/posts/9277745/revisions "show all edits to this post")

[

![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 13:31

[

![hugomg's user avatar](https://i.stack.imgur.com/nmOPo.png?s=64&g=1)

](/users/90511/hugomg)

[hugomg](/users/90511/hugomg)hugomg

68.9k2525 gold badges161161 silver badges247247 bronze badges

7

*   3
    
    this will break one day on some browser. I am not guessing.
    
    – [jcolebrand](/users/109749/jcolebrand "15,929 reputation")
    
    [Feb 15, 2012 at 18:14](#comment11727870_9277745)
    
*   1
    
    jcolebrand: Yes, I think I hadn't drunk enough coffee when I wrote this. (In retrospect, I guess the important things are just to avoid dynamic loading of CSS and putting the JS inside a domReady event if you need to do dynamic sizing)
    
    – [hugomg](/users/90511/hugomg "68,896 reputation")
    
    [Feb 15, 2012 at 18:25](#comment11728107_9277745)
    
*   Scripts should should not change any display. That's the CSS job. HTML = content, CSS = How to display content, javascript change content dynamically. Also js should only act after (or while) the DOMContentLoaded is fired with some little but very specific situations.
    
    – [brunoais](/users/551625/brunoais "6,448 reputation")
    
    [Dec 25, 2012 at 18:36](#comment19384766_9277745)
    
*   @brunoais: Some layouts can only be created with Javascript though. For example, anything that needs to be dynamically resized must be made via Javascript and some things (like having a size be 100% - 20px) need Javascript to be done portably in old browsers.
    
    – [hugomg](/users/90511/hugomg "68,896 reputation")
    
    [Dec 25, 2012 at 21:04](#comment19386568_9277745)
    
*   @missingno In those cases, just use the DOMContentLoaded event, anyway. But I understand what you mean. (Stupid IE!)
    
    – [brunoais](/users/551625/brunoais "6,448 reputation")
    
    [Dec 25, 2012 at 21:10](#comment19386623_9277745)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "Expand to show all comments on this post")

This answer is useful

第754章

This answer is not useful

Save this answer.

[](/posts/9272730/timeline)

Show activity on this post.

这是一个非常有趣的问题。我总是把 CSS`<link href="...">`放在 JavaScript 之前，`<script src="...">`因为“我曾经读到过它更好”。所以，你是对的；现在是我们进行一些实际研究的时候了！

[我在Node.js](https://en.wikipedia.org/wiki/Node.js)中设置了自己的测试工具（代码如下）。基本上，我：

*   确保没有 HTTP 缓存，因此浏览器每次加载页面时都必须执行完整下载。
*   为了模拟现实，我添加了 jQuery 和[H5BP](http://html5boilerplate.com/) CSS（因此需要解析大量的脚本/CSS）
*   设置两个页面 - 一个在脚本之前使用 CSS，另一个在脚本之后使用 CSS。
*   **`<head>`**记录外部脚本执行的时间
*   记录了 中的内联脚本执行的时间**`<body>`**，类似于`DOMReady`.
*   将 CSS 和/或脚本发送到浏览器的时间延迟了 500 毫秒。
*   在三大主流浏览器中运行测试20次。

结果
==

首先，CSS文件延迟500毫秒（单位是毫秒）：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

接下来，我将 jQuery 设置为延迟 500 毫秒，而不是 CSS：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

最后，我将jQuery 和 CSS**都设置为延迟 500 毫秒：**

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

结论
==

首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的 中（而不是位于 的末尾`<body>`）。关于为什么您可以在`<head>`文档末尾链接到脚本有各种争论，但这超出了本答案的范围。这严格来说是关于s 中`<script>`s 是否应该位于`<link>`s之前`<head>`。

**在现代桌面浏览器中，**看起来首先链接到 CSS**永远不会**带来性能提升。当 CSS 和脚本都延迟时，将 CSS 放在脚本后面会给你带来微不足道的收益，但当 CSS 延迟时会给你带来很大的收益。 （由`last`第一组结果中的列显示。）

鉴于最后链接到 CSS 似乎不会损害性能，但在某些情况下_可以_提供增益，因此如果不关心旧浏览器的性能， 则应**_仅在桌面浏览器上_****链接到外部脚本****_后_****链接到外部样式表。****请继续阅读移动设备的情况。**

为什么？
====

从历史上看，当浏览器遇到`<script>`指向外部资源的标签时，浏览器将**停止**解析 HTML，检索脚本，执行它，然后继续解析 HTML。相反，如果浏览器遇到`<link>`外部样式表，它将在获取 CSS 文件的同时_继续_解析 HTML（并行）。

因此，广泛重复的建议是首先放置样式表——首先下载它们，并且可以并行加载第一个下载的脚本。

然而，现代浏览器（包括我上面测试的所有浏览器）已经实现了[_推测性解析_](https://www.google.com/search?q=speculative+parsing)，其中浏览器在 HTML 中“向前看”并在脚本下载和执行_之前开始下载资源。_

在没有推测性解析的旧浏览器中，将脚本放在第一位会影响性能，因为它们不会并行下载。

浏览器支持
-----

推测性解析首次实现于：（以及截至 2012 年 1 月使用此版本或更高版本的全球桌面浏览器用户的百分比）

*   Chrome 1（[WebKit](https://en.wikipedia.org/wiki/WebKit) 525）（100%）
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   火狐 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [歌剧](https://en.wikipedia.org/wiki/Opera_%28web_browser%29)11.60 (85%)

目前使用的桌面浏览器总共大约有 85% 支持推测加载。将脚本放在 CSS 之前会给_全球_15% 的用户带来性能损失；您的里程可能会根据您网站的特定受众而有所不同。 （请记住，这个数字正在减少。）

在移动浏览器上，由于移动浏览器和操作系统环境的异构性，获得明确的数字有点困难。由于推测渲染是在 WebKit 525（2008 年 3 月发布）中实现的，并且几乎所有有价值的移动浏览器都基于 WebKit，因此我们可以得出结论，“大多数”移动浏览器_应该_支持它。根据[quirksmode 的说法](http://www.quirksmode.org/webkit.html)，iOS 2.2/Android 1.0 使用 WebKit 525。我不知道 Windows Phone 是什么样子。

**然而，**我在 Android 4 设备上运行了测试，虽然我看到的数字与桌面结果类似，但我将其连接到Android 版 Chrome 中出色的新[远程调试器，](http://code.google.com/chrome/mobile/docs/debugging.html) _“网络”_选项卡显示浏览器实际上正在等待下载CSS 直到 JavaScript 代码完全加载 - 换句话说，**即使是 Android 版 WebKit 的最新版本似乎也不支持推测性解析。** 我怀疑它可能由于移动设备固有的 CPU、内存和/或网络限制而被关闭。

代码
==

请原谅我的草率——这是 Q&D。

### 文件_app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### 文件_css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery)是[jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

[分享](/a/9272730/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[编辑](/posts/9272730/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[编辑于 2022 年 9 月 3 日 17:40](/posts/9272730/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[彼得·莫滕森](/users/63550/peter-mortensen)

30.9k2222枚金徽章107107 银徽章131131枚青铜徽章

回复于 2012 年 2 月 14 日 6:37

[

![josh3736 的用户头像](https://i.stack.imgur.com/4wIGc.jpg?s=64&g=1)

](/users/201952/josh3736)

[乔什3736](/users/201952/josh3736)josh3736

141k3333枚金色徽章220220枚银质徽章268268枚青铜徽章

9

*   146
    
    这是一个很棒的答案，感谢您[使用科学！](http://blog.stackoverflow.com/2011/12/dont-be-afraid-to-use-the-science/)根据你的结果**“在现代浏览器中，看起来首先链接到 CSS 永远不会提供性能增益”**，我认为问题标题的答案是_肯定的_，CSS 首先的旧建议显然是无效的。
    
    – [杰夫·阿特伍德](/users/1/jeff-atwood "63,618 声誉")
    
    [2012 年 2 月 14 日 7:54](#comment11690017_9272730)
    
*   关于 @josh3736 关于移动设备上的逆的更新...这是一个很好的例子，不要在这个重大变化上操之过急。我很好奇其他移动浏览器的行为（webkit、gecko、presto、trident 等），因为移动设备的性能通常更重要。
    
    – [斯肯利夫](/users/6144/scunliffe "62,886 声誉")
    
    [2012 年 2 月 14 日 19:17](#comment11704299_9272730)
    
*   1
    
    您还应该尝试添加一些慢速来打印 css/js，以模拟慢速服务器的速度。
    
    – [柯布](/users/709376/kirb "2,031 声望")
    
    [2012 年 2 月 14 日 21:19](#comment11706774_9272730)
    
*   如果使用 defer 或 async 怎么样？这会改变吗？ （尝试使用内联脚本和不使用内联脚本）这会改变吗？
    
    – [布鲁诺埃](/users/551625/brunoais "6,448 声望")
    
    [2012 年 12 月 25 日 18:28](#comment19384658_9272730)
    
*   1
    
    _“首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的末尾（而不是末尾`<body>`）。”_我会在答案的较早部分强调这一点**，**例如在顶部。从几乎任何角度（当然不是性能角度）来看，包含引用外部文件的`script`in几乎从来都不正确。`head`我不记得在现实生活中曾经必须这样做过。_内联_脚本可能有一两行奇数，但仅此而已。如果没有**很好**的相反理由，默认值应该是正文的结尾。
    
    – [TJ·克劳德](/users/157247/t-j-crowder "1,049,803 声誉")
    
    [2018 年 12 月 12 日 11:46](#comment94337184_9272730)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [显示另外**4**条评论](# "展开以显示此帖子的所有评论")

This answer is useful

313

This answer is not useful

Save this answer.

[](/posts/9272629/timeline)

Show activity on this post.

将 CSS 放在 JavaScript 之前有两个主要原因。

1.  旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您`a.js`遵循，`b.css`它们将按顺序下载：先是 a，然后是 b。如果您`b.css`遵循，`a.js`它们会并行下载，因此页面加载速度更快。
    
2.  在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。**最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。**
    

[使用Cuzillion](http://cuzillion.com/)创建示例很有趣。例如，[此页面的](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f)HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在[此页面](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f)上看到的那样。

[分享](/a/9272629/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[编辑](/posts/9272629/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[2012 年 2 月 15 日 7:06编辑](/posts/9272629/revisions "显示对此帖子的所有编辑")

[

![杰夫·阿特伍德的用户头像](https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=64&d=identicon&r=PG)

](/users/1/jeff-atwood)

[杰夫·阿特伍德](/users/1/jeff-atwood)

63.6k4848枚金色徽章150150 枚银质徽章153153枚青铜徽章

回复于 2012 年 2 月 14 日 6:27

[

![Steve Souders 的用户头像](https://www.gravatar.com/avatar/aabd4fe494747fd05d0bf725bf773c73?s=64&d=identicon&r=PG)

](/users/1208454/steve-souders)

[史蒂夫·苏德斯](/users/1208454/steve-souders)Steve Souders

1,89711 个金色徽章1010 枚银色徽章33枚青铜徽章

7

*   12
    
    尊敬的史蒂夫比我先找到了答案，但我将添加一篇与他提到的内容相关的文章：[stevesouders.com/blog/2009/04/27 /...](http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/)
    
    – [胡安·巴勃罗·布里蒂卡](/users/970182/juan-pablo-buritica "第507章 声望")
    
    [2012 年 2 月 14 日 6:31](#comment11689096_9272629)
    
*   4
    
    查看哪些浏览器支持该`async`属性，史蒂夫在这里推荐“更好地异步加载它们” [——stackoverflow.com/questions/1834077/…](http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async "哪些浏览器支持异步脚本")
    
    – [杰夫·阿特伍德](/users/1/jeff-atwood "63,618 声誉")
    
    [2012 年 2 月 14 日 6:42](#comment11689152_9272629)
    
*   嘿，你能告诉我为什么有人会用指令链接 CSS 文件吗`@import`？
    
    – [乔什·斯托多拉](/users/54420/josh-stodola "81,965 声誉")
    
    [2012 年 2 月 14 日 6:42](#comment11689160_9272629)
    
*   7
    
    2) 的来源是什么，如果是真的，您能否解释一下为什么有时页面会完成内容加载，然后一两秒后应用 CSS？ （这种情况很少发生在我自己的页面上，CSS 位于 <head> 标签中）
    
    – [伊兹方](/users/500202/izkata "9,097 声誉")
    
    [2012 年 2 月 14 日 14:59](#comment11698302_9272629)
    
*   2
    
    那么我们应该把`jQuery`++放在页面`jQuery UI`的`$(document).ready(function () { });`末尾吗？它**总是**会按预期工作吗？
    
    – [奥利维尔·庞斯](/users/106140/olivier-pons "15,553 声望")
    
    [2012 年 2 月 16 日 9:06](#comment11741180_9272629)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [显示另外**2**条评论](# "展开以显示此帖子的所有评论")

This answer is useful

48

This answer is not useful

Save this answer.

[](/posts/9273445/timeline)

Show activity on this post.

我不会过多强调你所得到的结果。我相信这是主观的，但我有理由向你解释，最好在 JavaScript 之前放入 CSS。

在加载网站期间，您会看到两种情况：

_**案例1**_：白屏→无样式网站→有样式的网站→交互→有样式的交互式网站

_**案例2**_：白屏→无样式网站→交互→有样式的网站→有样式和交互式的网站

老实说，我无法想象有人会选择案例 2。这意味着使用慢速 Internet 连接的访问​​者将面临一个无样式的网站，该网站允许他们使用 JavaScript 与其进行交互（因为该网站已加载）。此外，通过这种方式，花在浏览无样式网站上的时间将会最大化。为什么有人想要那个？

[正如jQuery 所说](http://api.jquery.com/ready/)，它也能更好地工作：

> “当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要”。

当文件以错误的顺序加载时（首先是 JavaScript，然后是 CSS），任何依赖于 CSS 文件中设置的属性（例如 div 的宽度或高度_）_的 JavaScript 代码都将无法正确加载。看起来，如果加载顺序错误，JavaScript“有时”会知道正确的属性（也许这是由竞争条件引起的？）。根据所使用的浏览器，这种效果似乎更大或更小。

[分享](/a/9273445/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[编辑](/posts/9273445/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[编辑于 2022 年 9 月 3 日 19:31](/posts/9273445/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[彼得·莫滕森](/users/63550/peter-mortensen)

30.9k2222枚金徽章107107 银徽章131131枚青铜徽章

回复于2012 年 2 月 14 日 7:55

[

![defau1t的用户头像](https://www.gravatar.com/avatar/a1d5dd07adb7418d1ac99e250942f70c?s=64&d=identicon&r=PG)

](/users/724764/defau1t)

[默认值](/users/724764/defau1t)defau1t

10.6k22 个金色徽章3535 枚银质徽章4747枚青铜徽章

2

*   2
    
    How would you go about guaranteeing all the css was loaded before the javascript executes? Can you? or should your javascript be robust enough to deal with the situation where the styles might not necessarily be loaded.
    
    – [Jonnio](/users/219341/jonnio "第267章 声誉")
    
    [Feb 15, 2012 at 12:13](#comment11719439_9273445)
    
*   @Jonnio If your JS has a dependency, then you should make that dependency explicit. Otherwise, you will always have rare timing issues. ES6 modules are a good way to make that happen, but there are many libraries that could be used as well.
    
    – [kmkemp](/users/725957/kmkemp "1,656 声望")
    
    [Nov 9, 2018 at 19:24](#comment93351088_9273445)
    

[Add a comment](# "使用评论来询问更多信息或提出改进建议。避免发表“+1”或“谢谢”之类的评论。")  | [](# "Expand to show all comments on this post")

This answer is useful

30

This answer is not useful

Save this answer.

[](/posts/9271660/timeline)

Show activity on this post.

Were your tests performed on your personal computer, or on a web server? It is a blank page, or is it a complex online system with images, databases, etc.? Are your scripts performing a simple hover event action, or are they a core component to how your website renders and interacts with the user? There are several things to consider here, and the relevance of these recommendations almost always become rules when you venture into high-caliber web development.

**The purpose of the "put stylesheets at the top and scripts at the bottom" rule is that, in general, it's the best way to achieve optimal _progressive rendering_,** which is critical to the user experience.

All else aside: assuming your test is valid, and you really are producing results contrary to the popular rules, it'd come as no surprise, really. Every website (and everything it takes to make the whole thing appear on a user's screen) is different and the Internet is constantly evolving.

[Share](/a/9271660/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[Edit](/posts/9271660/edit "修改并完善这篇文章")

Follow

Follow this answer to receive notifications

[edited Feb 14, 2012 at 6:54](/posts/9271660/revisions "显示对此帖子的所有编辑")

community wiki

  

[11 revs  
](/posts/9271660/revisions "显示此帖子的修订历史记录")[sunday](/users/1152633)

2

*   1
    
    I appreciate the point you are making in bold, but the OP is talking about what happens when you vary the order with _both_ at the top, neither at the bottom.
    
    – [nnnnnn](/users/615754/nnnnnn "148,470 声望")
    
    [Feb 14, 2012 at 5:35](#comment11688395_9271660)
    
*   1
    
    Thus, "assuming \[his\] test is valid."
    
    – [skippr](/users/1152633/skippr "2,656 声望")
    
    [Feb 14, 2012 at 5:40](#comment11688458_9271660)
    

[Add a comment](# "使用评论来询问更多信息或提出改进建议。避免发表“+1”或“谢谢”之类的评论。")  | [](# "Expand to show all comments on this post")

This answer is useful

24

This answer is not useful

Save this answer.

[](/posts/9277745/timeline)

Show activity on this post.

I include CSS files before JavaScript for a different reason.

If my JavaScript code needs to do dynamic sizing of some page element (for those corner cases where CSS is really a main in the back) then loading the CSS after the JS is russing can lead to race conditions, where the element is resized before CSS styles are applied and thus looks weird when the styles finally kick in. If I load the CSS beforehand I can guarantee that things run in the intended order and that the final layout is what I want it to be.

[Share](/a/9277745/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9277745/edit "修改并完善这篇文章")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 17:43](/posts/9277745/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 13:31

[

![Hugomg 的用户头像](https://i.stack.imgur.com/nmOPo.png?s=64&g=1)

](/users/90511/hugomg)

[hugomg](/users/90511/hugomg)hugomg

68.9k2525 gold badges161161 silver badges247247 bronze badges

7

*   3
    
    this will break one day on some browser. I am not guessing.
    
    – [jcolebrand](/users/109749/jcolebrand "15,929 声望")
    
    [Feb 15, 2012 at 18:14](#comment11727870_9277745)
    
*   1
    
    jcolebrand: Yes, I think I hadn't drunk enough coffee when I wrote this. (In retrospect, I guess the important things are just to avoid dynamic loading of CSS and putting the JS inside a domReady event if you need to do dynamic sizing)
    
    – [hugomg](/users/90511/hugomg "68,896 声望")
    
    [Feb 15, 2012 at 18:25](#comment11728107_9277745)
    
*   Scripts should should not change any display. That's the CSS job. HTML = content, CSS = How to display content, javascript change content dynamically. Also js should only act after (or while) the DOMContentLoaded is fired with some little but very specific situations.
    
    – [brunoais](/users/551625/brunoais "6,448 声望")
    
    [Dec 25, 2012 at 18:36](#comment19384766_9277745)
    
*   @brunoais: Some layouts can only be created with Javascript though. For example, anything that needs to be dynamically resized must be made via Javascript and some things (like having a size be 100% - 20px) need Javascript to be done portably in old browsers.
    
    – [hugomg](/users/90511/hugomg "68,896 声望")
    
    [Dec 25, 2012 at 21:04](#comment19386568_9277745)
    
*   @missingno In those cases, just use the DOMContentLoaded event, anyway. But I understand what you mean. (Stupid IE!)
    
    – [brunoais](/users/551625/brunoais "6,448 声望")
    
    [Dec 25, 2012 at 21:10](#comment19386623_9277745)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "展开以显示此帖子的所有评论")

This answer is useful

754

This answer is not useful

Save this answer.

[](/posts/9272730/timeline)

Show activity on this post.

This is a very interesting question. I've always put my CSS `<link href="...">`s before my JavaScript `<script src="...">`s because "I read one time that it's better." So, you're right; it's high time we do some actual research!

I set up my own test harness in [Node.js](https://en.wikipedia.org/wiki/Node.js) (code below). Basically, I:

*   Made sure there was no HTTP caching so the browser would have to do a full download each time a page is loaded.
*   To simulate reality, I included jQuery and the [H5BP](http://html5boilerplate.com/) CSS (so there's a decent amount of script/CSS to parse)
*   Set up two pages - one with CSS before script, one with CSS after script.
*   Recorded how long it took for the external script in the **`<head>`** to execute
*   Recorded how long it took for the inline script in the **`<body>`** to execute, which is analogous to `DOMReady`.
*   Delayed sending CSS and/or script to the browser by 500 ms.
*   Ran the test 20 times in the three major browsers.

Results
=======

First, with the CSS file delayed by 500 ms (the unit is milliseconds):

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

Next, I set jQuery to delay by 500 ms instead of the CSS:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

Finally, I set **both** jQuery and the CSS to delay by 500 ms:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

Conclusions
===========

First, it's important to note that I'm operating under the assumption that you have scripts located in the `<head>` of your document (as opposed to the end of the `<body>`). There are various arguments regarding why you might link to your scripts in the `<head>` versus the end of the document, but that's outside the scope of this answer. This is strictly about whether `<script>`s should go before `<link>`s in the `<head>`.

**In modern DESKTOP browsers,** it looks like linking to CSS first **never** provides a performance gain. Putting CSS after script gets you a trivial amount of gain when both CSS and script are delayed, but gives you large gains when CSS is delayed. (Shown by the `last` columns in the first set of results.)

Given that linking to CSS last does not seem to hurt performance but _can_ provide gains under certain circumstances, **you should link to external style sheets _after_ you link to external scripts _only on desktop browsers_** if the performance of old browsers is not a concern. **Read on for the mobile situation.**

Why?
====

Historically, when a browser encountered a `<script>` tag pointing to an external resource, the browser would **stop** parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a `<link>` for an external style sheet, it would _continue_ parsing the HTML while it fetched the CSS file (in parallel).

Hence, the widely-repeated advice to put style sheets first – they would download first, and the first script to download could be loaded in parallel.

However, modern browsers (including all of the browsers I tested with above) have implemented [_speculative parsing_](https://www.google.com/search?q=speculative+parsing), where the browser "looks ahead" in the HTML and begins downloading resources _before_ scripts download and execute.

In old browsers without speculative parsing, putting scripts first will affect performance since they will not download in parallel.

Browser Support
---------------

Speculative parsing was first implemented in: (along with the percentage of worldwide desktop browser users using this version or greater as of Jan 2012)

*   Chrome 1 ([WebKit](https://en.wikipedia.org/wiki/WebKit) 525) (100%)
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   Firefox 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [Opera](https://en.wikipedia.org/wiki/Opera_%28web_browser%29) 11.60 (85%)

目前使用的桌面浏览器总共大约有 85% 支持推测加载。将脚本放在 CSS 之前会给_全球_15% 的用户带来性能损失；您的里程可能会根据您网站的特定受众而有所不同。 （请记住，这个数字正在减少。）

在移动浏览器上，由于移动浏览器和操作系统环境的异构性，获得明确的数字有点困难。由于推测渲染是在 WebKit 525（2008 年 3 月发布）中实现的，并且几乎所有有价值的移动浏览器都基于 WebKit，因此我们可以得出结论，“大多数”移动浏览器_应该_支持它。根据[quirksmode 的说法](http://www.quirksmode.org/webkit.html)，iOS 2.2/Android 1.0 使用 WebKit 525。我不知道 Windows Phone 是什么样子。

**然而，**我在 Android 4 设备上运行了测试，虽然我看到的数字与桌面结果类似，但我将其连接到Android 版 Chrome 中出色的新[远程调试器，](http://code.google.com/chrome/mobile/docs/debugging.html) _“网络”_选项卡显示浏览器实际上正在等待下载CSS 直到 JavaScript 代码完全加载 - 换句话说，**即使是 Android 版 WebKit 的最新版本似乎也不支持推测性解析。** 我怀疑它可能由于移动设备固有的 CPU、内存和/或网络限制而被关闭。

代码
==

请原谅我的草率——这是 Q&D。

### 文件_app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### 文件_css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery)是[jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

[分享](/a/9272730/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[编辑](/posts/9272730/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[编辑于 2022 年 9 月 3 日 17:40](/posts/9272730/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[彼得·莫滕森](/users/63550/peter-mortensen)

30.9k2222枚金徽章107107 银徽章131131枚青铜徽章

回复于 2012 年 2 月 14 日 6:37

[

![josh3736 的用户头像](https://i.stack.imgur.com/4wIGc.jpg?s=64&g=1)

](/users/201952/josh3736)

[乔什3736](/users/201952/josh3736)josh3736

141k3333枚金色徽章220220枚银质徽章268268枚青铜徽章

9

*   146
    
    这是一个很棒的答案，感谢您[使用科学！](http://blog.stackoverflow.com/2011/12/dont-be-afraid-to-use-the-science/)根据你的结果**“在现代浏览器中，看起来首先链接到 CSS 永远不会提供性能增益”**，我认为问题标题的答案是_肯定的_，CSS 首先的旧建议显然是无效的。
    
    – [杰夫·阿特伍德](/users/1/jeff-atwood "63,618 声誉")
    
    [2012 年 2 月 14 日 7:54](#comment11690017_9272730)
    
*   关于 @josh3736 关于移动设备上的逆的更新...这是一个很好的例子，不要在这个重大变化上操之过急。我很好奇其他移动浏览器的行为（webkit、gecko、presto、trident 等），因为移动设备的性能通常更重要。
    
    – [斯肯利夫](/users/6144/scunliffe "62,886 声誉")
    
    [2012 年 2 月 14 日 19:17](#comment11704299_9272730)
    
*   1
    
    您还应该尝试添加一些慢速来打印 css/js，以模拟慢速服务器的速度。
    
    – [柯布](/users/709376/kirb "2,031 声望")
    
    [2012 年 2 月 14 日 21:19](#comment11706774_9272730)
    
*   如果使用 defer 或 async 怎么样？这会改变吗？ （尝试使用内联脚本和不使用内联脚本）这会改变吗？
    
    – [布鲁诺埃](/users/551625/brunoais "6,448 声望")
    
    [2012 年 12 月 25 日 18:28](#comment19384658_9272730)
    
*   1
    
    _“首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的末尾（而不是末尾`<body>`）。”_我会在答案的较早部分强调这一点**，**例如在顶部。从几乎任何角度（当然不是性能角度）来看，包含引用外部文件的`script`in几乎从来都不正确。`head`我不记得在现实生活中曾经必须这样做过。_内联_脚本可能有一两行奇数，但仅此而已。如果没有**很好**的相反理由，默认值应该是正文的结尾。
    
    – [TJ·克劳德](/users/157247/t-j-crowder "1,049,803 声誉")
    
    [2018 年 12 月 12 日 11:46](#comment94337184_9272730)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [显示另外**4**条评论](# "展开以显示此帖子的所有评论")

This answer is useful

313

This answer is not useful

Save this answer.

[](/posts/9272629/timeline)

Show activity on this post.

将 CSS 放在 JavaScript 之前有两个主要原因。

1.  旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您`a.js`遵循，`b.css`它们将按顺序下载：先是 a，然后是 b。如果您`b.css`遵循，`a.js`它们会并行下载，因此页面加载速度更快。
    
2.  在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。**最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。**
    

[使用Cuzillion](http://cuzillion.com/)创建示例很有趣。例如，[此页面的](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f)HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在[此页面](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f)上看到的那样。

[分享](/a/9272629/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[编辑](/posts/9272629/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[2012 年 2 月 15 日 7:06编辑](/posts/9272629/revisions "显示对此帖子的所有编辑")

[

![杰夫·阿特伍德的用户头像](https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=64&d=identicon&r=PG)

](/users/1/jeff-atwood)

[杰夫·阿特伍德](/users/1/jeff-atwood)

63.6k4848枚金色徽章150150 枚银质徽章153153枚青铜徽章

回复于 2012 年 2 月 14 日 6:27

[

![Steve Souders 的用户头像](https://www.gravatar.com/avatar/aabd4fe494747fd05d0bf725bf773c73?s=64&d=identicon&r=PG)

](/users/1208454/steve-souders)

[史蒂夫·苏德斯](/users/1208454/steve-souders)Steve Souders

1,89711 个金色徽章1010 枚银色徽章33枚青铜徽章

7

*   12
    
    尊敬的史蒂夫比我先找到了答案，但我将添加一篇与他提到的内容相关的文章：[stevesouders.com/blog/2009/04/27 /...](http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/)
    
    – [胡安·巴勃罗·布里蒂卡](/users/970182/juan-pablo-buritica "第507章 声望")
    
    [2012 年 2 月 14 日 6:31](#comment11689096_9272629)
    
*   4
    
    see which browsers support the `async` attribute, which Steve is recommending here when he says "even better load them asynchronously" -- [stackoverflow.com/questions/1834077/…](http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async "哪些浏览器支持异步脚本")
    
    – [Jeff Atwood](/users/1/jeff-atwood "63,618 声誉")
    
    [Feb 14, 2012 at 6:42](#comment11689152_9272629)
    
*   Hey can you tell me why anyone would link CSS files with `@import` directives?
    
    – [Josh Stodola](/users/54420/josh-stodola "81,965 声誉")
    
    [Feb 14, 2012 at 6:42](#comment11689160_9272629)
    
*   7
    
    What's the source for 2), and if it's true, can you then explain why on occasion a page will finish loading the content, then the CSS is applied a second or two later? (This has happened, rarely, on my own pages where the CSS was in the <head> tags)
    
    – [Izkata](/users/500202/izkata "9,097 声誉")
    
    [Feb 14, 2012 at 14:59](#comment11698302_9272629)
    
*   2
    
    So we should put `jQuery` + `jQuery UI` + `$(document).ready(function () { });` at the end of the page? Will it **always** work as expected?
    
    – [Olivier Pons](/users/106140/olivier-pons "15,553 声望")
    
    [Feb 16, 2012 at 9:06](#comment11741180_9272629)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "展开以显示此帖子的所有评论")

This answer is useful

48

This answer is not useful

Save this answer.

[](/posts/9273445/timeline)

Show activity on this post.

I would not emphasize too much on the results that you have got. I believe that it is subjective, but I have a reason to explain you that it is better to put in CSS before JavaScript.

During the loading of your website, there are two scenarios that you would see:

_**Case 1**_: white screen → unstyled website → styled website → interaction → styled and interactive website

_**Case 2**_: white screen → unstyled website → interaction → styled website → styled and interactive website

I honestly can't imagine anyone choosing Case 2. This would mean that visitors using slow Internet connections will be faced with an unstyled website, that allows them to interact with it using JavaScript (since that is already loaded). Furthermore, the amount of time spend looking at an unstyled website would be maximized this way. Why would anyone want that?

It also works better, as [jQuery states](http://api.jquery.com/ready/):

> "When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts".

When the files are loaded in the wrong order (first JavaScript, then CSS), any JavaScript code relying on properties set in CSS files (for example, the width or height of a _div_) won't be loaded correctly. It seems that with the wrong loading order, the correct properties are 'sometimes' known to JavaScript (perhaps this is caused by a race condition?). This effect seems bigger or smaller depending on the browser used.

[Share](/a/9273445/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9273445/edit "修改并完善这篇文章")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 19:31](/posts/9273445/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 7:55

[

![defau1t的用户头像](https://www.gravatar.com/avatar/a1d5dd07adb7418d1ac99e250942f70c?s=64&d=identicon&r=PG)

](/users/724764/defau1t)

[defau1t](/users/724764/defau1t)defau1t

10.6k22 gold badges3535 silver badges4747 bronze badges

2

*   2
    
    How would you go about guaranteeing all the css was loaded before the javascript executes? Can you? or should your javascript be robust enough to deal with the situation where the styles might not necessarily be loaded.
    
    – [Jonnio](/users/219341/jonnio "第267章 声誉")
    
    [Feb 15, 2012 at 12:13](#comment11719439_9273445)
    
*   @Jonnio If your JS has a dependency, then you should make that dependency explicit. Otherwise, you will always have rare timing issues. ES6 modules are a good way to make that happen, but there are many libraries that could be used as well.
    
    – [kmkemp](/users/725957/kmkemp "1,656 声望")
    
    [Nov 9, 2018 at 19:24](#comment93351088_9273445)
    

[Add a comment](# "使用评论来询问更多信息或提出改进建议。避免发表“+1”或“谢谢”之类的评论。")  | [](# "Expand to show all comments on this post")

这是一个非常有趣的问题。我总是把 CSS`<link href="...">`放在 JavaScript 之前，`<script src="...">`因为“我曾经读到过它更好”。所以，你是对的；现在是我们进行一些实际研究的时候了！

[我在Node.js](https://en.wikipedia.org/wiki/Node.js)中设置了自己的测试工具（代码如下）。基本上，我：

*   确保没有 HTTP 缓存，因此浏览器每次加载页面时都必须执行完整下载。
*   为了模拟现实，我添加了 jQuery 和[H5BP](http://html5boilerplate.com/) CSS（因此需要解析大量的脚本/CSS）
*   设置两个页面 - 一个在脚本之前使用 CSS，另一个在脚本之后使用 CSS。
*   **`<head>`**记录外部脚本执行的时间
*   记录了 中的内联脚本执行的时间**`<body>`**，类似于`DOMReady`.
*   将 CSS 和/或脚本发送到浏览器的时间延迟了 500 毫秒。
*   在三大主流浏览器中运行测试20次。

结果
==

首先，CSS文件延迟500毫秒（单位是毫秒）：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

接下来，我将 jQuery 设置为延迟 500 毫秒，而不是 CSS：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

最后，我将jQuery 和 CSS**都设置为延迟 500 毫秒：**

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

结论
==

首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的 中（而不是位于 的末尾`<body>`）。关于为什么您可以在`<head>`文档末尾链接到脚本有各种争论，但这超出了本答案的范围。这严格来说是关于s 中`<script>`s 是否应该位于`<link>`s之前`<head>`。

**在现代桌面浏览器中，**看起来首先链接到 CSS**永远不会**带来性能提升。当 CSS 和脚本都延迟时，将 CSS 放在脚本后面会给你带来微不足道的收益，但当 CSS 延迟时会给你带来很大的收益。 （由`last`第一组结果中的列显示。）

鉴于最后链接到 CSS 似乎不会损害性能，但在某些情况下_可以_提供增益，因此如果不关心旧浏览器的性能， 则应**_仅在桌面浏览器上_****链接到外部脚本****_后_****链接到外部样式表。****请继续阅读移动设备的情况。**

为什么？
====

从历史上看，当浏览器遇到`<script>`指向外部资源的标签时，浏览器将**停止**解析 HTML，检索脚本，执行它，然后继续解析 HTML。相反，如果浏览器遇到`<link>`外部样式表，它将在获取 CSS 文件的同时_继续_解析 HTML（并行）。

因此，广泛重复的建议是首先放置样式表——首先下载它们，并且可以并行加载第一个下载的脚本。

然而，现代浏览器（包括我上面测试的所有浏览器）已经实现了[_推测性解析_](https://www.google.com/search?q=speculative+parsing)，其中浏览器在 HTML 中“向前看”并在脚本下载和执行_之前开始下载资源。_

在没有推测性解析的旧浏览器中，将脚本放在第一位会影响性能，因为它们不会并行下载。

浏览器支持
-----

推测性解析首次实现于：（以及截至 2012 年 1 月使用此版本或更高版本的全球桌面浏览器用户的百分比）

*   Chrome 1（[WebKit](https://en.wikipedia.org/wiki/WebKit) 525）（100%）
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   火狐 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [歌剧](https://en.wikipedia.org/wiki/Opera_%28web_browser%29)11.60 (85%)

目前使用的桌面浏览器总共大约有 85% 支持推测加载。将脚本放在 CSS 之前会给_全球_15% 的用户带来性能损失；您的里程可能会根据您网站的特定受众而有所不同。 （请记住，这个数字正在减少。）

在移动浏览器上，由于移动浏览器和操作系统环境的异构性，获得明确的数字有点困难。由于推测渲染是在 WebKit 525（2008 年 3 月发布）中实现的，并且几乎所有有价值的移动浏览器都基于 WebKit，因此我们可以得出结论，“大多数”移动浏览器_应该_支持它。根据[quirksmode 的说法](http://www.quirksmode.org/webkit.html)，iOS 2.2/Android 1.0 使用 WebKit 525。我不知道 Windows Phone 是什么样子。

**然而，**我在 Android 4 设备上运行了测试，虽然我看到的数字与桌面结果类似，但我将其连接到Android 版 Chrome 中出色的新[远程调试器，](http://code.google.com/chrome/mobile/docs/debugging.html) _“网络”_选项卡显示浏览器实际上正在等待下载CSS 直到 JavaScript 代码完全加载 - 换句话说，**即使是 Android 版 WebKit 的最新版本似乎也不支持推测性解析。** 我怀疑它可能由于移动设备固有的 CPU、内存和/或网络限制而被关闭。

代码
==

请原谅我的草率——这是 Q&D。

### 文件_app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### 文件_css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery)是[jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

我不会过多强调你所得到的结果。我相信这是主观的，但我有理由向你解释，最好在 JavaScript 之前放入 CSS。

在加载网站期间，您会看到两种情况：

_**案例1**_：白屏→无样式网站→有样式的网站→交互→有样式的交互式网站

_**案例2**_：白屏→无样式网站→交互→有样式的网站→有样式和交互式的网站

老实说，我无法想象有人会选择案例 2。这意味着使用慢速 Internet 连接的访问​​者将面临一个无样式的网站，该网站允许他们使用 JavaScript 与其进行交互（因为该网站已加载）。此外，通过这种方式，花在浏览无样式网站上的时间将会最大化。为什么有人想要那个？

[正如jQuery 所说](http://api.jquery.com/ready/)，它也能更好地工作：

> “当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要”。

当文件以错误的顺序加载时（首先是 JavaScript，然后是 CSS），任何依赖于 CSS 文件中设置的属性（例如 div 的宽度或高度_）_的 JavaScript 代码都将无法正确加载。看起来，如果加载顺序错误，JavaScript“有时”会知道正确的属性（也许这是由竞争条件引起的？）。根据所使用的浏览器，这种效果似乎更大或更小。

您的测试是在您的个人计算机上还是在网络服务器上进行的？它是一个空白页面，还是一个包含图像、数据库等的复杂在线系统？您的脚本是执行简单的悬停事件操作，还是您的网站如何呈现并与用户交互的核心组件？这里有几件事需要考虑，当您冒险进行高水平的 Web 开发时，这些建议的相关性几乎总是成为规则。

**“将样式表放在顶部，将脚本放在底部”规则的目的是，一般来说，这是实现最佳_渐进式渲染的_最佳方式，**这对用户体验至关重要。

抛开其他一切不谈：假设您的测试是有效的，并且您确实产生了与流行规则相反的结果，那么这并不奇怪，真的。每个网站（以及使整个内容出现在用户屏幕上所需的一切）都是不同的，并且互联网在不断发展。

我出于不同的原因在 JavaScript 之前包含 CSS 文件。

如果我的 JavaScript 代码需要动态调整某些页面元素的大小（对于那些 CSS 在后面确实是主要元素的极端情况），那么在 JS 调用之后加载 CSS 可能会导致竞争条件，即元素在 CSS 之前调整大小应用了样式，因此当样式最终启动时看起来很奇怪。如果我事先加载 CSS，我可以保证事情按预期顺序运行，并且最终布局就是我想要的。

在大多数情况下，将CSS放在JavaScript之前确实有几个明显的好处，主要是关于页面加载性能和用户体验方面的考虑。

### 1. **改善渲染性能**

加载CSS之前的优先级是因为浏览器在解析HTML并构建DOM（文档对象模型）的同时，会并行下载CSS文件，并构建CSSOM（CSS对象模型）。一旦CSSOM和DOM都准备好了，浏览器将它们结合起来渲染页面。如果CSS加载被推迟，或者在JavaScript文件之后加载，浏览器可能无法立即渲染页面，因为它没有完成CSSOM的构建。这会导致页面显示不完整或者布局闪烁，影响用户体验。

例如，在实际项目中，如果CSS延迟加载，用户可能会看到未经样式处理的HTML内容（也称为FOUC——无样式内容的闪烁），直到CSS文件被加载和解析后，页面才会正常显示。

### 2. **JavaScript操作CSS**

另一个理由是，JavaScript经常会操作DOM并依赖于特定的CSS完成布局和功能。如果CSS在JavaScript之后加载，那么JavaScript在执行时可能无法正确查询或应用样式，因为相应的CSS规则还未就绪。

例如，如果一个JavaScript脚本试图动态调整元素的大小或位置，但相应的CSS尚未加载，脚本可能无法正确执行，因为它依赖的样式尚未应用于元素上。

### 3. **例外情况**

尽管通常建议先加载CSS，但在某些情况下，可能需要优先加载JavaScript。例如，当JavaScript用于加载关键内容或功能时（如动态内容生成或提前获取数据），可能需要优先加载JavaScript。在这种情况下，开发者需要确保JavaScript的执行不会对页面渲染造成不良影响。

### 总结

总的来说，将CSS置于JavaScript之前可以优化页面渲染过程，减少页面内容闪烁，确保JavaScript能正确操作已经应用样式的DOM元素。这种做法符合Web性能优化的最佳实践。但也有例外，需要根据具体需求和场景特定地调整资源加载顺序。

Web项目中引入CSS 应该总是在 javascript 文件之前吗？

在SVG（Scalable Vector Graphics）中，更改元素的颜色可以通过几种不同的方法来实现。以下是几种常用的方法：

### 1. 直接在SVG代码中使用`fill`属性更改颜色
你可以直接在SVG元素上使用`fill`属性来指定颜色。例如，如果你有一个矩形，可以这样更改它的颜色：

```xml
<svg width="100" height="100">
  <rect width="100" height="100" fill="blue" />
</svg>
```

将`fill`属性的值从`blue`改为任何其他合法的颜色值，例如`red`、`#FF0000`或`rgb(255,0,0)`。

### 2. 使用CSS更改颜色
SVG元素的颜色也可以通过CSS来控制。你可以将一个类应用于SVG元素，并在CSS中定义该类的样式。例如：

```xml
<svg width="100" height="100">
  <rect width="100" height="100" class="my-rectangle" />
</svg>
```

然后，在CSS中：

```css
.my-rectangle {
  fill: green;
}
```

你可以通过修改对应的CSS类来更改颜色，这使得在不同的状态下更改颜色变得非常灵活。

### 3. 使用JavaScript动态更改颜色
如果你需要在用户交互或是某个事件发生时改变颜色，可以使用JavaScript动态地修改`fill`属性。例如：

```html
<svg width="100" height="100">
  <rect id="my-rectangle" width="100" height="100" fill="yellow" />
</svg>

<script>
  var rect = document.getElementById('my-rectangle');
  rect.addEventListener('click', function() {
    rect.setAttribute('fill', 'purple');
  });
</script>
```

以上代码中，当用户点击这个矩形时，它的颜色会从黄色变为紫色。

### 4. 使用内联样式更改颜色
除了上述方法外，还可以在SVG元素上使用内联样式来直接更改颜色：

```xml
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: orange;" />
</svg>
```

通过更改`style`属性中的`fill`值，你可以改变圆形的颜色。

以上就是一些在SVG中更改元素颜色的方法。当然，实现这些方法时，应该注意所选择的颜色值必须是SVG支持的格式，包括颜色名称、十六进制代码或RGB/RGBA表示法。

[CSS 过滤器适用于所有当前浏览器](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility)

### 更改任何 SVG 颜色

1. 使用标签添加 SVG 图像 `<img>`。

   ```html
   <img src="dotted-arrow.svg" class="filter-green"/>
   ```
2. 要过滤到特定颜色，请使用以下[Codepen（单击此处打开 Codepen）](https://codepen.io/sosuke/pen/Pjoqqp)将十六进制颜色代码转换为 CSS 过滤器：

   例如，输出 `#00EE00`为

   ```css
   filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
   ```
   [在这里](https://isotropic.co/hex-color-to-css-filter) `filter`为任何颜色生成一个。[](https://isotropic.co/hex-color-to-css-filter)
3. 将 CSS 添加 `filter`到此类中。

   ```cs
   .filter-green{
       filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
   }
   ```

要更改任何 SVG 的颜色，您可以通过**在任何文本编辑器中打开 SVG 文件**来直接更改 SVG 代码。该代码可能类似于以下代码：

    <?xml version="1.0" encoding="utf-8"?>
    
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    
        <g>
            <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                     C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    
        /* Some more code goes on */
        </g>
    </svg>
    

您可以观察到有一些 XML 标签，如路径、圆形、多边形等。您可以在 style 属性的帮助下添加自己的颜色。看下面的例子

    <path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    

将 style 属性添加到所有标签中，以便您可以获得所需颜色的 SVG。

根据 Daniel 的评论，我们可以直接使用 fill 属性，而不是在 style 属性中使用 fill 元素。

如果你想动态改变颜色：

1.  在代码编辑器中打开 SVG
    
2.  添加或重写`fill`每个**路径**的属性`fill="currentColor"`
    
3.  现在，该 svg 将采用字体颜色的颜色，因此您可以执行以下操作：
    
        svg {
            color : "red";
        }

您无法以这种方式更改图像的颜色。如果将 SVG 作为图像加载，则无法使用 CSS 或 JavaScript 在浏览器中更改其显示方式。

如果您想更改 SVG 图像，则必须使用 `<object>`或 `<iframe>`使用 `<svg>`内联加载它。

如果您想使用页面中的技术，则需要[Modernizr](https://en.wikipedia.org/wiki/Modernizr)库，您可以在其中检查 SVG 支持并有条件地显示或不显示后备图像。然后，您可以内联 SVG 并应用您需要的样式。

比如下面示例代码   

```
#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
    C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
    C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
    c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
    c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
```

您可以内联 SVG。使用类名 ( `my-svg-alternate`) 标记您的后备图像： 

```
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
```

在CSS中使用 `no-svg`Modernizr（CDN： http: [//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js](http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)）中的类来检查SVG支持。如果没有任何 SVG 支持，则 SVG 块将被忽略并显示图像，否则图像将从 DOM 树中删除 ( `display: none`)：

```
.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}
```

然后您可以更改内联元素的颜色：

```
#time-3-icon {
   fill: green;
}
```

**仅具有路径信息的 SVG**。您不能对图像执行此操作...因为您可以更改描边和填充信息的路径，然后就完成了。_像[Adob​​e Illustrator](https://en.wikipedia.org/wiki/Adobe_Illustrator)_

因此，通过 CSS 你可以覆盖路径`fill`值：

    path { fill: orange; }
    

但是，如果您想要一种更灵活的方式，因为您想在发生某些悬停效果时用文本更改它，请使用：

    path { fill: currentColor; }
    

    body {
      background: #ddd;
      text-align: center;
      padding-top: 2em;
    }
    
    .parent {
      width: 320px;
      height: 50px;
      display: block;
      transition: all 0.3s;
      cursor: pointer;
      padding: 12px;
      box-sizing: border-box;
    }
    
    /***  desired colors for children  ***/
    .parent{
      color: #000;
      background: #def;
    }
    .parent:hover{
      color: #fff;
      background: #85c1fc;
    }
    
    .parent span{
      font-size: 18px;
      margin-right: 8px;
      font-weight: bold;
      font-family: 'Helvetica';
      line-height: 26px;
      vertical-align: top;
    }
    .parent svg{
      max-height: 26px;
      width: auto;
      display: inline;
    }
    
    /****  magic trick  *****/
    .parent svg path{
      fill: currentcolor;
    }

    <div class='parent'>
      <span>TEXT WITH SVG</span>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
    <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
    </svg>
    </div>

运行代码片段Hide results

展开片段

如何更改 svg 元素的颜色

禁用文本选择突出显示通常指的是防止用户能够通过鼠标或其他输入设备选择页面上的文本。这样做有时是为了改善用户界面的体验或防止用户轻易复制网站内容。这可以通过多种方式实现，而最常见的方法是使用CSS或JavaScript。

### 通过CSS禁止文本选择：

可以使用CSS的 `user-select` 属性来控制哪些元素上的文本可以被用户选择。例如，要在整个网页上禁止文本选择，您可以在网页的样式表中添加以下CSS规则：

```css
/* 禁止页面上的所有文本选择 */
body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* 标准语法 */
}
```

如果只想针对特定元素禁止选择文本，您可以将选择器从 `body` 更改为您想要的特定类、ID或元素。

### 通过JavaScript禁止文本选择：

虽然CSS方法简单易用，但如果您需要更多控制，例如在用户进行特定操作后禁止文本选择，可以使用JavaScript。以下是如何执行此操作的一个例子：

```javascript
// 禁止文本选择的函数
function disableTextSelection() {
  document.onselectstart = function() { return false; };     // 针对IE
  document.onmousedown = function() { return false; };       // 针对其他浏览器
}

// 启用文本选择的函数
function enableTextSelection() {
  document.onselectstart = function() { return true; };      // 针对IE
  document.onmousedown = function() { return true; };        // 针对其他浏览器
}

// 当文档加载完成时禁用文本选择
document.addEventListener('DOMContentLoaded', function() {
  disableTextSelection();
});

// 如果需要在某些动作后重新启用文本选择，可以调用 enableTextSelection() 函数
```

通过以上方法，可以在需要的时候禁止或允许文本选择。但请注意，禁用文本选择可能会影响用户体验，并且并不能完全防止内容被复制（例如，用户可能通过查看网页源码来复制文本），应谨慎使用。

**2017 年 1 月更新：**

根据[Can I use 的说法](http://caniuse.com/#feat=user-select-none)，**Safari 的**`user-select`+足以在所有主要浏览器中实现所需的行为。**`-webkit-user-select`**

* * *

这些是所有可用的正确 CSS 变体：

    .noselect {
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome, Edge, Opera and Firefox */
    }

    <p>
      Selectable text.
    </p>
    <p class="noselect">
      Unselectable text.
    </p>

运行代码片段Hide results

展开片段

* * *

请注意，这`user-select`是在标准化过程中（目前在[W3C 工作草案](https://drafts.csswg.org/css-ui-4/#propdef-user-select)中）。它不能保证在所有地方都能工作，并且浏览器之间的实现可能存在差异。此外，浏览器将来可能会放弃对其的支持。

* * *

[更多信息可以在Mozilla 开发者网络文档](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)中找到。

该属性的值为`none`、`text`、`toggle`、`element`、`elements`和`all`。`inherit`

在大多数浏览器中，这可以使用 CSS 属性的专有变体来实现`user-select`，[最初在 CSS 3 中提出，然后被放弃，现在在](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select)[CSS UI Level 4](https://drafts.csswg.org/css-ui-4/#content-selection)中提出：

    *.unselectable {
       -moz-user-select: none;
       -khtml-user-select: none;
       -webkit-user-select: none;
    
       /*
         Introduced in Internet Explorer 10.
         See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
       */
       -ms-user-select: none;
       user-select: none;
    }
    

对于 Internet Explorer < 10 和[Opera](http://en.wikipedia.org/wiki/Opera_%28web_browser%29) < 15，您将需要使用`unselectable`您希望不可选择的元素的属性。您可以使用 HTML 中的属性来设置它：

    <div id="foo" unselectable="on" class="unselectable">...</div>
    

遗憾的是，这个属性不是继承的，这意味着您必须在`<div>`.如果这是一个问题，您可以使用 JavaScript 为元素的后代递归地执行此操作：

    function makeUnselectable(node) {
        if (node.nodeType == 1) {
            node.setAttribute("unselectable", "on");
        }
        var child = node.firstChild;
        while (child) {
            makeUnselectable(child);
            child = child.nextSibling;
        }
    }
    
    makeUnselectable(document.getElementById("foo"));
    

* * *

**2014 年 4 月 30 日更新**：只要将新元素添加到树中，就需要重新运行此树遍历，但从 @Han 的评论看来，可以通过添加在目标上`mousedown`设置的事件处理程序来避免这种情况。`unselectable`事件。详情请参见[http://jsbin.com/yagekiji/1 。](http://jsbin.com/yagekiji/1)

* * *

这仍然没有涵盖所有可能性。虽然不可能在不可选择的元素中启动选择，但在某些浏览器（例如 Internet Explorer 和 Firefox）中，仍然不可能阻止在不可选择的元素之前开始和之后结束的选择，而不会使整个文档变得不可选择。

在 CSS 3 的[用户选择](http://www.w3.org/TR/1999/WD-css3-userint-19990916#user-select)属性可用之前，基于[Gecko](http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29)的浏览器将支持`-moz-user-select`您已经找到的属性。[WebKit](https://en.wikipedia.org/wiki/WebKit)和基于 Blink 的浏览器支持该`-webkit-user-select`属性。

当然，不使用 Gecko 渲染引擎的浏览器不支持这一点。

没有符合“标准”的快速简便的方法来做到这一点；使用 JavaScript 是一种选择。

真正的问题是，为什么您希望用户无法突出显示以及复制和粘贴某些元素？我从来没有遇到过不想让用户突出显示我网站的某个部分的情况。我的几个朋友在花费大量时间阅读和编写代码后，会使用突出显示功能来记住他们在页面上的位置，或者提供一个标记，以便他们的眼睛知道下一步该看哪里。

我认为这是有用的唯一地方是，如果您有表单按钮，如果用户复制并粘贴网站，则不应复制和粘贴这些按钮。

Internet Explorer 的 JavaScript 解决方案是：

    onselectstart="return false;"

如果您想禁用除元素之外的所有内容的文本选择`<p>`，您可以在 CSS 中执行此操作（注意`-moz-none`允许在子元素中覆盖，这在其他浏览器中是允许的`none`）：

    * {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: -moz-none;
        -o-user-select: none;
        user-select: none;
    }
    
    p {
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -o-user-select: text;
        user-select: text;
    }

CSS 如何禁用文本选择突出显示

在JavaScript中格式化日期通常可以通过以下几种方法来实现：

### 1. 使用 Date 对象的内置方法
JavaScript中的`Date`对象带有几个方法可以用来获取日期和时间的不同部分（例如年、月、日、时、分、秒），然后你可以将这些部分拼接成任何你需要的格式。

```javascript
const date = new Date();

const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');

const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // 输出格式如: "2023-03-10"
```

### 2. 使用第三方库
很多开发者为了简便会选择使用像 Moment.js 或 date-fns 这样的第三方库来处理日期和时间。这些库提供了简单的API来格式化日期。

#### 使用 Moment.js
```javascript
const moment = require('moment');

const formattedDate = moment().format('YYYY-MM-DD');
console.log(formattedDate); // 输出格式如: "2023-03-10"
```

#### 使用 date-fns
```javascript
const { format } = require('date-fns');

const formattedDate = format(new Date(), 'yyyy-MM-dd');
console.log(formattedDate); // 输出格式如: "2023-03-10"
```

### 3. 使用国际化API `Intl.DateTimeFormat`
ES6引入了一个国际化API `Intl`，它有一个`DateTimeFormat`对象可以用来格式化日期。

```javascript
const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
});
const formattedDate = formatter.format(date);
console.log(formattedDate); // 输出格式如: "03/10/2023"
```

上面的例子演示了如何使用`Intl.DateTimeFormat`来按照美式格式（月/日/年）来格式化日期。这个API的优势在于它支持本地化，你可以很容易地按照不同地区的习惯来格式化日期。

### 示例
假设我们要格式化一个日期，要求输出格式为`dd/MM/yyyy HH:mm:ss`，我们可以这样做：

```javascript
const date = new Date();

const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const year = date.getFullYear();
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');

const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
console.log(formattedDate); // 输出格式如: "10/03/2023 14:20:30"
```

在选择哪种方法时，你要根据具体需要（例如是否需要本地化，是否希望引入额外的库等）来决定。对于简单的需求，内置的`Date`方法可能就足够了。而对于更复杂或特定格式的需求，则可能需要使用第三方库或`Intl`对象来简化代码。

如果您需要对格式的控制比当前接受的答案稍微少一些，[`Date#toLocaleDateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)则可用于创建标准的特定于区域设置的渲染。和参数让应用程序指定应使用其格式约定的语言，并允许对呈现进行一些自定义`locale`。`options`

#### 选项关键示例：

1.  **day：**  
    表示当天的情况。  
    可能的值为“数字”、“2 位数字”。
2.  **weekday：**  
    工作日的表示。  
    可能的值为“窄”、“短”、“长”。
3.  **年：**  
    年份的表示。  
    可能的值为“数字”、“2 位数字”。
4.  **Month：**  
    月份的表示。  
    可能的值为“数字”、“2 位数字”、“窄”、“短”、“长”。
5.  **hour：**  
    小时的表​​示。  
    可能的值为“数字”、“2 位数字”。
6.  **分钟：** 分钟的表示。  
    可能的值为“数字”、“2 位数字”。
7.  **第二：**  
    第二个的表示。  
    可能的值为“数字”、“2 位数字”。
8.  **hour12：**  
    时间格式的表示。  
    接受布尔值 true 或 false

所有这些键都是可选的。您可以根据您的要求更改选项值的数量，这也将反映每个日期时间术语的存在。

注意：如果您只想配置内容选项，但仍使用当前区域设置，则传递`null`第一个参数将导致错误。`undefined`代替使用。

#### 对于不同的语言：

1.  **“en-US”：**美式英语
2.  **“en-GB”：**英式英语
3.  **“hi-IN”：**印地语
4.  **“ja-JP”：**日语

您可以使用更多语言选项。

#### 例如

    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    var today  = new Date();
    
    console.log(today.toLocaleDateString("en-US")); // 9/17/2016
    console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
    console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

运行代码片段Hide results

展开片段

您也可以使用该`toLocaleString()`方法来达到相同的目的。唯一的区别是这个函数提供了当你不传递任何选项时的时间。

    // Example
    9/17/2016, 1:21:34 PM
    

#### 参考：

*   [`toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
    
*   [`toLocaleDateString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)

[`DateTimeFormat`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)对于自定义分隔的日期格式，您必须从对象（它是 [ECMAScript 国际化 API](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl)的一部分）中提取日期（或时间）组件，然后使用所需的分隔符手动创建一个字符串。

为此，您可以使用[`DateTimeFormat#formatToParts`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts).您可以解构数组，但这并不理想，因为数组输出取决于区域设置：

    { // example 1
       let formatter = new Intl.DateTimeFormat('en');
       let example = formatter.formatToParts();
       console.log(example);
    }
    { // example 2
       let formatter = new Intl.DateTimeFormat('hi');
       let example = formatter.formatToParts();
       console.log(example);
    }

运行代码片段Hide results

展开片段

更好的方法是将格式数组映射到结果字符串：

    function join(date, options, separator) {
       function format(option) {
          let formatter = new Intl.DateTimeFormat('en', option);
          return formatter.format(date);
       }
       return options.map(format).join(separator);
    }
    
    let options = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
    let joined = join(new Date, options, '-');
    console.log(joined);

运行代码片段Hide results

展开片段

`DateTimeFormat`您还可以使用 提取出一对一 的部分，但请注意，使用此方法时，截至 2020 年 3 月， ECMAScript 实现中在分钟和秒上出现前导零时[`DateTimeFormat#format`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format)存在[一个错误](//stackoverflow.com/questions/60544534#60545316)（此错误可以通过上面的方法规避）。

    let date = new Date(2010, 7, 5);
    let year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
    let month = new Intl.DateTimeFormat('en', { month: 'short' }).format(date);
    let day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
    console.log(`${day}-${month}-${year}`);

运行代码片段Hide results

展开片段

当使用日期和时间时，通常值得使用库（例如[luxon](//moment.github.io/luxon)、[date-fns](https://date-fns.org/)、[moment.js不建议用于新项目](https://momentjs.com/docs/#/-project-status/recommendations/)），因为该领域存在许多隐藏的复杂性。

[请注意， IE10](//caniuse.com#search=datetimeformat)不支持上述解决方案中使用的 ECMAScript 国际化 API （ 2020 年 2 月全球浏览器市场份额为[0.03%](//gs.statcounter.com/browser-version-market-share)）。

如果您需要使用纯 JavaScript 快速设置日期格式，请使用`getDate`、`getMonth + 1`、`getFullYear`和：`getHours``getMinutes`

    var d = new Date();
    
    var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
    d.getHours() + ":" + d.getMinutes();
    
    // 16-5-2015 9:50
    

或者，如果您需要用零填充：

    var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
        d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
    
    // 16-05-2015 09:50

使用[date.format 库](http://blog.stevenlevithan.com/archives/date-time-format)：

    var dateFormat = require('dateformat');
    var now = new Date();
    dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");
    

返回：

    Saturday, June 9th, 2007, 5:46:21 PM 
    

[npm 上的日期格式](https://www.npmjs.com/package/dateformat)

[http://jsfiddle.net/phZr7/1/](http://jsfiddle.net/phZr7/1/)

好吧，我想要的是将今天的日期转换为[MySQL](http://en.wikipedia.org/wiki/MySQL)友好的日期字符串`2012-06-23`，例如 ，并在我的一个查询中使用该字符串作为参数。我发现的简单解决方案是这样的：

    var today = new Date().toISOString().slice(0, 10);
    

请记住，上述解决方案没有**考虑**您的_时区_偏移。

您可以考虑使用此函数：

    function toJSONLocal (date) {
        var local = new Date(date);
        local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
        return local.toJSON().slice(0, 10);
    }
    

如果您在一天的开始/结束时执行此代码，这将为您提供正确的日期。

    var date = new Date();
    
    function toLocal(date) {
      var local = new Date(date);
      local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
      return local.toJSON();
    }
    
    function toJSONLocal(date) {
      var local = new Date(date);
      local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
      return local.toJSON().slice(0, 10);
    }
    
    // check out your devtools console
    console.log(date.toJSON());
    console.log(date.toISOString());
    console.log(toLocal(date));
    
    console.log(toJSONLocal(date));

运行代码片段Hide results

展开片段

*   [日期.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
*   [日期转JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON)
*   [字符串切片](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
*   [外部示例](http://jsfiddle.net/simo/sapuhzmm/)

JS 如何格式化日期

在Web前端开发中，`<a>`元素的`href`属性用于定义超链接的目的地。`href`的值可以是多种类型，比如URL、书签或者是JavaScript伪协议。`"#"和"javascript:void(0)"都是在某些情况下用来创建一个点击不会导致页面跳转的链接的方法。

当你使用`"#"（锚点）`时，它会创建一个指向页面中相同ID的元素的书签链接。如果这个ID不存在，它将会导致页面滚动到顶部。如果只是单纯的`"#"，没有跟随具体的ID，那么点击链接通常会导致页面滚动到顶部，并且URL会更新（添加一个`#`在URL末尾）。

当你使用`"javascript:void(0)"`时，它会执行一个空的JavaScript语句，该语句不会有任何效果，并且页面不会有任何滚动或者URL的变化。这种方法通常用于那些想要附加JavaScript事件监听器以执行某些动作但不希望更改URL或者页面位置的场景。

### 使用场景对比：

- **使用"#"**：
    - 当你想创建一个真正的书签/锚点，例如页面内导航。
    - 如果你不介意URL变化（URL末尾会添加一个`#`）。
    - 如果你想通过CSS选择器或者JavaScript感知到URL的改变。

- **使用"javascript:void(0)"**：
    - 如果你不想要URL发生变化。
    - 当你想防止页面滚动到顶部。
    - 当你使用JavaScript来处理点击事件，并且不需要锚点导航的功能。

### 例子：

1. **使用"#"进行页面内导航**：

```html

<h2 id="section1">Section 1</h2>
...


<a href="#section1">Go to Section 1</a>
```

2. **使用"javascript:void(0)"附加事件监听器**：

```html
<a href="javascript:void(0)" onclick="doSomething();">Click me</a>

<script>
function doSomething() {
    // 执行一些动作，但不改变URL，也不会滚动页面
    alert('Action performed!');
}
</script>
```

### 最佳实践：

在现代Web开发中，推荐使用更加语义化的方法，避免使用`"javascript:void(0)"`，因为它将逻辑（JavaScript代码）与标记（HTML）混合在了一起。更好的做法是使用事件监听器来处理用户的点击事件：

```html
<a href="#" id="clickableElement">Click me</a>

<script>
document.getElementById('clickableElement').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为，即不跳转
    doSomething();
});
</script>
```

这样的方式保持了HTML的清洁和JavaScript的可维护性，同时`event.preventDefault()`确保了即使使用了`"#"`，页面也不会滚动到顶部。这在提升用户体验和网站可维护性方面都是比较好的实践。

我用`javascript:void(0)`。

三个原因。鼓励`#`开发团队中使用不可避免地会导致一些人使用这样调用的函数的返回值：

    function doSomething() {
        //Some code
        return false;
    }
    

`return doSomething()`但后来他们忘记在 onclick 中使用而只是使用`doSomething()`.

避免的第二个原因是，如果被调用的函数抛出错误，`#`final将不会执行。`return false;`因此，开发人员还必须记住在被调用函数中适当处理任何错误。

第三个原因是存在`onclick`动态分配事件属性的情况。我更喜欢能够动态调用函数或分配它，而不必专门为一种或另一种附件方法编写函数代码。因此我的`onclick`（或任何东西）HTML 标记看起来像这样：

    onclick="someFunc.call(this)"
    

或者

    onclick="someFunc.apply(this, arguments)"
    

使用`javascript:void(0)`可以避免上述所有令人头痛的问题，而且我还没有发现任何缺点的例子。

因此，如果您是一个单独的开发人员，那么您显然可以做出自己的选择，但如果您作为一个团队工作，则必须声明：

使用`href="#"`，确保`onclick`始终包含`return false;`在末尾，任何被调用的函数都不会抛出错误，并且如果将函数动态附加到属性，`onclick`请确保它返回并且不抛出错误`false`。

或者

使用`href="javascript:void(0)"`

第二个显然更容易沟通。

两者都不。

如果您有一个有意义的实际 URL，请将其用作 HREF。如果有人在您的链接上单击鼠标中键以打开新选项卡或者禁用了 JavaScript，则 onclick 不会触发。

如果这是不可能的，那么您至少应该使用 JavaScript 和适当的单击事件处理程序将锚标记注入到文档中。

我意识到这并不总是可能的，但在我看来，在开发任何公共网站时都应该努力做到这一点。

查看_[Unobtrusive JavaScript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript)_和_[渐进式增强](http://en.wikipedia.org/wiki/Progressive_enhancement)_（均来自维基百科）。

做`<a href="#" onclick="myJsFunc();">Link</a>`或`<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>`做任何其他包含某个`onclick`属性的事情 - 五年前还可以，但现在可能是一种不好的做法。原因如下：

1.  它促进了强制性 JavaScript 的实践——事实证明，这种做法难以维护且难以扩展。有关此内容的更多信息，请参阅_[Unobtrusive JavaScript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript)_。
    
2.  您花费时间编写极其冗长的代码 - 这对您的代码库几乎没有（如果有的话）好处。
    
3.  现在有更好、更简单、更可维护和可扩展的方法来实现所需的结果。
    

不引人注目的 JavaScript 方式
--------------------

就是根本没有`href`属性！任何好的 CSS 重置都会解决缺少的默认光标样式，因此这不是问题。然后使用优雅且不引人注目的最佳实践附加您的 JavaScript 功能 - 由于您的 JavaScript 逻辑保留在 JavaScript 中而不是标记中，因此更易于维护 - 当您开始开发需要将逻辑拆分为的大规模 JavaScript 应用程序时，这一点至关重要黑盒组件和模板。有关此内容的更多信息，请参阅_[大规模 JavaScript 应用程序架构](http://speakerdeck.com/u/addyosmani/p/large-scale-javascript-application-architecture)_

简单的代码示例
-------

    // Cancel click event
    $('.cancel-action').click(function(){
        alert('Cancel action occurs!');
    });
    
    // Hover shim for Internet Explorer 6 and Internet Explorer 7.
    $(document.body).on('hover','a',function(){
        $(this).toggleClass('hover');
    });

    a { cursor: pointer; color: blue; }
    a:hover,a.hover { text-decoration: underline; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a class="cancel-action">Cancel this action</a>

运行代码片段Hide results

展开片段

黑盒_[Backbone.js](http://documentcloud.github.com/backbone/)_示例
--------------------------------------------------------------

有关可扩展、黑盒化的 Backbone.js 组件示例 -_[请参阅此处的工作 jsfiddle 示例](http://jsfiddle.net/balupton/sTzdD/)_。请注意我们如何利用不显眼的 JavaScript 实践，并在少量代码中拥有一个可以在页面上重复多次的组件，而不会产生副作用或不同组件实例之间发生冲突。惊人的！

笔记
--

*   省略元素`href`上的属性`a`将导致无法使用`tab`按键导航访问该元素。如果您希望通过键访问这些元素`tab`，您可以设置`tabindex`属性，或改用`button`元素。您可以轻松地设置按钮元素的样式，使其看起来像_[Tracker1 的回答](https://stackoverflow.com/a/8525002/130638)_中提到的普通链接。
    
*   省略元素`href`上的属性`a`将导致[Internet Explorer 6](http://en.wikipedia.org/wiki/Internet_Explorer_6)和[Internet Explorer 7](http://en.wikipedia.org/wiki/Internet_Explorer_7)不采用样式`a:hover`，这就是为什么我们添加了一个简单的 JavaScript shim 来完成此操作`a.hover`。这是完全可以的，就好像您没有 href 属性并且没有优雅的降级一样，那么您的链接将无法正常工作 - 并且您将有更大的问题需要担心。
    
*   如果您希望您的操作在禁用 JavaScript 的情况下仍然有效，那么可以使用一个`a`带有属性的元素`href`，该属性会转到某个 URL，该 URL 将手动执行该操作，而不是通过 Ajax 请求或其他任何方式。如果您这样做，那么您需要确保执行`event.preventDefault()`单击调用，以确保单击按钮时它不会跟随链接。此选项称为优雅降级。

`'#'`会将用户带回到页面顶部，所以我通常选择`void(0)`.

`javascript:;`也表现得像`javascript:void(0);`

老实说，我两者都不建议。我会使用一种程式化的方式`<button></button>`来表现这种行为。

    button.link {
      display: inline-block;
      position: relative;
      background-color: transparent;
      cursor: pointer;
      border: 0;
      padding: 0;
      color: #00f;
      text-decoration: underline;
      font: inherit;
    }

    <p>A button that looks like a <button type="button" class="link">link</button>.</p>

运行代码片段Hide results

展开片段

这样你就可以分配你的 onclick。我还建议通过脚本进行绑定，而不是使用`onclick`元素标签上的属性。唯一的问题是旧版 IE 中的伪 3D 文本效果无法禁用。

* * *

如果您_必须_使用 A 元素，请`javascript:void(0);`出于已经提到的原因使用。

*   如果您的 onclick 事件失败，将始终拦截。
*   不会发生错误的加载调用，或基于哈希更改触发其他事件
*   如果点击失败（onclick 抛出），井号标签可能会导致意外行为，请避免这种情况，除非它是适当的失败行为，并且您想要更改导航历史记录。

注意：您可以将 替换`0`为字符串，例如`javascript:void('Delete record 123')`，它可以作为额外的指示符，显示单击实际执行的操作。

前端相关问题