From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- .../index.html | 132 +++++++++++++++++++++ .../relationship_of_grid_layout/index.html | 70 +++++------ files/ru/web/css/vertical-align/index.html | 18 +-- .../accept-ranges/index.html" | 9 +- .../global_objects/number/toexponential/index.html | 69 +++-------- .../global_objects/number/tofixed/index.html | 60 +--------- .../global_objects/number/toprecision/index.html | 54 +-------- .../global_objects/number/tostring/index.html | 56 +-------- files/ru/web/performance/dns-prefetch/index.html | 2 +- 9 files changed, 214 insertions(+), 256 deletions(-) create mode 100644 files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html (limited to 'files/ru/web') diff --git a/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html new file mode 100644 index 0000000000..93f8f9634e --- /dev/null +++ b/files/ru/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -0,0 +1,132 @@ +--- +title: Browser storage limits and eviction criteria +slug: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +tags: + - IndexedDB + - данных + - клиентская сторона +translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +

Существует целый ряд веб-технологий, которые хранят данные того или иного рода на стороне клиента (то есть на локальном диске). Процесс, с помощью которого браузер решает, сколько места выделить для хранения веб-данных и что удалить, когда этот предел будет достигнут, не прост и отличается между браузерами. В этой статье описывается, как браузеры определяют, какой локальный контент следует очистить и когда, чтобы освободить необходимое локальное пространство для хранения.

+ +
+

Примечание: приведенная ниже информация должна быть достаточно точной для большинства современных браузеров, но специфика браузера вызывается там, где она известна. Opera и Chrome должны вести себя одинаково во всех случаях. Opera Mini (все еще основанная на presto, серверная визуализация) не хранит никаких данных на клиенте.

+
+ +

Какие технологии используют браузерные хранилища данных?

+ +

В Firefox следующие технологии используют хранилище данных браузера для хранения данных, когда это необходимо. В этом контексте мы называем их "квотными клиентами": 

+ + + +
+

Примечание: В Firefox веб-хранилище скоро начнет использовать те же инструменты управления хранилищем, что и в этом документе.

+
+ +
+

Примечание: в режиме приватного просмотра большинство хранилищ данных не поддерживается. Данные локального хранилища и файлы cookie все еще хранятся, но они эфемерны — данные удаляются, когда вы закрываете последнее окно приватного просмотра.

+
+ +

The "last access time" of origins is updated when any of these are activated/deactivated — origin eviction will delete data for all these quota clients.

+ +

In Chrome/Opera, the Quota Management API handles quota management for AppCache, IndexedDB, WebSQL, and File System API.

+ +

Different types of data storage

+ +

Even in the same browser, using the same storage method, there are different classes of data storage to understand. This section discusses the different ones you might find in different browsers.

+ +

Storage comes in two types:

+ + + +

In Firefox, when persistent storage is used, the user is given a UI popup to alert them that this data will persist, and asks if they are happy with that. Temporary data storage does not elicit any user prompts.

+ +

Storage is temporary by default; developers can choose to use persistent storage for their sites using the {{domxref("StorageManager.persist()")}} method available in the Storage API.

+ +

Where is the data stored?

+ +

Each storage type represents a separate repository. Here's the actual mapping to directories under a user's Firefox profile (other browsers may differ slightly):

+ + + +
+
+

Note: After introducing Storage API, the "permanent" folder can be considered obsolete; the "permanent" folder only stores IndexedDB persistent-type databases. It doesn't matter if box mode is "best-effort" or "persistent" — data is stored under <profile>/storage/default.

+
+
+ +
+

Note: In Firefox, you can find your profile folder by entering about:support in the URL bar, and pressing the Show in... button (e.g., Show in Finder on Mac OS X) next to the Profile Folder title.

+
+ +
+

Note: If you are looking around in your Profile at the data stored, you might see a fourth folder: persistent. Basically, the persistent folder was renamed to permanent a while ago to keep upgrades/migration simpler.

+
+ +
+

Note: Users shouldn’t add their own directories or files under <profile>/storage. This will cause storage initialization to fail; for example, {{domxref("IDBFactory.open()", "open()")}} will fire an error event.

+
+ +

Storage limits

+ +

The maximum browser storage space is dynamic — it is based on your hard drive size. The global limit is calculated as 50% of free disk space. In Firefox, an internal browser tool called the Quota Manager keeps track of how much disk space each origin is using up, and deletes data if necessary.

