Skip to content

Commit fbc985c

Browse files
yangshunclaude
andcommitted
Normalize MDX formatting via vp fmt
Renormalize markdown style across translated questions: horizontal rules `***` -> `---` and unordered list bullets `*` -> `-`. Pure whitespace/syntax change, no content edits. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent a8b37c7 commit fbc985c

197 files changed

Lines changed: 1725 additions & 1736 deletions

File tree

  • questions
    • can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions
    • describe-event-bubbling
    • describe-event-capturing
    • describe-the-difference-between-script-async-and-script-defer
    • difference-between-document-load-event-and-document-domcontentloaded-event
    • difference-between-function-person-var-person-person-and-var-person-new-person
    • explain-ajax-in-as-much-detail-as-possible
    • explain-event-delegation
    • explain-function-prototype-bind
    • explain-hoisting
    • explain-how-jsonp-works-and-how-its-not-really-ajax
    • explain-how-prototypal-inheritance-works
    • explain-how-this-works-in-javascript
    • explain-the-concept-of-a-callback-function-in-asynchronous-operations
    • explain-the-concept-of-a-microtask-queue
    • explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance
    • explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality
    • explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security
    • explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques
    • explain-the-concept-of-debouncing-and-throttling
    • explain-the-concept-of-destructuring-assignment-for-objects-and-arrays
    • explain-the-concept-of-error-propagation-in-javascript
    • explain-the-concept-of-hoisting-with-regards-to-functions
    • explain-the-concept-of-inheritance-in-es2015-classes
    • explain-the-concept-of-input-validation-and-its-importance-in-security
    • explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance
    • explain-the-concept-of-lexical-scoping
    • explain-the-concept-of-partial-application
    • explain-the-concept-of-scope-in-javascript
    • explain-the-concept-of-tagged-templates
    • explain-the-concept-of-test-driven-development-tdd
    • explain-the-concept-of-the-prototype-pattern
    • explain-the-concept-of-the-singleton-pattern
    • explain-the-concept-of-the-spread-operator-and-its-uses
    • explain-the-concept-of-the-strategy-pattern
    • explain-the-concept-of-the-web-socket-api
    • explain-the-concept-of-this-binding-in-event-handlers
    • explain-the-concept-of-tree-shaking-in-module-bundling
    • explain-the-difference-between-classical-inheritance-and-prototypal-inheritance
    • explain-the-difference-between-documentqueryselector-and-documentgetelementbyid
    • explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties
    • explain-the-difference-between-global-scope-function-scope-and-block-scope
    • explain-the-difference-between-mutable-and-immutable-objects
    • explain-the-difference-between-shallow-copy-and-deep-copy
    • explain-the-difference-between-synchronous-and-asynchronous-functions
    • explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing
    • explain-the-difference-in-hoisting-between-var-let-and-const
    • explain-the-differences-between-commonjs-modules-and-es-modules
    • explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function
    • explain-the-different-states-of-a-promise
    • explain-the-different-ways-the-this-keyword-can-be-bound
    • explain-the-event-phases-in-a-browser
    • explain-the-observer-pattern-and-its-use-cases
    • explain-the-same-origin-policy-with-regards-to-javascript
    • explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly
    • explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife
    • how-can-closures-be-used-to-create-private-variables
    • how-can-you-create-custom-error-objects
    • how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications
    • how-can-you-optimize-dom-manipulation-for-better-performance
    • how-can-you-optimize-network-requests-for-better-performance
    • how-can-you-prevent-clickjacking-attacks
    • how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications
    • how-can-you-share-code-between-files
    • how-can-you-test-asynchronous-code-in-javascript
    • how-do-currying-and-partial-application-differ-from-each-other
    • how-do-iframe-on-a-page-communicate
    • how-do-sets-and-maps-handle-equality-checks-for-objects
    • how-do-you-abort-a-web-request-using-abortcontrollers
    • how-do-you-access-the-index-of-an-element-in-an-array-during-iteration
    • how-do-you-add-remove-and-modify-html-elements-using-javascript
    • how-do-you-add-remove-and-update-elements-in-an-array
    • how-do-you-check-if-an-object-has-a-specific-property
    • how-do-you-check-the-data-type-of-a-variable
    • how-do-you-convert-a-set-to-an-array-in-javascript
    • how-do-you-convert-a-string-to-a-number-in-javascript
    • how-do-you-create-a-constructor-function
    • how-do-you-detect-if-javascript-is-disabled-on-a-page
    • how-do-you-get-the-query-string-values-of-the-current-page-in-javascript
    • how-do-you-handle-errors-in-asynchronous-operations
    • how-do-you-handle-errors-using-trycatch-blocks
    • how-do-you-import-and-export-modules-in-javascript
    • how-do-you-make-an-http-request-using-the-fetch-api
    • how-do-you-manipulate-css-styles-using-javascript
    • how-do-you-organize-your-code-module-pattern-classical-inheritance
    • how-do-you-prevent-the-default-behavior-of-an-event
    • how-do-you-redirect-to-a-new-page-in-javascript
    • how-do-you-reliably-determine-whether-an-object-is-empty
    • how-do-you-use-windowhistory-api
    • how-do-you-validate-form-elements-using-the-constraint-validation-api
    • how-do-you-write-unit-tests-for-javascript-code
    • how-does-hoisting-affect-function-declarations-and-expressions
    • how-does-javascript-garbage-collection-work
    • how-is-promiseall-different-from-promiseallsettled
    • provide-some-examples-of-how-currying-and-partial-application-can-be-used
    • what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor
    • what-are-callback-functions-and-how-are-they-used
    • what-are-default-parameters-and-how-are-they-used
    • what-are-design-patterns-and-why-are-they-useful
    • what-are-event-listeners-and-how-are-they-used
    • what-are-iterators-and-generators-and-what-are-they-used-for
    • what-are-javascript-object-getters-and-setters-for
    • what-are-javascript-object-property-flags-and-descriptors
    • what-are-javascript-polyfills-for
    • what-are-mocks-and-stubs-and-how-are-they-used-in-testing
    • what-are-modules-and-why-are-they-useful
    • what-are-progressive-web-applications-pwas
    • what-are-promises-and-how-do-they-work
    • what-are-proxies-in-javascript-used-for
    • what-are-rest-parameters-and-how-are-they-used
    • what-are-server-sent-events
    • what-are-sets-and-maps-and-how-are-they-used
    • what-are-some-best-practices-for-handling-sensitive-data-in-javascript
    • what-are-some-best-practices-for-writing-maintainable-and-effective-tests
    • what-are-some-common-performance-bottlenecks-in-javascript-applications
    • what-are-some-common-security-headers-and-their-purpose
    • what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript
    • what-are-some-techniques-for-reducing-reflows-and-repaints
    • what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code
    • what-are-some-tools-that-can-be-used-for-javascript-testing
    • what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance
    • what-are-symbols-used-for
    • what-are-template-literals-and-how-are-they-used
    • what-are-the-advantages-and-disadvantages-of-using-ajax
    • what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects
    • what-are-the-benefits-of-using-a-module-bundler
    • what-are-the-benefits-of-using-currying-and-partial-application
    • what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax
    • what-are-the-common-pitfalls-of-using-the-this-keyword
    • what-are-the-differences-between-es6-class-and-es5-function-constructors
    • what-are-the-differences-between-map-set-and-weakmap-weakset
    • what-are-the-differences-between-variables-created-using-let-var-or-const
    • what-are-the-differences-between-xmlhttprequest-and-fetch
    • what-are-the-different-methods-for-iterating-over-an-array
    • what-are-the-different-types-of-errors-in-javascript
    • what-are-the-different-types-of-testing-in-software-development
    • what-are-the-different-ways-to-copy-an-object-or-an-array
    • what-are-the-different-ways-to-make-an-api-call-in-javascript
    • what-are-the-metadata-fields-of-a-module
    • what-are-the-potential-issues-caused-by-hoisting
    • what-are-the-potential-pitfalls-of-using-closures
    • what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks
    • what-are-the-various-data-types-in-javascript
    • what-are-the-various-ways-to-create-objects-in-javascript
    • what-are-web-workers-and-how-can-they-be-used-to-improve-performance
    • what-are-workers-in-javascript-used-for
    • what-do-you-think-of-amd-vs-commonjs
    • what-is-a-closure-and-how-why-would-you-use-one
    • what-is-asyncawait-and-how-does-it-simplify-asynchronous-code
    • what-is-cross-site-scripting-xss-and-how-can-you-prevent-it
    • what-is-currying-and-how-does-it-work
    • what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue
    • what-is-objectfreeze-for
    • what-is-objectpreventextensions-for
    • what-is-objectseal-for
    • what-is-recursion-and-how-is-it-used-in-javascript
    • what-is-the-command-pattern-and-how-is-it-used
    • what-is-the-decorator-pattern-and-how-is-it-used
    • what-is-the-definition-of-a-higher-order-function
    • what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript
    • what-is-the-difference-between-a-parameter-and-an-argument
    • what-is-the-difference-between-double-equal-and-triple-equal
    • what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation
    • what-is-the-difference-between-innerhtml-and-textcontent
    • what-is-the-difference-between-mouseenter-and-mouseover-event
    • what-is-the-difference-between-settimeout-setimmediate-and-processnexttick
    • what-is-the-difference-between-the-window-object-and-the-document-object
    • what-is-the-dom-and-how-is-it-structured
    • what-is-the-factory-pattern-and-how-is-it-used
    • what-is-the-intl-namespace-object-for
    • what-is-the-module-pattern-and-how-does-it-help-with-encapsulation
    • what-is-the-prototype-chain-and-how-does-it-work
    • what-is-the-purpose-of-the-break-and-continue-statements
    • what-is-the-purpose-of-the-finally-block
    • what-is-the-purpose-of-the-new-keyword
    • what-is-the-purpose-of-the-switch-statement
    • what-is-the-spread-operator-and-how-is-it-used
    • what-is-the-ternary-operator-and-how-is-it-used
    • what-is-the-use-of-promiseall
    • what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it
    • what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items
    • what-tools-and-techniques-do-you-use-for-debugging-javascript-code
    • whats-a-typical-use-case-for-anonymous-functions
    • whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states
    • whats-the-difference-between-an-attribute-and-a-property
    • whats-the-difference-between-call-and-apply
    • when-would-you-use-document-write
    • why-is-extending-built-in-javascript-objects-not-a-good-idea
    • why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it
    • why-you-might-want-to-create-static-class-members

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const doubled = numbers.map((n) => n * 2);
1313
console.log(doubled); // [2, 4, 6]
1414
```
1515

16-
***
16+
---
1717

1818
## 新箭头 => 函数语法的用例
1919

@@ -97,6 +97,6 @@ myButton.button.click(); // count: 2
9797

9898
## 延伸阅读
9999

100-
* [MDN Web Docs: Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
101-
* [JavaScript.info: Arrow functions revisited](https://javascript.info/arrow-functions)
102-
* [Eloquent JavaScript: Functions](https://eloquentjavascript.net/03_functions.html)
100+
- [MDN Web Docs: Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
101+
- [JavaScript.info: Arrow functions revisited](https://javascript.info/arrow-functions)
102+
- [Eloquent JavaScript: Functions](https://eloquentjavascript.net/03_functions.html)

questions/describe-event-bubbling/zh-CN.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ title: 描述 JavaScript 和浏览器的事件冒泡
88

99
事件冒泡对于事件委托至关重要,其中单个事件处理程序管理多个子元素的事件,从而提高性能和代码简洁性。虽然方便,但未能正确管理事件传播可能导致意外行为,例如多个处理程序为单个事件触发。
1010

11-
***
11+
---
1212

1313
## 什么是事件冒泡?
1414

@@ -97,15 +97,15 @@ parent.addEventListener('click', (event) => {
9797

9898
## 优点
9999

100-
* **更简洁的代码:** 减少事件监听器的数量,提高代码可读性和可维护性。
101-
* **高效的事件处理:** 通过附加更少的监听器,最大限度地减少性能开销。
102-
* **灵活性:** 允许处理子元素上发生的事件,而无需直接将监听器附加到它们。
100+
- **更简洁的代码:** 减少事件监听器的数量,提高代码可读性和可维护性。
101+
- **高效的事件处理:** 通过附加更少的监听器,最大限度地减少性能开销。
102+
- **灵活性:** 允许处理子元素上发生的事件,而无需直接将监听器附加到它们。
103103

104104
## 陷阱
105105

106-
* **意外的事件处理:** 请注意,父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
107-
* **事件顺序:** 事件以特定顺序冒泡。如果多个父元素有事件监听器,它们的执行顺序取决于 DOM 层次结构。
108-
* **过度委托:** 虽然将事件委托给公共祖先是有效的,但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
106+
- **意外的事件处理:** 请注意,父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
107+
- **事件顺序:** 事件以特定顺序冒泡。如果多个父元素有事件监听器,它们的执行顺序取决于 DOM 层次结构。
108+
- **过度委托:** 虽然将事件委托给公共祖先是有效的,但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
109109

110110
## 用例
111111

@@ -217,6 +217,6 @@ function handleAccordionClick(event) {
217217

218218
## 延伸阅读
219219

220-
* [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
221-
* [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
222-
* [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
220+
- [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
221+
- [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
222+
- [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

questions/describe-event-capturing/zh-CN.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ title: 描述 JavaScript 和浏览器中的事件捕获
88

99
与事件冒泡相比,事件捕获很少使用,但它可用于特定场景,例如需要在事件到达目标元素之前拦截更高级别的事件。默认情况下,它是禁用的,但可以通过 `addEventListener()` 上的一个选项来启用。
1010

11-
***
11+
---
1212

1313
## 什么是事件捕获?
1414

1515
事件捕获是 DOM(文档对象模型)中的一种传播机制,其中事件(例如单击或键盘事件)首先在文档的根处触发,然后通过 DOM 树向下流向目标元素。
1616

1717
捕获的优先级高于冒泡,这意味着捕获事件处理程序在冒泡事件处理程序之前执行,如事件传播的各个阶段所示:
1818

19-
* **捕获阶段**:事件向下移动到目标元素
20-
* **目标阶段**:事件到达目标元素
21-
* **冒泡阶段**:事件从目标元素冒泡
19+
- **捕获阶段**:事件向下移动到目标元素
20+
- **目标阶段**:事件到达目标元素
21+
- **冒泡阶段**:事件从目标元素冒泡
2222

2323
请注意,默认情况下禁用事件捕获。要启用它,您必须将捕获选项传递到 `addEventListener()`
2424

@@ -85,12 +85,12 @@ child.addEventListener('click', () => {
8585

8686
与事件冒泡相比,事件捕获很少使用,但它可以在特定情况下使用,例如需要在事件到达目标元素之前在高层拦截事件。
8787

88-
* **阻止事件冒泡:** 想象一下,您有一个嵌套元素(如按钮)位于容器元素内。单击该按钮也可能触发容器上的单击事件。通过在容器的事件侦听器上启用事件捕获,您可以在那里捕获单击事件,并阻止其向下传播到按钮,从而可能导致意外行为。
89-
* **自定义下拉菜单:** 在构建自定义下拉菜单时,您可能希望捕获菜单元素之外的点击以关闭菜单。在 `document` 对象上使用 `capture: true` 允许您侦听页面上的任何位置的点击,并在点击发生在菜单边界之外时关闭菜单。
90-
* **在某些情况下提高效率:** 在某些情况下,事件捕获可能比依赖冒泡更有效。这是因为事件不需要在到达处理程序之前通过所有子元素传播。但是,对于大多数 Web 应用程序来说,性能差异通常可以忽略不计。
88+
- **阻止事件冒泡:** 想象一下,您有一个嵌套元素(如按钮)位于容器元素内。单击该按钮也可能触发容器上的单击事件。通过在容器的事件侦听器上启用事件捕获,您可以在那里捕获单击事件,并阻止其向下传播到按钮,从而可能导致意外行为。
89+
- **自定义下拉菜单:** 在构建自定义下拉菜单时,您可能希望捕获菜单元素之外的点击以关闭菜单。在 `document` 对象上使用 `capture: true` 允许您侦听页面上的任何位置的点击,并在点击发生在菜单边界之外时关闭菜单。
90+
- **在某些情况下提高效率:** 在某些情况下,事件捕获可能比依赖冒泡更有效。这是因为事件不需要在到达处理程序之前通过所有子元素传播。但是,对于大多数 Web 应用程序来说,性能差异通常可以忽略不计。
9191

9292
## 延伸阅读
9393

94-
* [事件捕获 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#event_capture)
95-
* [冒泡和捕获 | JavaScript.info](https://zh.javascript.info/bubbling-and-capturing)
96-
* [W3C DOM Level 3 事件规范](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
94+
- [事件捕获 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#event_capture)
95+
- [冒泡和捕获 | JavaScript.info](https://zh.javascript.info/bubbling-and-capturing)
96+
- [W3C DOM Level 3 事件规范](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ title: 描述浏览器中 cookie、`sessionStorage` 和 `localStorage` 之间的
66

77
以下都是在客户端(本例中为用户的浏览器)上存储数据的机制。`localStorage``sessionStorage` 都实现了 [Web Storage API 接口](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)
88

9-
* **Cookies**:适用于服务器-客户端通信,存储容量小,可以是持久性的或基于会话的,特定于域。在每次请求时发送到服务器。
10-
* **`localStorage`**:适用于长期存储,即使在浏览器关闭后数据仍然存在,可在同一来源的所有选项卡和窗口中访问,在三者中存储容量最高。
11-
* **`sessionStorage`**:适用于单个页面会话中的临时数据,当选项卡或窗口关闭时数据将被清除,与 cookies 相比具有更高的存储容量。
9+
- **Cookies**:适用于服务器-客户端通信,存储容量小,可以是持久性的或基于会话的,特定于域。在每次请求时发送到服务器。
10+
- **`localStorage`**:适用于长期存储,即使在浏览器关闭后数据仍然存在,可在同一来源的所有选项卡和窗口中访问,在三者中存储容量最高。
11+
- **`sessionStorage`**:适用于单个页面会话中的临时数据,当选项卡或窗口关闭时数据将被清除,与 cookies 相比具有更高的存储容量。
1212

1313
以下表格总结了 3 种客户端存储机制。
1414

@@ -22,17 +22,17 @@ title: 描述浏览器中 cookie、`sessionStorage` 和 `localStorage` 之间的
2222
| 访问 | 跨窗口/选项卡 | 跨窗口/选项卡 | 相同选项卡 |
2323
| 安全性 | JavaScript 无法访问 `HttpOnly` cookies |||
2424

25-
***
25+
---
2626

2727
## Web 上的存储
2828

2929
Cookies、`localStorage``sessionStorage` 都是客户端(Web 浏览器)上的存储机制。在客户端存储数据对于仅客户端的状态很有用,例如访问令牌、主题、个性化布局,以便用户可以在跨选项卡和使用会话的网站上获得一致的体验。
3030

3131
这些客户端存储机制具有以下常见属性:
3232

33-
* 这意味着客户端可以读取和修改值(`HttpOnly` cookies 除外)。
34-
* 基于键值对的存储。
35-
* 它们只能将值存储为字符串。非字符串必须被序列化为字符串(例如 `JSON.stringify()`)才能被存储。
33+
- 这意味着客户端可以读取和修改值(`HttpOnly` cookies 除外)。
34+
- 基于键值对的存储。
35+
- 它们只能将值存储为字符串。非字符串必须被序列化为字符串(例如 `JSON.stringify()`)才能被存储。
3636

3737
### 每种存储机制的用例
3838

@@ -50,10 +50,10 @@ Cookies、`localStorage` 和 `sessionStorage` 都是客户端(Web 浏览器)
5050

5151
Cookies 用于在客户端存储小块数据,这些数据可以通过每个 HTTP 请求发送回服务器。
5252

53-
* **存储容量**:所有 cookies 限制在 4KB 左右。
54-
* **寿命**:Cookies 可以使用 `Expires``Max-Age` 属性设置特定的过期日期。如果未设置过期日期,则在浏览器关闭时删除 cookie(会话 cookie)。
55-
* **访问**:Cookies 是特定于域的,可以在同一域内的不同页面和子域之间共享。
56-
* **安全性**:Cookies 可以标记为 `HttpOnly` 以防止从 JavaScript 访问,从而降低 XSS 攻击的风险。它们也可以使用 `Secure` 标志进行保护,以确保仅在使用 HTTPS 时发送它们。
53+
- **存储容量**:所有 cookies 限制在 4KB 左右。
54+
- **寿命**:Cookies 可以使用 `Expires``Max-Age` 属性设置特定的过期日期。如果未设置过期日期,则在浏览器关闭时删除 cookie(会话 cookie)。
55+
- **访问**:Cookies 是特定于域的,可以在同一域内的不同页面和子域之间共享。
56+
- **安全性**:Cookies 可以标记为 `HttpOnly` 以防止从 JavaScript 访问,从而降低 XSS 攻击的风险。它们也可以使用 `Secure` 标志进行保护,以确保仅在使用 HTTPS 时发送它们。
5757

5858
```js
5959
// Set a cookie for the name/key `auth_token` with an expiry.
@@ -95,10 +95,10 @@ CookieStore API 相对较新,可能并非所有浏览器都支持(截至 202
9595

9696
`localStorage` 用于存储即使在浏览器关闭并重新打开后仍保留的数据。它专为长期存储数据而设计。
9797

98-
* **存储容量**:通常每个来源约 5MB(因浏览器而异)。
99-
* **生命周期**`localStorage` 中的数据会一直存在,直到用户或应用程序显式删除。
100-
* **访问**:数据可在同一来源的所有选项卡和窗口中访问。
101-
* **安全性**:页面上的所有 JavaScript 都可以访问 `localStorage` 中的值。
98+
- **存储容量**:通常每个来源约 5MB(因浏览器而异)。
99+
- **生命周期**`localStorage` 中的数据会一直存在,直到用户或应用程序显式删除。
100+
- **访问**:数据可在同一来源的所有选项卡和窗口中访问。
101+
- **安全性**:页面上的所有 JavaScript 都可以访问 `localStorage` 中的值。
102102

103103
```js
104104
// Set a value in localStorage.
@@ -118,10 +118,10 @@ localStorage.clear();
118118

119119
`sessionStorage` 用于存储页面会话期间的数据。它专为临时存储数据而设计。
120120

121-
* **存储容量**: 通常每个来源约 5MB(取决于浏览器)。
122-
* **生命周期**: `sessionStorage` 中的数据在页面会话结束时清除(即,当浏览器或选项卡关闭时)。重新加载页面不会销毁 `sessionStorage` 中的数据。
123-
* **访问**: 数据仅在当前选项卡(或浏览上下文)中可访问。不同的选项卡共享不同的 `sessionStorage` 对象,即使它们属于同一个浏览器窗口。在这种情况下,窗口指的是可以包含多个选项卡的浏览器窗口。
124-
* **安全性**: 同一页面上的所有 JavaScript 都可以访问该页面 `sessionStorage` 中的值。
121+
- **存储容量**: 通常每个来源约 5MB(取决于浏览器)。
122+
- **生命周期**: `sessionStorage` 中的数据在页面会话结束时清除(即,当浏览器或选项卡关闭时)。重新加载页面不会销毁 `sessionStorage` 中的数据。
123+
- **访问**: 数据仅在当前选项卡(或浏览上下文)中可访问。不同的选项卡共享不同的 `sessionStorage` 对象,即使它们属于同一个浏览器窗口。在这种情况下,窗口指的是可以包含多个选项卡的浏览器窗口。
124+
- **安全性**: 同一页面上的所有 JavaScript 都可以访问该页面 `sessionStorage` 中的值。
125125

126126
```js
127127
// Set a value in sessionStorage.
@@ -143,4 +143,4 @@ sessionStorage.clear();
143143

144144
## 参考
145145

146-
* [localStorage、sessionStorage、session 和 cookie 之间有什么区别?](https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies)
146+
- [localStorage、sessionStorage、session 和 cookie 之间有什么区别?](https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies)

questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ title: 描述 `<script>`、`<script async>` 和 `<script defer>` 之间的区别
66

77
所有这些方式(`<script>``<script async>``<script defer>`)都用于在 HTML 文档中加载和执行 JavaScript 文件,但它们在浏览器处理脚本的加载和执行方式上有所不同:
88

9-
* `<script>` 是包含 JavaScript 的默认方式。浏览器在下载和执行脚本时会阻止 HTML 解析。在脚本执行完毕之前,浏览器不会继续渲染页面。
10-
* `<script async>` 异步下载脚本,与解析 HTML 并行。在脚本可用后立即执行脚本,可能会中断 HTML 解析。`<script async>` 之间不会互相等待,并且以不特定的顺序执行。
11-
* `<script defer>` 异步下载脚本,与解析 HTML 并行。但是,脚本的执行被推迟到 HTML 解析完成后,按照它们在 HTML 中出现的顺序。
9+
- `<script>` 是包含 JavaScript 的默认方式。浏览器在下载和执行脚本时会阻止 HTML 解析。在脚本执行完毕之前,浏览器不会继续渲染页面。
10+
- `<script async>` 异步下载脚本,与解析 HTML 并行。在脚本可用后立即执行脚本,可能会中断 HTML 解析。`<script async>` 之间不会互相等待,并且以不特定的顺序执行。
11+
- `<script defer>` 异步下载脚本,与解析 HTML 并行。但是,脚本的执行被推迟到 HTML 解析完成后,按照它们在 HTML 中出现的顺序。
1212

1313
这是一个表格,总结了在 HTML 文档中加载 `<script>` 的 3 种方式。
1414

15-
| 特性 | `<script>` | `<script async>` | `<script defer>` |
16-
| --- | --- | --- | --- |
17-
| 解析行为 | 阻止 HTML 解析 | 与解析并行运行 | 与解析并行运行 |
18-
| 执行顺序 | 按照出现顺序 | 不保证 | 按照出现顺序 |
19-
| DOM 依赖 ||| 是(等待 DOM) |
15+
| 特性 | `<script>` | `<script async>` | `<script defer>` |
16+
| -------- | -------------- | ---------------- | ---------------- |
17+
| 解析行为 | 阻止 HTML 解析 | 与解析并行运行 | 与解析并行运行 |
18+
| 执行顺序 | 按照出现顺序 | 不保证 | 按照出现顺序 |
19+
| DOM 依赖 | | | 是(等待 DOM) |
2020

21-
***
21+
---
2222

2323
## `<script>` 标签的用途
2424

@@ -108,14 +108,14 @@ title: 描述 `<script>`、`<script async>` 和 `<script defer>` 之间的区别
108108

109109
## 注意事项
110110

111-
* `async` 属性应用于对页面初始渲染不关键且彼此不依赖的脚本,而 `defer` 属性应用于依赖于/被另一个脚本依赖的脚本。
112-
* 对于没有 `src` 属性的脚本,将忽略 `async``defer` 属性。
113-
* 包含 `document.write()` 的带有 `defer``async``<script>` 将被忽略,并显示类似“从异步加载的外部脚本对 `document.write()` 的调用被忽略”的消息。
114-
* 即使 `async``defer` 有助于使脚本下载异步,但脚本最终仍在主线程上执行。如果这些脚本是计算密集型的,则可能导致 UI 滞后/冻结。[Partytown](https://partytown.builder.io/) 是一个库,它有助于将脚本执行重新定位到 [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 并从 [主线程](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread) 中移出,这对于您无法控制代码的第三方脚本非常有用。
111+
- `async` 属性应用于对页面初始渲染不关键且彼此不依赖的脚本,而 `defer` 属性应用于依赖于/被另一个脚本依赖的脚本。
112+
- 对于没有 `src` 属性的脚本,将忽略 `async``defer` 属性。
113+
- 包含 `document.write()` 的带有 `defer``async``<script>` 将被忽略,并显示类似“从异步加载的外部脚本对 `document.write()` 的调用被忽略”的消息。
114+
- 即使 `async``defer` 有助于使脚本下载异步,但脚本最终仍在主线程上执行。如果这些脚本是计算密集型的,则可能导致 UI 滞后/冻结。[Partytown](https://partytown.builder.io/) 是一个库,它有助于将脚本执行重新定位到 [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 并从 [主线程](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread) 中移出,这对于您无法控制代码的第三方脚本非常有用。
115115

116116
{/* TODO: Add image https://media.licdn.com/dms/image/D5612AQEYCnsZ1f9GFQ/article-cover_image-shrink_600_2000/0/1699370054733?e=2147483647&v=beta&t=MeKuUXk5QMblVoausf5p3swTkBCICOHoRsijQqMfxZE */}
117117

118118
## 延伸阅读
119119

120-
* [`<script>`: The Script element | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
121-
* [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
120+
- [`<script>`: The Script element | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
121+
- [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)

0 commit comments

Comments
 (0)