vivo TWS Air開(kāi)箱體驗(yàn)：真輕 臻好聽(tīng)
在vivo S15系列新機(jī)的發(fā)布會(huì)上，vivo的最新款真無(wú)線藍(lán)牙耳機(jī)vivo TWS Air也一同發(fā)布，本次就這款耳機(jī)新品給大家?guī)?lái)一個(gè)簡(jiǎn)單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
CSS 是一種美麗且復(fù)雜的技術(shù)，我們每天在工作中都會(huì)用到。然而，包括我在內(nèi)的許多開(kāi)發(fā)者都忽略了它的一些重要方面。
這很明顯，因?yàn)樵诨ヂ?lián)網(wǎng)上很難找到關(guān)于 CSS 的新知識(shí)或高級(jí)內(nèi)容。大多數(shù)內(nèi)容創(chuàng)作者只寫一些熱門話題，比如新語(yǔ)言、框架和庫(kù)。
個(gè)人對(duì) CSS 的了解僅限于讓它正常工作。而這特別令人遺憾，因?yàn)槲覀儚奈磭L試深入研究這個(gè)主題。認(rèn)識(shí)到這一點(diǎn)后，做了一些研究，并列出了一些新發(fā)現(xiàn)的內(nèi)容。
CSS 性能是一個(gè)非常重要的話題，因?yàn)樗苯佑绊懢W(wǎng)站的效率。由于現(xiàn)代應(yīng)用程序包含大量的 CSS 代碼，即使是微小的錯(cuò)誤也可能導(dǎo)致顯著的性能下降。
首先，下面賂你展示一些令我驚訝的東西。只需看看下面的例子，試著找出可能的問(wèn)題。
正如你所看到的，這個(gè)例子一點(diǎn)都不復(fù)雜。這段 CSS 代碼移除了標(biāo)題中所有段落內(nèi)鏈接的文本裝飾。這不是普通的 CSS 嗎？
但你知道使用這樣的選擇器會(huì)導(dǎo)致瀏覽器執(zhí)行大量額外工作嗎？這個(gè)問(wèn)題適用于我們代碼中所有類似的子選擇器。
這是因?yàn)闉g覽器在解析 CSS 時(shí)，從右向左讀取選擇器。有了這個(gè)新知識(shí)，我們將這個(gè)過(guò)程分解成幾個(gè)步驟：
通過(guò)使用更具體的選擇器，我們可以幫助瀏覽器避免所有這些額外的工作。我們可以將 .header__link 類應(yīng)用于錨元素，并用它替換選擇器 #header p a。這樣，瀏覽器會(huì)更快地找到所需的元素。
所謂昂貴的 CSS 屬性，是指這些屬性在我們的應(yīng)用程序中可能會(huì)耗費(fèi)大量性能。但這并不意味著你完全不能使用它們。你只需要理解，如果元素使用了這些屬性并且經(jīng)常渲染——它肯定會(huì)影響性能。
需要注意的一件棘手事情是，改變某些 CSS 屬性需要更新整個(gè)布局。幾何屬性如寬度、高度、頂部等可能導(dǎo)致整個(gè)樹(shù)的重新繪制。
還有一些屬性很難渲染。雖然這些屬性的清單很短，但你可以在這里了解更多關(guān)于它們的信息。
重繪（Repaint）和重排（Reflow）是在瀏覽器中渲染網(wǎng)頁(yè)過(guò)程中兩個(gè)重要的概念。當(dāng)頁(yè)面加載或更新時(shí)，瀏覽器會(huì)通過(guò)一系列步驟將內(nèi)容顯示在屏幕上，而重繪和重排在這個(gè)過(guò)程中起著重要作用。
為了更好地理解這個(gè)過(guò)程，我們可以將其分解為幾個(gè)精確的步驟：
當(dāng)頁(yè)面首次加載時(shí)，如果不是空的，至少會(huì)執(zhí)行一次重排和重繪。但它們也會(huì)在以下情況下繼續(xù)發(fā)生：
重排是計(jì)算網(wǎng)頁(yè)上元素布局的過(guò)程。它根據(jù)元素的內(nèi)容和樣式來(lái)確定每個(gè)元素的大小和位置。
在現(xiàn)代應(yīng)用程序中，特別是頁(yè)面上有成千上萬(wàn)個(gè)元素和頻繁的布局更新時(shí)，它很快會(huì)變成一個(gè)資源消耗大的操作。即使是對(duì)文檔中單個(gè)元素的重排，也可能需要重排其父元素和隨后的任何其他元素。
由于它是一個(gè)用戶阻塞操作，了解如何改進(jìn)重排以及各種文檔屬性對(duì)其持續(xù)時(shí)間的影響是非常有用的。典型的引發(fā)重排過(guò)程的情況通常有：
重繪是將像素繪制到屏幕上的簡(jiǎn)單過(guò)程。在重排期間確定布局后，瀏覽器將每個(gè)元素繪制到屏幕上。
重繪通常比重排消耗的資源少，但它仍然會(huì)影響網(wǎng)頁(yè)的性能。
最典型的情況是當(dāng)元素樣式的變化不影響其在屏幕上的大小或位置時(shí)。例如，當(dāng)背景顏色改變時(shí)，瀏覽器只需用新樣式重新繪制（或重繪）節(jié)點(diǎn)。
以下是一些會(huì)觸發(fā)重繪的操作的例子：
JavaScript 和 CSS 是非常棒的技術(shù)，尤其是在一起使用時(shí)。每種技術(shù)都有其獨(dú)特的優(yōu)勢(shì)，結(jié)合使用時(shí)可以創(chuàng)造出令人難以置信的效果。
然而，我可以自信地說(shuō)，UI 控制中使用 CSS 越多，Web 應(yīng)用程序就越容錯(cuò)和可靠。
觀點(diǎn)很簡(jiǎn)單：
現(xiàn)在讓我們考慮一些你可以輕松用 CSS 替代 JS 的情況。
以前，要實(shí)現(xiàn)平滑滾動(dòng)，需要使用幾行 JavaScript 代碼。但現(xiàn)在，這個(gè)任務(wù)可以完全通過(guò) CSS 的力量來(lái)解決。
現(xiàn)在你可以通過(guò)使用 CSS 屬性 scroll-behavior 來(lái)實(shí)現(xiàn)平滑滾動(dòng)。
CSS 提供了兩個(gè)很棒的屬性：text-overflow 和 line-clamp。它們?cè)试S我們修剪文本，同時(shí)讓我們擺脫使用 JavaScript 代碼或其他復(fù)雜方法來(lái)執(zhí)行此類任務(wù)。這兩個(gè)屬性雖然不是新的，但非常有用。
這個(gè)屬性控制文本在不適合一行的情況下如何顯示。這個(gè)屬性的一個(gè)完美例子是在卡片標(biāo)題中使用 text-overflow: ellipsis，它會(huì)在被截?cái)嗟奈谋灸┪诧@示一個(gè) Unicode 字符 …。
請(qǐng)記住，text-overflow: ellipsis 只有在與 white-space: nowrap 和 overflow: hidden 屬性配合使用時(shí)才有效。
line-clamp 屬性在需要處理多行文本時(shí)非常有用。上面示例中的卡片描述展示了它的效果。
這個(gè)屬性是 CSS Overflow Module Level 3 標(biāo)準(zhǔn)的一部分，雖然目前還處于草案階段，但已經(jīng)有大約 95% 的瀏覽器支持這個(gè)屬性，但需要加上 -webkit- 前綴。
在使用它之前，重要的是要提到它不允許控制顯示字符的數(shù)量。但它仍然非常有用。
要使用 line-clamp 屬性，我們需要將其與 display: -webkit-box 和 -webkit-box-orient: vertical 結(jié)合使用。示例如下：
現(xiàn)代前端開(kāi)發(fā)的世界正在迅速變化，我們不斷得到新的機(jī)會(huì)來(lái)幫助我們更快、更好地完成工作。嘗試使用 CSS 是非常有趣且有幫助的。如果在不使用 JS 的情況下可以實(shí)現(xiàn)相同的結(jié)果，請(qǐng)考慮使用 CSS。
本文鏈接：http://www.www897cc.com/showinfo-26-91021-0.html關(guān)于 CSS 的那些事兒，我從未被告知
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)