变更集52065

时间戳：

2021年9月11日上午12:34:17(3年前）

作者：

弗利克索斯90

消息：

媒体：优化启发式以排除某些图像和iframe的延迟加载，从而提高性能。

此变更集实现了中概述的优化的延迟加载行为​https://make.wordpress.org/core/2021/07/15/refining-wordpress-cores-lazy-loading-implementation网站/为了改进“最大内容绘制”度量，该度量可以从延迟加载的折叠上方的图像或iframe中看到回归。到目前为止，开发人员可以通过过滤器调整这一点，现在仍然是这样，不过，这种增强为大多数主题带来了更准确的行为。

具体来说，此变更集跳过页面上第一个“内容图像或iframe”的延迟加载。“Content-image or iframe”表示在当前主查询循环中任何帖子的内容中找到的任何图像或iframe，以及此类帖子的任何特色图像。这既适用于“单一”内容，也适用于“存档”内容：在“单一”页面上，帖子的第一个图像/iframe不会延迟加载，而在“存档”页面上查询中_first_post的第一个图片/iframe则不会延迟加载。

这种方法为大多数主题正确地细化了延迟加载行为，这些主题使用单列布局来发布内容。对于具有多列布局的主题wp_omit_loading_attr_threshold上限过滤器可用于更改从延迟加载中跳过多少第一个图像/iframe（默认为1). 例如，使用档案最新帖子的三列网格的主题可以使用过滤器覆盖阈值三在归档页面上，这样前三个内容图像/iframe就不会被延迟加载。

道具亚当·西尔弗斯坦（adamsilverstein）、阿佐兹（azaozz）、弗利克索斯90（flixos90）、海洛夫罗姆托尼亚（hellofromtonya）、乔诺阿尔德森普（jonoaldersonwp）、mte90（mte90）、rviscomi（rviscomi）、。
修复#53675。请参阅#50425.

位置：

大旅行箱

文件夹：

• src/wp-includes/media.php （已修改）(7个差异)
• src/wp-includes/pluggable.php （已修改）(1个差异)
• src/wp-includes/post-thumbnail模板.php （已修改）(1个差异)
• tests/phpunit/tests/media.php （已修改）(3个差异)

trunk/src/wp-includes/media.php

@@ -1047 +1047 @@
 //添加“加载”属性。
 if（wp_lazyloading_enabled（“img”，“wp_get_attachment_image”）{
-$default_attr[正在加载]=“懒惰”;
+$default_attr[正在加载]=wp_get_loading_attr_default（“wp_get附件图像”）;
         }
 
@@ -1821 +1821 @@
     }
 
