首页 \ 问答 \ 了解渲染阻止CSS(Understanding Render Blocking CSS)

了解渲染阻止CSS(Understanding Render Blocking CSS)

 我试图了解如何在特定设置中评估CSS：  
 假设我的<head>标记中包含以下内容：  
<html><head>
...
    <link href="reset.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="autocomplete.css" type="text/css" rel="stylesheet">
</head>
<body>
... html ...
<script type="text/javascript" src="/js/script.js"></script>
</body></html>
 
 现在，让我们假设reset.css和style.css包含一些立即影响上面的折叠内容或HTML中的元素的规则。 但是， autocomplete.css仅包含稍后由某些JavaScript使用的类。  
 现在，我们进一步假设浏览器已经下载了reset.css和style.css但autocomplete.css仍处于未决状态。 我想知道如果浏览器会遇到页面末尾的阻止脚本标记会发生什么？ 显然，它可以将HTML呈现给脚本标记，但是缺少的autocomplete.css阻止了脚本的执行？  
 请注意，脚本标记不是同步。  
 我读过： https ： //developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp  
 并且它说，在CSSOM存在之前，JavaScript的执行被阻止。  
 现在：1。页面是否会开始渲染甚至autocomplete.css还没有到达？ 和2.在autocomplete.css存在之前， script.js javascript的执行是否被阻止？  
 注意，我指的是两个不同的东西：渲染和脚本执行。 

I am trying to understand how CSS is evaluated in a specific setting: 
Lets assume I have the following content in my <head> tag: 
<html><head>
...
    <link href="reset.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="autocomplete.css" type="text/css" rel="stylesheet">
</head>
<body>
... html ...
<script type="text/javascript" src="/js/script.js"></script>
</body></html>
 
Now, let's assume reset.css and style.css contain some rules that immediately affect the above the fold content or the the elements in the HTML. However, autocomplete.css only contains class used that are used later by some JavaScript.  
Now, let's further assume the browser already downloaded reset.css and style.css but autocomplete.css is still pending. I am wondering what would happen if the browser would do it encounters the blocking script tag at the end of the page? Obviously, it can render the HTML up to the script tag, but is the execution of the script blocked by the missing autocomplete.css? 
Note that the script tag is not a sync. 
I've read: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp 
And there it says that the execution of the JavaScript is blocked until the CSSOM is there. 
Now: 1. Will the page start rendering even autocomplete.css has not yet arrived? and, 2. Is the execution of the script.js javascript blocked until the autocomplete.css is there? 
Note, I am referring to two different things: rendering and script execution.

原文：https://stackoverflow.com/questions/42581143

更新时间：2022-02-21 08:02

最满意答案

 从精美的手册 ：  
 
  delegateEvents delegateEvents([events])  
  [...]事件以{"event selector": "callback"}格式编写。 callback可以是视图上方法的名称，也可以是直接函数体。 省略selector this.el事件绑定到视图的根元素（ this.el ）。  
 
 所以你希望你的events看起来像这样：  
events:
    'click': -> console.log('clicked')
 
 演示： http : //jsfiddle.net/6W6QE/ 

From the fine manual: 
 
 delegateEvents delegateEvents([events]) 
 [...] Events are written in the format {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element (this.el). 
 
So you want your events to look like this: 
events:
    'click': -> console.log('clicked')
 
Demo: http://jsfiddle.net/6W6QE/

了解渲染阻止CSS(Understanding Render Blocking CSS)

最满意答案

相关问答

骨干事件没有解雇(Backbone event not firing)[2023-06-20]

骨干点击事件不会在动态视图中触发(Backbone click event not firing on dynamic view)[2023-09-17]

主干点击事件未触发(backbone click events not firing)[2024-01-25]

骨干点击事件没有发射(Backbone click event not firing)[2023-05-28]

委托点击事件不会触发后代(Delegated click event not firing on descendants)[2023-05-13]

子视图的骨干事件未正确触发(Backbone Event of Subview not firing correctly)[2022-03-01]

投放事件不会在骨干视图上触发(drop event not firing on backbone view)[2022-08-27]

点击事件没有开火！(Click event not firing! (backbone.js))[2022-12-05]

类视图内的骨干点击事件(Backbone click event on class inside view)[2023-11-26]

Keypress事件只发射一次(Keypress event firing only once)[2023-09-05]

相关文章

最新问答