天道酬勤,学无止境

CQ5 移除阻止渲染的 JavaScript(CQ5 Remove Render-Blocking JavaScript)

问题

我正在处理此文档以删除阻塞的 js:

移除阻塞 JS

但是,在 CQ5 中,我们通过以下方式包含 js:

<cq:includeClientLib js="headlibs"/>

如何修改脚本标签,如:

<script async src="my.js">

所以我可以删除阻塞的JS。

回答1

cq:includeClientLib 没有任何选项可以执行此操作。 您可以尝试使用 com.day.cq.widget.HtmlLibraryManager 接口来获取 JS 文件的路径,标签是 a 是该接口的便捷包装器。

com.day.cq.widget.HtmlLibraryManager clientlibmanager = sling.getService(com.day.cq.widget.HtmlLibraryManager.class);
if(clientlibmanager != null)
{ 
    String[] categoryArray = {"headlibs"};
    java.util.Collection<com.day.cq.widget.ClientLibrary> libs = clientlibmanager.getLibraries(catArray,com.day.cq.widget.LibraryType.JS,false,false);
    for(com.day.cq.widget.ClientLibrary lib : libs) {
        out.write("<script async type=\"text/javascript\" src=\""+lib.getIncludePath(com.day.cq.widget.LibraryType.JS)+"\"></script>");
    }

} else {
         out.write("clientlib manager is null");
  }