-foreach（$images作为$image=>$attachment_id）{
-$filtered_image=$image；
-
-//如果适用，添加“宽度”和“高度”属性。
-如果（$attachment_id>0&&false===strpos（$filtered_image，'width='）&&false==strpos（$filtered_image，'height='））{
-$filtered_image=wp_img_tag_add_width_and_height_attr（$filtered _image，$context，$attachment_id）；
-        }
-
-//如果适用，添加“srcset”和“sizes”属性。
-如果（$attachment_id>0&&false===strpos（$filtered_image，'srcset='））{
-$filtered_image=wp_img_tag_add_srcset_and_sizes_attr（$filtered _image，$context，$attachment_id）；
-        }
-
-//如果适用，添加“loading”属性。
-if（$add_img_loading_attr&&false==strpos（$filtered_image，'loading='））{
-$filtered_image=wp_img_tag_add_loading_attr（$filtered图像，$context）；
-        }
-
-if（$filtered_image！==$image）{
-$content=str_replace（$image，$filtered_image，$内容）；
-        }
-    }
-
-foreach（$iframes作为$iframe=>$attachment_id）{
-$filtered_iframe=$iframe；
-
-//如果适用，添加“loading”属性。
-if（$add_iframe_loading_attr&&false===strpos（$filtered_iframe，'loading='））{
-$filtered_iframe=wp_iframe_tag_add_loading_attr（$filtered _ iframe，$context）；
-        }
-
-if（$filtered_iframe！==$iframe）{
-$content=str_replace（$iframe，$filtered_iframe，$content）；
+//按照出现的顺序迭代匹配，因为这与是否延迟加载有关。
+foreach（$matches作为$match）{
+//筛选图像匹配项。
+if（isset（$images[$match[0]]）{
+$filtered_image=$match[0]；
+$attachment_id=$images[$match[0]]；
+
+//添加“width”和“height”属性（如果适用）。
+如果（$attachment_id>0&&false===strpos（$filtered_image，'width='）&&false==strpos（$filtered_image，'height='））{
+$filtered_image=wp_img_tag_add_width_and_height_attr（$filtered _image，$context，$attachment_id）；
+            }
+
+//如果适用，添加“srcset”和“sizes”属性。
+如果（$attachment_id>0&&false===strpos（$filtered_image，'srcset='））{
+$filtered_image=wp_img_tag_add_srcset_and_sizes_attr（$filtered _image，$context，$attachment_id）；
+            }
+
+//如果适用，添加“loading”属性。
+if（$add_img_loading_attr&&false===strpos（$filtered_image，'loading='））{
+$filtered_image=wp_img_tag_add_loading_attr（$filtered图像，$context）；
+            }
+
+if（$filtered_image！==$match[0]）{
+$content=str_replace（$match[0]，$filtered_image，$content）；
+            }
+        }
+
+//筛选iframe匹配项。
+if（isset（$iframes[$match[0]]）{
+$filtered_iframe=$match[0]；
+
+//如果适用，添加“loading”属性。
+if（$add_iframe_loading_attr&&false==strpos（$filtered_iframe，'loading='））{
+$filtered_iframe=wp_iframe_tag_add_loading_attr（$filtered _ iframe，$context）；
+            }
+
+if（$filtered_iframe！==$match[0]）{
+$content=str_replace（$match[0]，$filtered_iframe，$content）；
+            }
         }
     }
@@ -1870 +1876 @@
  */
 函数wp_img_tag_add_loading_attr（$image，$context）{
+//获取要使用的加载属性值。这必须发生在下面的条件检查之前，以便即使图像
+//不符合被延迟加载的条件。
+$value=wp_get_loading_attr_default（$context）；
+
 //图像应该具有要添加的“加载”属性的源属性和维度属性。
 if（false===strpos（$image，'src=“'）||false==strpos{
@@ -1884 +1894 @@
      *
 *@param string | bool$value“加载”属性值。返回错误值将导致
-*为图像省略的属性。默认为“lazy”。
+*图像的属性被省略。
 *@param string$image要筛选的HTML`img`标记。
 *@param string$context关于函数调用方式或img标记所在位置的其他上下文。
      */
-$value=应用过滤器（'wp_img_tag_add_loading_attr'，“懒惰”，$image，$context）；
+$value=应用过滤器（'wp_img_tag_add_loading_attr'，价值$，$image，$context）；
 
 if（$value）{
@@ -1996 +2006 @@
     }
 
+//获取要使用的加载属性值。这必须发生在下面的条件检查之前，以便即使iframe
+//不符合被延迟加载的条件。
+$value=wp_get_loading_attr_default（$context）；
+
 //Iframes应该具有要添加的“loading”属性的源和维度属性。
 if（false===strpos（$iframe，'src=“'）||false==strpos{
@@ -2010 +2024 @@
      *
 *@param string | bool$value“加载”属性值。返回错误值将导致
-*为iframe省略的属性。默认为“lazy”。
+*为iframe省略的属性。
 *@param string$iframe要筛选的HTML“iframe”标记。
 *@param string$context关于函数如何调用或iframe标记所在位置的附加上下文。
      */
-$value=应用过滤器（'wp_iframe_tag_add_loading_attr'，“懒惰”，$iframe，$context）；
+$value=应用过滤器（'wp_iframe_tag_add_loading_attr'，价值$，$iframe，$context）；
 
 if（$value）{
@@ -5178 +5192 @@
 return compact（“宽度”、“高度”、“类型”）；
 }
+
+/**
+*获取用于元素的“loading”属性的默认值。
+ *
+*如果通常启用延迟加载，则只应为标记和上下文调用此函数。
+ *
+*该函数通常返回“lazy”，但使用某些启发来猜测当前元素是否可能
+*出现在折叠上方，在这种情况下，它返回布尔值“false”，这将导致“loading”属性
+*元素上省略。此优化的目的是避免初始值内的延迟加载元素
+*视口，可能会对性能产生负面影响。
+ *
+*在幕后，该函数每次为元素调用时都使用{@see wp_increase_content_media_count（）}
+*在主要内容中。如果元素是第一个内容元素，则将省略“loading”属性。
+*可以使用
+*{@请参阅“wp_omit_loading_attr_threshold”}过滤器。
+ *
+*@自5.9.0起
+ *
+*@param string$context请求“loading”属性值的元素的上下文。
+*@return string | bool默认的“加载”属性值。“lazy”、“eager”或布尔值“false”表示
+*应跳过“加载”属性。
+ */
+函数wp_get_loading_attr_default（$context）{
+//只有具有“the_content”或“the_post_thumbnail”上下文的元素具有特殊处理。
+if（'thecontent'！==$context&&'thepostthumbnail'！==$context）{
+return'lazy'；
+    }
+
+//只有主查询循环中的元素有特殊处理。
+if（is_admin（）||！in_the_loop（）||！is_main_query（））{
+return'lazy'；
+    }
+
+//增加计数器，因为这是主查询内容元素。
+$content_media_count=wp_increase_content_media-count（）；
+
+//如果到目前为止计数低于阈值，则返回“false”，以便省略“loading”属性。
+if（$content_media_count<=wp_omit_loading_attr_threshold（））{
+返回false；
+    }
+
+//对于阈值之后的元素，像往常一样延迟加载。
+return'lazy'；
+}
+
+/**
+*获取不延迟加载的第一个内容媒体元素的数量阈值。
+ *
+*此函数运行{@see'wp_omit_loading_attr_threshold'}过滤器，该过滤器使用默认阈值1。
+*除非使用`$force`参数，否则每次加载页面时过滤器只运行一次。
+ *
+*@自5.9.0起
+ *
+*@param bool$force可选。如果设置为true，则将（重新）应用过滤器，即使之前已经应用过。
+*默认为false。
+*@return int不延迟加载的内容媒体元素数。
+ */
+函数wp_omit_loading_attr_threshold（$force=false）{
+静态$omit_threshold；
+
+//此函数可以多次调用。每次加载页面时只运行一次筛选器。
+if（！isset（$omit_threshold）||$force）{
+        /**
+*过滤不延迟加载的首批内容媒体元素的数量阈值。
+         *
+*对于这些第一个内容媒体元素，将省略“加载”属性。默认情况下是这样的
+*仅针对第一个内容媒体元素。
+         *
+*@自5.9.0起
+         *
+*@param int$omit_threshold不会添加“loading”属性的媒体元素数。默认值1。
+         */
+$omit_threshold=应用过滤器（'wp_omit_loading_attr_threshold'，1）；
+    }
+
+返回$omit_threshold；
+}
+
+/**
+*增加内部内容媒体计数变量。
+ *
+*@自5.9.0起
+*@access私有
+ *
+*@param int$amount可选。要增加的金额。默认为1。
+*@return int增加后的最新内容媒体计数。
+ */
+函数wp_increase_content_media_count（$amount=1）{
+静态$content_media_count=0；
+
+$content_media_count+=$amount；
+
+返回$content_media_count；
+}

主干/src/wp-includes/pluggable.php

@@ -2679 +2679 @@
 
 if（wplazy_loading_enabled（'img'，'get_avatar'））{
-$defaults[加载]=“懒惰”;
+$defaults[正在加载]=wp_get_loading_attr_default（“get_avatar”）;
         }
 

trunk/src/wp-includes/post-thumbnail模板.php

@@ -187 +187 @@
         }
 
+//获取要用作默认值的“loading”属性值，优先于默认值
+//`wp_get_attachment_image（）`。
+$loading=wp_get_loading_attr_default（'the_post_thumbnail'）；
+
+//向给定属性添加默认值，除非它们已经包含“loading”指令。
+if（空（$attr））{
+$attr=数组（“加载”=>$loading）；
+}elseif（is_array（$attr）&&！array_key_exists（“加载”，$attr）{
+$attr['loading']=$loading；
+}elseif（is_string（$attr）&&！preg_match（'/（^|&）loading='，$attr））{
+$attr.='&加载=“$加载；
+        }
+
 $html=wp_get_attachment_image（$post_thumbnail_id，$size，false，$attr）；
 

trunk/tests/phpunit/tests/media.php

@@ -3025 +3025 @@
 *@票号50425
 *@门票53463
+*@门票53675
 *@数据提供程序data_wp_lazy_loading_enabled_context_defaults
      *
@@ -3047 +3048 @@
 “get_avatar=>true”=>数组（“get_avatar”，true），
 “任意上下文=>true”=>数组（“something_completely_assionary”，true），
+'the_post_thumbnail=>true'=>数组（'the_phost_thumbnail'，true），
         );
     }
@@ -3187 +3189 @@
         );
     }
