惰性匹配_基于元素存在的惰性负载资源

小灰灰 2023-02-22 03:48 23阅读 0赞

惰性匹配

Fans of AMD JavaScript will probably tell you that they love loading only what they need, when they need them.  I am one of those people.  Let's take a site like mine for example: some pages require a syntax highlighter, some do not.  Why make the effort to load the syntax highlighter CSS and JavaScript if there are no `pre` elements that would require it?

AMD JavaScript的支持者可能会告诉您，他们只喜欢在需要时加载所需的内容。 我是那些人的其中一个。 让我们以像我这样的网站为例：有些页面需要语法突出显示，有些则不需要。 如果没有`pre`元素，为什么要努力加载语法突出显示CSS和JavaScript？

The following is an example of how I occasionally load resources based on DOM contents:

以下是我偶尔基于DOM内容加载资源的示例：

$('article pre').length && (function() {
            var mediaPath = '/assets/';
    
            $('>').attr({
                type: 'text/css',
                rel: 'stylesheet',
                href: mediaPath + 'css/syntax.css'
            }).appendTo(document.head);
    
            var syntaxScript = document.createElement('script');
            syntaxScript.async = 'true';
            syntaxScript.src = mediaPath + 'js/syntax.js';
            document.body.appendChild(syntaxScript);
        })();

The arguments against this practice will be (1) concatenating into existing JS and CSS to save on the number of requests and (2) flash of content style changes.  The first argument needs to be judged on a per-case basis;  if the required CSS and JS is small, it should be concatenated to a file used throughout the site or site subsection.  The second argument can always be hushed with a bit of transition magic!

反对这种做法的论点将是(1)连接到现有的JS和CSS中以节省请求的数量，以及(2)内容样式的更改。 第一个论点需要根据具体情况进行判断； 如果所需CSS和JS很小，则应将其串联到整个站点或站点子节中使用的文件中。 第二个争论总是可以用一些过渡魔术来解决！

> 翻译自: [https://davidwalsh.name/lazy-load-elements][https_davidwalsh.name_lazy-load-elements]

惰性匹配

[https_davidwalsh.name_lazy-load-elements]: https://davidwalsh.name/lazy-load-elements