亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS 新的“內容可見性”屬性是否會干擾腳本加載行為?

CSS 新的“內容可見性”屬性是否會干擾腳本加載行為?

慕斯709654 2022-12-29 16:19:09
新的CSS property content-visibility屬性看起來像是一個提高頁面加載速度的好工具。我想將它添加到我的頁腳:<footer style="content-visibility: auto;">   (...)   </footer>因為稍后可以在屏幕上繪制它(它出現在我網站所有頁面的文件夾下方)。但是,我頁面的頁腳有許多 js 庫<script>,這些庫是通過頁腳標簽內的標簽加載的。有些腳本是預先加載的,有些是延遲加載的,有些是異步加載的。(是的,不幸的是,有很多腳本)。所以我的問題是:該content-visibility屬性會以任何方式干擾腳本加載嗎?還是無論 CSS 屬性如何,腳本都會以相同的方式加載?在這里問是因為它是新的并且對我來說看起來有點“神奇”,而且我沒有找到太多相關的文檔。在此先感謝您對此的任何見解。
查看完整描述

2 回答

?
精慕HU

TA貢獻1845條經驗 獲得超8個贊

<footer style="content-visibility:auto">不會<footer content-visibility="auto">

這是一個 CSS 屬性,所以它不會影響腳本加載,但因為它有可能影響布局,如果腳本執行可能會受到影響,例如,依賴于特定的基于布局的操作,例如獲取邊界框一個矩形。


查看完整回答
反對 回復 2022-12-29
?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

當您認為 Alohci 的回答不完整時,我會加上我的 2 美分,但大多數情況下我只能改寫已經說過的話。

我沒有Chrome 85,所以無法測試。但是在閱讀了這個這個規范之后,我認為:

  1. ...但是如果它是一個向元素添加處理程序的腳本,它可能有問題,比如$(selector).click(...)?

    只是測試一下!嘗試content-visibility: auto使用 JS 代碼單擊一個元素,同時它由于在屏幕外而仍然不可見。我確定處理程序會起作用。規范中沒有關于此類問題的任何內容。

  2. content-visibility屬性會以任何方式干擾腳本加載嗎?

    沒有。規范中沒有關于資源加載的字眼。但再次 - 測試它!查看“網絡”選項卡。腳本的加載順序不應改變。

  3. 因此,它不會影響一般用途的腳本,例如引導程序等,但是[what] 如果它是一個腳本......

    ...一個腳本...

    是的,它可以打破

    你甚至可以想象一個讀取 css 屬性的腳本,發現content-visibility并拋出它不知道的......甚至拋出只是因為它的作者討厭那些使用content-visibility:)

    但我認為在你的情況下,機會是無限小的,因為我認為你所指的腳本中沒有一個對你的footer.

    • 不知何故取決于元素及其content-visibility: auto后代的大小(Alohci 已經指出)

    • 不知何故取決于innerText

    • 與一些可訪問性功能相關(可能......不太熟悉這些)

    • 在其他一些情況下(如果您對細節感興趣,請閱讀規范)

    • 并且可能還有其他未在規范中提及的情況,因為該功能仍處于起步階段。(而content-visibility的規范實際上是一個草案)

無論如何,應該測試任何更改(理想情況下)。但是你也永遠不能確定沒有錯誤。所以只要試一試,如果值得,看看效果如何。


查看完整回答
反對 回復 2022-12-29
  • 2 回答
  • 0 關注
  • 77 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號