方法getIncludePath()还需要一个额外的参数minified (boolean) 来给出缩小文件的路径。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • CQ5 Remove Render-Blocking JavaScript
    I'm working on this document to remove blocking js: Remove Blocking JS However with CQ5 we include js via: <cq:includeClientLib js="headlibs"/> How can I modify script tag like: <script async src="my.js"> So I can remove blocking JS.
  • 消除阻止渲染的JavaScript和CSS(Eliminate render-blocking JavaScript and CSS)
    问题 我在弄清楚Google PageSpeed Test中的“这种特殊结果”到底意味着什么时遇到了麻烦。 我正在测试以下网站:www.loaistudio.com-https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com 谁能给我建议? 我已经设法解决了所有其他错误-但是我完全陷入了这一错误,我知道CSS必须位于页面的开头,这是在告诉不要将其放在标题的末尾,而应将其放在标题的末尾页?! 回答1 您的浏览器在加载JavaScript时冻结了页面呈现 快速解答:您只需要将JavaScript src放在内容下方。 为什么? 因为当您的浏览器开始加载JavaScript时,它将冻结其余部分,直到完成为止。 加载页面的内容首先使其可以显示,然后JavaScript便拥有了所有需要加载的时间。 所以这样做: <html> <head> </head> <body> My great body content! <script type="text/javascript" src="my/js/files.js"> <script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js"> <
  • 为什么我们在 CQ5 中为单个组件有多个 jsp?(why do we have multiple jsp's for a single component in CQ5?)
    问题 我是 CQ5 的新手。 在学习它的概念时,我开始知道 CQ5 使用 Sling 框架进行请求处理并根据最佳匹配解析脚本。 我在 CQ5 中看到很少有组件(大多数是页面或顶级组件)在单个组件下有多个 jsp(例如页面组件有 page.jsp、body.jsp、header.jsp 类似的重定向组件有重定向) .jsp、body.jsp、content.jsp)。 所以我想问一下在什么场景下,我们会有多个jsp,哪个脚本会通过sling解析来显示内容? 回答1 一个组件下有多个 jsp 的可能性与 sling 的关系比与 CQ 有更多的关系(尽管 cq 也在框架上提供了一些扩展)。 在顶级组件(例如页面组件)中有更多 jsp 的原因通常是为了捕捉发生在较低级别某处的包含的情况(因此包含文件的定义在那里,但实际文件是组件中不存在)。 在我看来,在单个组件(无论什么级别)下有多个 jsp 的主要原因有 3 个,并且所有这些原因都可以同时应用于同一个组件 将组件分解成更小(更易于维护)的部分覆盖渲染使用吊索选择器的强大功能 场景 1:将组件分解为更小(更易于维护)的部分 正如这里的标题所述,我们可以在一个组件中使用多个 jsp 来将该组件的呈现拆分为更容易维护和更容易覆盖的单独部分,或者两者的组合。 “两者”情况是基础页面组件中发生的情况。 但请查看场景 2 以了解有关详细信息。
  • 消除外部渲染阻塞(Eliminate external render-blocking)
    问题 PageSpeed Insights建议我: “消除了折叠式内容中的外部渲染阻止Javascript和CSS。您的页面具有1个阻止CSS资源。这会导致页面渲染出现延迟。优化以下资源的CSS投放:http://itransformer.es/ css / c0f9425.css” css文件c0f9425.css是jquery-ui.css文件和自定义文件的组合文件。 我不太明白这一点。 我应该如何遵循这个建议? 回答1 Google建议您将最初需要的(折叠式)CSS放入行中,并在页面加载准备就绪时加载其余的CSS。 看这里。 javascript也是如此。 内联包括“必须有代码”,并按此处建议的方式在页面加载中加载“要有代码” 想法是尽快加载用户首先看到的内容。 我个人觉得很难遵循,因为它将拆分代码并使维护起来更加困难。 尽管对于大型项目来说还是有道理的... 回答2 我仅使用javascript文件成功解决了此问题。 尝试在脚本标签或defer属性中添加async属性。 例如: <script src="filename.js" async></script> <script src="filename.js" async="async"></script> 或者 <script src="filename.js" defer></script> <script src=
  • 对于这个 CQ5/AEM URL 重写场景,我缺少什么?(What am I missing for this CQ5/AEM URL rewriting scenario?)
    问题 我基本上想要解析短 URL,并使用 CQ5 网站的短 URL 生成 HTML 页面。 到目前为止,短 URL 已按预期映射到长 URL,但生成的 HTML 页面中的链接并未缩短。 例如,我期待以下<script>标签的src属性: <script type="text/javascript" src="/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/style/clientlibs.1395978029951.js"></script> 简称为: <script type="text/javascript" src="/style/clientlibs.1395978029951.js"></script> 但它不是,并且仍然完好无损。 锚元素中的href属性也没有缩短。 在 JCR 中,该网站存储在/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/ ,我已经配置了我的/etc/hosts和 Apache 配置文件,使其可以通过http://site-1:4503访问http://site-1:4503在我的本地开发环境中。 我定义了以下 URL 映射: { "jcr:primaryType":"sling:Folder", "http"
  • Adobe CQ5.5-如何使用API​​显示页面缩略图(Adobe CQ5.5-How to display Page Thumbnail using API)
    问题 我已经使用 sidekick >Page properties>Images 选项卡为我的页面配置了图像。 现在我想在我的一个 jsp 中获取我的这个页面图像(缩略图)。 有人可以为我提供可用于实现此目的的 api 类和方法的指针或代码片段吗? 谢谢,拉杰夫 回答1 我建议使用默认图像组件作为示例 - /libs/foundation/components/image。 如果您将代码放入特定页面类型的组件中,您的代码应该是这样的: if (currentNode.hasNode("image")) { String imagePath = currentNode.getNode("image").getPath(); Resource imageRes = resourceResolver.getResource(imagePath); image = new Image(imageRes); image.loadStyleData(currentStyle); image.setSelector(".img"); if (!currentDesign.equals(resourceDesign)) { image.setSuffix(currentDesign.getId()); } image.draw(out); } 但是请记住,即使您设置了图像,也不意味着它会显示 -
  • 如何防止 CSS 阻塞我的网站?(How to keep CSS from render-blocking my website?)
    问题 我正在尝试优化移动网页的加载速度,为此我正在使用该网站: https://developers.google.com/speed/pagespeed/insights 这个网站评估我的来源并告诉我我可以改进的地方。 在我的网站上,我下载了一种字体: <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> 显然这阻止了我的页面的呈现。 现在,如果这是 JavaScript,我可以在标签中使用async词,它会解决问题,但这不是我正在加载的 javascript 文件! 无论如何,是否可以阻止此资源阻止我的浏览器并强制它等待下载? 回答1 你可以用 JavaScript 做到: <script> (function() { var link = document.createElement('link'); link.rel = "stylesheet"; link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700"; document.querySelector("head").appendChild(link); })(); </script> 字体将随主渲染带外加载。 当然
  • “消除首屏内容中的阻止渲染的CSS”(“Eliminate render-blocking CSS in above-the-fold content”)
    问题 我一直在使用Google PageSpeed见解来尝试改善网站的性能,到目前为止,事实证明它非常成功。 推迟脚本之类的事情可以很好地工作,因为我已经有了内部版本的jQuery的.ready()来推迟脚本,直到页面完全加载为止,我要做的就是内联该特定函数并将完整脚本移到末尾页面的。 效果很好。 但是现在我发现自己瞪着清单上剩下的一个黄色圆点:“在首屏内容中消除了阻止渲染的CSS”。 设置我的CSS的方法是拥有一个全局_.css文件,该文件包含通常应用于页面结构的样式,或在整个网站的一两个以上位置中使用的样式。 然后,大多数页面都有一个关联的CSS文件(例如, party.php具有party.css ),其中包含特定于该特定页面的样式。 当我将/t=FILEMTIME附加到文件名(然后使用.htaccess删除它们)时,所有CSS文件都将无限期地缓存,以确保在更改文件时对它们进行更新。 因此,无论如何,Google建议内嵌折叠内容所需的关键样式。 问题是...好吧,请看以下屏幕截图:http://prntscr.com/1qt49e 如您所见...所有内容都是首屈一指的! 人们讨厌滚动,特别是在涉及加载许多页面的游戏上。 因此,我将网站设计为适合一个屏幕(假设分辨率足够好)。 因此,这意味着...所有样式都适用于首屏内容! 那么...有什么解决办法吗?
  • What am I missing for this CQ5/AEM URL rewriting scenario?
    I basically want short URLs to get resolved and HTML pages to be generated with short URLs for a CQ5 website. So far short URLs are getting mapped to long URLs as expected, but links in the generated HTML pages are not getting shortened. For example, I am expecting the src attribute of the following <script> tag: <script type="text/javascript" src="/content/foo/c0/06/9d/3d93a858-efb4-4619-8f9e-5edc65d0f5ae/style/clientlibs.1395978029951.js"></script> To be shortened to: <script type="text/javascript" src="/style/clientlibs.1395978029951.js"></script> But it is not and remains intact. href
  • 如何在 adobe cq5 中使用 cq.HTTP.post 方法验证字段?(How to validate a field using cq.HTTP.post method In adobe cq5?)
    问题 我试图通过将字段值发送到 servlet 来验证字段,作为响应,我得到 true 或 false 即该字段是否有效。 这是我的对话框文件 <bodytext jcr:primaryType="cq:Widget" fieldDescription="Type Text Here" fieldLabel="Body Text" name="./bodytext" validator= "function(value) { var dialog = this.findParentByType('dialog'); var postParams = {}; postParams['value'] = value; CQ.HTTP.post('/bin/feeds/validation.json', function(options, success, response){response.valid ? true : '此页面上已经存在表单名称。';},postParams); }" xtype="textarea"/> 这是我的 servlet 代码 import java.io.IOException; import javax.servlet.ServletException; import org.apache.sling.api
  • 将CQ5组件设置为可编辑或不可编辑(Set a CQ5 component to editable or not editable)
    问题 如果我想将cq5组件设置为在A页中可编辑但在B页中不可编辑,是否可以。 例如:在A页上,我有C组件,我们允许作者打开对话框并编辑该组件。 但是我们不允许作者打开对话框来编辑页面B上的组件C。我尝试研究cq:EditConfig链接,但这还不足以解决我的问题。 回答1 您可以在包含之前设置ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE,并在包含之后将其删除。 放: slingRequest.setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, true); 去掉: slingRequest.removeAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE); 此处有更多详细信息:https://dev.day.com/docs/en/cq/current/developing/boilerplates.html 您可以编写一个Sling组件过滤器: 然后您可以检查页面和组件,如果要禁用编辑,只需设置属性,执行过滤器并取消设置属性...
  • 在 cq5/AEM 中创建自定义 MIME 类型(creating custom MIME type in cq5/AEM)
    问题 我需要在 cq5/AEM 中添加对专有 3D 格式的支持。 尽管完全没有这方面的经验,我还是设法生成了一些工作组件来可视化资产。 但是现在,我需要创建自定义媒体处理程序以从模型生成格式副本和缩略图。 问题是,媒体处理程序只能处理特定 MIME 类型的资产,而 cq5 不会将类型与我的资产相关联。 因此,我不能对它们调用媒体处理程序。 有什么方法可以自定义 cq5 如何将 MIME 类型关联到资产,或者我有另一种方法来规避这个问题吗? 回答1 好的,我找到了我需要的东西。 您可以通过转到位于http://localhost:4502/system/console/configMgr的 OSGI 控制台和Apache Sling MIME type Service配置,将 MIME 类型链接到扩展。 在那里,您可以添加新的 MIME/扩展链接: MIME extensions... model/collada+xml dae
  • 如何使用 Javascript 获取 ul li 值(How to get the ul li values using Javascript)
    问题 我想使用 javascript 在警报框中获取 li 的值。(即如果我点击 PHP,它应该在警报框中提醒 php)。 但它的显示未定义。 请任何人对此提供帮助。 我的代码是 <script type="text/javascript"> function lang1() { var a = document.getElementsByTagName("li").value; alert(a); } </script> <form> <ul id="language" onclick="lang1();"> <li>PHP</li> <li>ASP</li> <li>JAVA</li> <li>CQ5</li> </ul> </form> 回答1 getElementsByTagName 返回一个NodeList ,即一个元素列表。 但是即使您访问了列表的一个元素, li元素也没有value属性(只有表单控件元素具有此属性)。 您可以使用 .innerHTML 或 .textContent/ .innterText来访问 HTML 元素的内容。 现在,您想要获取被单击的li元素的内容。 由于您将事件处理程序绑定到ul元素, this将始终引用事件处理程序内的ul元素。 但是您可以通过访问事件对象的目标(或 srcElement (IE))属性来获取触发事件的元素。 W3C
  • How to limit the number of elements in multifield in CQ5?
    I develop the site with Day CQ5 and was faced witha problem. I'm creating a component, and the dialogue for it. I use in the dialog for the component element "multifield", which contains several elements "pathfield." How can I set a specific number of elements "pathfield" and remove buttons "+" and "-"?
  • 限制cq5中模板中允许的组件(Limiting allowed components in a template in cq5)
    问题 我有一个模板,希望将其限制为仅使用组件的某些子集。 我已经创建了模板,设置了要在设计模式下使用的组件,一切看起来都很不错,但是当我导出该模板并将其安装在另一个cq5实例上时,为该模板设置的组件列表将消失。 知道如何让他们坚持吗? 回答1 上面的答案是正确的,但是如果您需要更多信息,作为模板实现的一部分,您可以通过定义以下属性来定义将在模板的辅助控件中呈现的组件的列表。 components="[/libs/foundation/components/text,/libs/foundation/components/textimage]"> 这将位于以下节点下(此处为xml格式) <TEMPLATENAME jcr:primaryType="nt:unstructured"> <content jcr:lastModified="{Date}2014-04-11T13:04:48.855+10:00" jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" sling:resourceType="/libs/foundation/components/parsys" components="[/libs/foundation/components/text,/libs/foundation/components
  • 从 xtype 选择类型复选框中选择值 CQ5(Select value from xtype selection type checkbox CQ5)
    问题 您好,我现在正在运行一个问题。 我想让复选框状态:已选中但我无法使 defaultValue="value" <channels jcr:primaryType="cq:Widget" fieldLabel="Channels" defaultValue="Value" name="channels" options="/bin/sample/private/getJSON.json" optionsValueField="Value" type="checkbox" xtype="selection"> 我曾尝试这样做:在 CQ5 中获取默认选中复选框 但它没有解决问题。 回答1 这是我用来将复选框的默认状态设置为“已选中”的示例。 注意defaultValue="true" <channels jcr:primaryType="cq:Widget" fieldLabel="Channels" name="channels" type="checkbox" defaultValue="true" xtype="selection"/> 回答2 试试这样写。 <channels jcr:primaryType="cq:Widget" fieldLabel="Channels" defaultValue="{Boolean}true" name="channels"
  • Parbase组件的用途是什么:(What is the use of Parbase component:)
    问题 我无法理解CQ5中是否需要parbase组件。 根据我在CQ5文档中阅读的内容,parbase是一个可以从其他组件扩展的组件。 但是,所有组件都可以通过指定sling:resourceSuperType属性来扩展其他组件。 那么对parbase组件有什么需求? 回答1 根据Day文档,“ parbase允许组件从其他组件继承属性” 如果您在“ / libs / foundation / components”下进行检查,则大多数可创作和可拖动的组件都将“ parbase”设置为“ sling:resourceSuperType”,以便它们在添加到Paragraph系统中时可以继承图像和文本呈现属性( Parsys组件)。 这是CQ5中所有现成的组件所遵循的标准。 创建自己的组件时,无需添加“ parbase”作为超类型,除非需要在parsys中通过拖放启用组件。 在AFAIK中,永远不会显式使用parbase组件,而仅当将其添加到Parsys中时才有助于呈现组件。 回答2 Parbase只是一个扩展组件,您可以从中获得一些OOTB功能。 如果我可以用技术语言说的话,Parbase是关键组件,因为它允许组件继承其他组件的属性,类似于面向对象语言(例如Java)中的子类。 例如,当您在CRX Explorer中打开/ libs / foundation / components
  • CQ5 预加载带有组件的 parsys(CQ5 preload a parsys with components)
    问题 我很好奇是否有人知道如何在其中加载带有默认组件的 parsys 负载。 我想完成的是以下内容: Form Component - form-parsys - input component - input component 在大多数情况下,这是非常简单的。 我创建了一个包含 parsys 的“表单”组件。 我想要的是让这个表单组件加载一些已经设置的默认输入组件。 这些输入组件需要是 form-parsys 节点的一部分,以便可以在用户添加的输入组件中重新组织它们。 不确定是否有任何关于此的文档,因为我找不到任何文档,但我确定这并非完全不可能,并且想看看之前是否有人做过类似的事情,然后再继续进行黑客攻击。 谢谢布罗迪 回答1 我认为您正在寻找的是模板。 在 CQ5 中,模板可用于创建具有预定义内容的页面,这可以是 parsys(带有组件)或创建页面时您可能希望在页面中使用的任何其他节点。 在您的情况下,您可以定义一个模板,其中包含 parsys 组件以及该 parsys 中您想要的任何内容。 您还可以为使用该模板创建页面的位置设置规则。 创建(或编辑,因为您可能已经有了)模板后,您可以使用站点管理员使用您的模板创建一个新页面。 页面将被创建,模板的 jcr:content 下的所有内容将被复制到新页面中。 如果您需要不同类型的“初始内容”
  • 在 CQ5/AEM 中如何/何时使用 CRX 和 Apache Jackrabbit?(How/When is CRX and Apache Jackrabbit used in CQ5/AEM?)
    问题 最近,我花了一些时间试图更好地理解 AEM 技术堆栈。 有这么多的片段,似乎很容易混淆。 我一直在查看 AEM 上的 JCR 实现。 我一直在读它使用 CRX。 但是,我知道它也使用 Apache Jackrabbit。 两者都用吗? 使用这两种实现背后的逻辑是什么? 何时何地使用? 一个更好的问题可能是 CRX 和 Jackrabbit 之间的关系是什么? 回答1 JCR (JSR-170) 是用于内容存储库的标准 Java API 。 它为Java应用程序与内容库交互的接口,但它不提供一个仓库实现。 Apache Jackrabbit是一个完全实现 JCR API 的开源内容存储库实现。 Adobe CRX是 AEM 中使用的商业内容存储库组件,它使用了 Jackrabbit 的一些元素(例如一些安全 API)。 CRX 提供了额外的特性,例如开发工具和集群功能,并有自己的存储机制,不同于 Jackrabbit 的实现。 回答2 CRX 是 Apache Jackrabbit 的商业实现,具有以下功能: 焦油项目清单无共享聚类 LDAP 集成内容包管理 无共享集群 3/ LDAP 集成 4/ 内容包管理 在 adobe 论坛中参考以下内容
  • CQ5页面中的多个段落不起作用(Multiple paragraphs in a CQ5 page don't work)
    问题 我尝试在模板的JSP中添加多个“ par”组件。 但是在页面上只有第一个出现的是可见的。 在页面中使用段落是否有限制? 回答1 只需更改您的path变量的值 <cq:include path="par1" resourceType="foundation/components/parsys" /> <cq:include path="par2" resourceType="foundation/components/parsys" /> 这应该有助于您拥有多个段落组成部分