+ +

So if your hard drive is 500 GB, then the total storage for a browser is 250 GB. If this is exceeded, a process called origin eviction comes into play, deleting an entire origin's worth of data until the storage amount goes under the limit again. There is no trimming effect put in place to delete parts of origins — deleting one database of an origin could cause problems with inconsistency.

+ +

There's also another limit called group limit — this is defined as 20% of the global limit, but it has a minimum of 10 MB and a maximum of 2 GB. Each origin is part of a group (group of origins). There's one group for each eTLD+1 domain. For example:

+ + + +

In this group, mozilla.org, www.mozilla.org, and joe.blogs.mozilla.org can aggregately use a maximum of 20% of the global limit. firefox.com has a separate maximum of 20%.

+ +

The two limits react differently to limits being reached:

+ + + +
+

Note: The group limit can't be more than the global limit, despite the minimum group limit mentioned above. If you had a really low memory situation where the global limit was, say, 8 MB, then the group limit would also be 8 MB.

+
+ +
+

Note: If the group limit is exceeded, or if origin eviction couldn't free enough space, the browser will throw a QuotaExceededError.

+
+ +
+

Note: In Chrome the soft and hard storage quota limits has changed since M66. More information can be found here.

+
+ +

LRU policy

+ +

When the available disk space is filled up, the quota manager will start clearing out data based on an LRU policy — the least recently used origin will be deleted first, then the next one, until the browser is no longer over the limit.

+ +

We track the "last access time" for each origin using temporary storage. Once the global limit for temporary storage is reached (more on the limit later), we try to find all currently unused origins (i.e., ones with no tabs/apps open that are keeping open datastores). These are then sorted according to "last access time." The least recently used origins are then deleted until there's enough space to fulfill the request that triggered this origin eviction.

+ +

See also

+ + diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 1278783254..e49f1183b8 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
-
<div class="wrapper">
+
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
@@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: flex;
    flex-wrap: wrap;
 }
@@ -65,13 +65,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 
Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.

 
-
Те же яйца, вид в профиль: тот же макет, но с CSS гридами

+
Тот же макет, но с CSS гридами

 
-
В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в 1fr . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. 

+
В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в 1fr . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. 

 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
@@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
 }
@@ -107,11 +107,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

 

 
-
Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:

+
Если Вы колеблетесь, что выбрать - flexbox или grid, задайте себе простой вопрос:

 
 
    
- 
  • мне нужно управлять размещением элементов в строке или в колонке - окей, нужен flexbox
    • 
- 
  • мне нужно управлять размещением элементов и в строке, и в колонке – окей, нужен грид
    • 
+ 
  • нужно управлять размещением элементов в строке или в колонке - используем flexbox
    • 
+ 
  • нужно управлять размещением элементов в строке и в колонке – используем grid
    • 
 

 
 
Что важнее: контент или макет?

@@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение flex-end , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для box1  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для box2 свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
@@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо flex-start и flex-end мы задаем start и end . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: end;
@@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
В примере ниже мы используем ключевое слово auto-fill вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
 }
@@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя auto-fill и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью minmax. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим 1fr. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум 1fr как инструкцию распределить оставшееся свободное пространство между этими блоками.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
@@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера position: relative , поэтому он становится контекстом позиционирования для нашего третьего элемента.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">
@@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 200px;
@@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
Задаем .box3 свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.

 
 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three
@@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 200px;
@@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div class="box box1">
        <div class="nested">a</div>
        <div class="nested">b</div>
@@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
@@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 

 
 
-
<div class="wrapper">
+
<div class="wrapper">
    <div class="box box1">
        <div class="nested">a</div>
        <div class="nested">b</div>
@@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 

 
-
.wrapper {
+
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
index c7e311b39a..45662b41ce 100644
--- a/files/ru/web/css/vertical-align/index.html
+++ b/files/ru/web/css/vertical-align/index.html
@@ -5,9 +5,9 @@ translation_of: Web/CSS/vertical-align
 ---
 
{{CSSRef}}

 
-
Свойство CSS  vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).

+
Свойство CSS  vertical-align описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).

 
-
/* ключевые значения */
+
/* ключевые значения */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -37,7 +37,7 @@ vertical-align: unset;
 
 
 

-