+
+    /**
+*@门票53675
+*@dataProvider数据_wp_get_loading_attr_default
+     *
+*@param字符串$context
+     */
+函数test_wp_get_loading_attr_default（$context）{
+全局$wp_query，$wp_the_query；
+
+//默认返回“lazy”。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（'test'））；
+$this->assertSame（'lazy'，wp_get_loading_attr_default（'wp_get_attachment_image'））；
+
+//如果不在循环或主查询中，则返回“lazy”。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
+
+$wp_query=新wp_query（数组（'post_in'=>数组（self:：$post_ids['publish']））；
+$this->reset_content_media_count（）；
+$this->reset_omit_loading_attr_filter（）；
+
+while（have_posts（））{
+post（）；
+
+//如果在循环中但不在主查询中，则返回“lazy”。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
+
+//设置为主查询。
+$wp_the_query=$wp_query；
+
+//对于主内容以外的上下文，即使在循环中也会返回“lazy”
+//和在主查询中，并且不增加内容媒体计数。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（'wp_get_attachment_image'））；
+
+//如果在循环和主查询中，它是第一个元素，则返回“false”。
+$this->assertFalse（wp_get_loading_attr_default（$context））；
+
+//如果在循环和主查询中，则返回“lazy”以查找任何后续元素。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
+
+//是的，对于所有后续元素。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
+        }
+    }
+
+函数data_wp_get_loading_attr_default（）{
+返回数组(
+数组（'the_content'），
+数组（'the_post_thumbnail'），
+        );
+    }
+
+    /**
+*@门票53675
+     */
+函数test_wp_omit_loading_attr_threshold_filter（）{
+全局$wp_query，$wp_the_query；
+
+$wp_query=新wp_query（数组（'post_in'=>数组（self:：$post_ids['publish']））；
+$wp_the_query=$wp_query；
+$this->reset_content_media_count（）；
+$this->reset_omit_loading_attr_filter（）；
+
+//使用过滤器将不延迟加载的阈值更改为前三个元素。
+添加筛选器(
+“wp_omit_loading_attr_threshold”，
+函数（）{
+返回3；
+            }
+        );
+
+while（have_posts（））{
+post（）；
+
+//由于过滤器的原因，现在不应延迟加载前三个元素，即返回“false”。
+对于（$i=0；$i<3；$i++）{
+$this->assertFalse（wp_get_loading_attr_default（'the_content'））；
+            }
+
+//对于以下元素，请再次延迟加载它们。
+$this->assertSame（'lazy'，wp_get_loading_attr_default（'the_content'））；
+        }
+    }
+
+    /**
+*@票53675
+     */
+函数test_wp_filter_content_tags_with_wp_get_loading_attr_default（）{
+全局$wp_query，$wp_the_query；
+
+$img1=get_image_tag（self:：$large_id，“”，“”；
+$iframe1='<iframe src=“https://www.example.com“width=”640“height=”360“></iframe>'；
+$img2=get_image_tag（自我：：$large_id，“”，“”；
+$img3=get_image_tag（自我：：$large_id，“”，“”、“”，‘缩略图’）；
+$iframe2='<iframe src=“https://wordpress.org“width=”640“height=”360“></iframe>'；
+$lazy_img2=wp_img_tag_add_loading_attr（$img2，'the_content'）；
+$lazy_img3=wp_img_tag_add_loading_attr（$img3，'the_content'）；
+$lazy_iframe2=wp_iframe_tag_add_loading_attr（$iframe2，'the_content'）；
+
+//使用阈值2。
+添加筛选器(
+“wp_omit_loading_attr_threshold”，
+函数（）{
+返回2；
+            }
+        );
+
+//在阈值2之后，前两个内容媒体元素不应延迟加载。
+$content_unfiltered=$img1$如果框架1$图2$图3$iframe2；
+$content_expected=$img1$如果框架1$懒惰_img2$懒惰_img3$lazy_iframe2；
+
+$wp_query=新wp_query（数组（'post_in'=>数组（self:：$post_ids['publish']））；
+$wp_the_query=$wp_query；
+$this->reset_content_media_count（）；
+$this->reset_omit_loading_attr_filter（）；
+
+while（have_posts（））{
+post（）；
+
+添加筛选器（'wp_img_tag_add_srcset_and_sizes_attr'，'__return_false'）；
+$content_filtered=wp_filter_content_tags（$content_unfiltered，'the_content'）；
+删除过滤器（'wp_img_tag_add_srcset_and_sizes_attr'，'__return_false'）；
+        }
+
+//过滤后，第一个图像不应延迟加载，而其他图像应延迟加载。
+$this->assertSame（$content_expected，$content_filtered）；
+    }
+
+    /**
+*@门票53675
+     */
+公共函数test_wp_omit_loading_attr_threshold（）{
+$this->reset_omit_loading_attr_filter（）；
+
+//应用过滤器，确保默认值为1。
+$omit_threshold=wp_omit_loading_attr_threshold（）；
+$this->assertSame（1，$omit_threshold）；
+
+//添加一个将值更改为3的筛选器。但是，在单个
+//默认情况下加载页面，因此该值仍为1。
+添加筛选器(
+“wp_omit_loading_attr_threshold”，
+函数（）{
+返回3；
+            }
+        );
+$omit_threshold=wp_omit_loading_attr_threshold（）；
+$this->assertSame（1，$omit_threshold）；
+
+//只有通过强制执行新检查，才能重新应用筛选器。
+$omit_threshold=wp_omit_loading_attr_thresho尔德（true）；
+$this->assertSame（3，$omit_threshold）；
+    }
+
+私有函数reset_content_media_count（）{
+//获取当前值而不增加。
+$content_media_count=wp_increase_content_media-count（0）；
+
+//将其减少当前值以将其“重置”回0。
+wp_increase_content_media_count（-$content_media-count）；
+    }
+
+私有函数reset_omit_loading_attr_filter（）{
+//添加过滤器以“重置”省略阈值，使其返回空值（未设置）。
+add_filter（'wp_omit_loading_attr_threshold'，'__return_null'，100）；
+
+//强制重新运行筛选器应用程序。
+wp_omit_loading_attr_threshold（真）；
+
+//清洁上述过滤器。
+remove_filter（'wp_omit_loading_attr_threshold'，'__return_null'，100）；
+    }
 }