看網站源代碼時發現，html的最頂部多出兩行。網站是用php代碼寫的，出現這個問題，我以為是bom頭的問題，于是用代碼去除了bom頭，但還是不行，最后沒辦法了，只能一個文件一個文件的試，最后終于發現了問題的所在。

效果如下圖所示

問題原因

出現這個問題的原因是，在 PHP<?php ?>的結束符外，多了幾個回車導致的。如下圖所示

解釋

php的結束符的作用是在寫html和php模版時，區分哪些是php代碼，哪些是html的，在結束符外的部分會被認定為是html代碼，所有頁面上多出了空格。

解決辦法

1、刪除掉結束符下的空格

2、在純php頁面中，不要寫結束符。

言

對于前端人員來講，最令人頭疼的應該就是頁面性能了，當用戶在訪問一個頁面時，總是希望它能夠快速呈現在眼前并且是可交互狀態。如果頁面加載過慢，你的用戶很可能會因此離你而去。所以頁面性能對于前端開發者來說可謂是重中之重，其實你如果了解頁面從加載到渲染完成的整個過程，就知道應該從哪方面下手了。

嗯，不要跑偏了，今天我們主要來研究長列表頁面的渲染性能

現如今的頁面越來越復雜，一個頁面往往承載著大量的元素，最常見的就是一些電商頁面，數以萬計的商品列表是怎么保證渲染不卡頓的，大家在面對這種長列表渲染的場景下，一般都會采用分頁或者虛擬列表來減緩頁面一次性渲染的壓力，但這些方式都需要配合JS來時實現，那么有沒有僅使用CSS就能夠實現的方案呢？

content-visibility

屬性值

content-visibility是CSS新增的屬性，主要用來提高頁面渲染性能，它可以控制一個元素是否渲染其內容，并且允許瀏覽器跳過這些元素的布局與渲染。

content-visibility: hidden手動管理可見性

上面說到content-visibility: hidden的效果與display: none類似，但其實兩者還是有比較大的區別的：

• content-visibility: hidden 只是隱藏了子元素，自身不會被隱藏
• content-visibility: hidden 隱藏內容的渲染狀態會被緩存，所以當它被移除或者設為可見時，瀏覽器不會重新渲染，而是會應用緩存，所以對于需要頻繁切換顯示隱藏的元素，這個屬性能夠極大地提高渲染性能。

從這上面我們可以看到，添加了content-visibility: hidden元素的子元素確實是沒有渲染，但它自身是會渲染的！

content-visibility: auto 跳過渲染工作

我們仔細想想，頁面上雖然會有很多元素，但是它們會同時呈現在用戶眼前嗎，很顯然是不會的，用戶每次能夠真實看到就只有設備可見區那些內容，對于非可見區的內容只要頁面不發生滾動，用戶就永遠看不到。雖然用戶看不到，但瀏覽器卻會實實在在的去渲染，以至于浪費大量的性能。所以我們得想辦法讓瀏覽器不渲染非可視區的內容就能夠達到提高頁面渲染性能的效果。

我們上面說到的虛擬列表原理其實就跟這個類似，在首屏加載時，只加載可視區的內容，當頁面發生滾動時，動態通過計算獲得可視區的內容，并將非可視區的內容進行刪除，這樣就能夠大大提高長列表的渲染性能。

但這個需要配合JS才能實現，現在我們可以使用CSS中content-visibility: auto，它可以用來跳過屏幕外的內容渲染，對于這種有大量離屏內容的長列表，可以大大減少頁面渲染時間。

我們將上面的例子稍微改改：

<template>
  <div class="card_item">
    <div class="card_inner">
      <img :src="book.bookCover" class="book_cover" />
      <div class="card_item_right">
        <div class="book_title">{{ `${book.bookName}${index + 1}` }}</div>
        <div class="book_author">{{ book.catlog }}</div>
        <div class="book_tags">
          <div class="book_tag" v-for="(item, index) in book.tags" :key="index">
            {{ item }}
          </div>
        </div>
        <div class="book_desc">
          {{ book.desc }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";

const props=defineProps<{
  book: any;
  index: any;
}>();
const { book, index }=toRefs(props);
</script>

<style lang="less" scoped>
.card_item {
  margin: 20px auto;
  content-visibility: auto;
}
  / *
  ...
  */
</style>

首先是沒有添加content-visibility: auto的效果，無論這些元素是否在可視區，都會被渲染

如果我們在平常業務中這樣寫，用戶進入到這個頁面可能就直接口吐芬芳了，為了性能考慮，我們為每一個列表項加上：

.card_item {
  content-visibility: auto;
}

這個時候我們再來看下效果：

從第10個開始，這些沒在可視區的元素就沒有被渲染，這可比上面那種全部元素都渲染好太多了，但是如果瀏覽器不渲染頁面內的一些元素，滾動將是一場噩夢，因為無法正確計算頁面高度。這是因為，content-visibility會將分配給它的元素的高度（height）視為0，瀏覽器在渲染之前會將這個元素的高度變為0，從而使我們的頁面高度和滾動變得混亂。

這里我們可以看到頁面上的滾動條會出現抖動現象，這是因為可視區外的元素只有出現在了可視區才會被渲染，這就回導致前后頁面高度會發生變化，從而出現滾動條的詭異抖動現象，這是虛擬列表基本都會存在的問題。

??注意：當元素接近視口時，瀏覽器不再添加size容器并開始繪制和命中測試元素的內容。這使得渲染工作能夠及時完成以供用戶查看。

這也是為什么上面我們看到的是從第十個才開始不渲染子元素，因為它需要一個緩沖區以便瀏覽器能夠在頁面發生滾動時及時渲染呈現在用戶眼前。

上面提到的size其實是一種 CSS 屬性的潛在值contain，它指的是元素上的大小限制確保元素的框可以在不需要檢查其后代的情況下進行布局。這意味著如果我們只需要元素的大小，我們可以跳過后代的布局。

contain-intrinsic-size 救場

頁面在滾動過程中滾動條一直抖動，這是一個不能接受的體驗問題，為了更好地實現content-visibility，瀏覽器需要應用 size containment 以確保內容的渲染結果不會以任何方式影響元素的大小。這意味著該元素將像空的一樣布局。如果元素沒有在常規塊布局中指定的高度，那么它將是 0 高度。

這個時候我們可以使用contain-intrinsic-size來指定的元素自然大小，確保我們未渲染子元素的 div 仍然占據空間，同時也保留延遲渲染的好處。

語法

此屬性是以下 CSS 屬性的簡寫：

• contain-intrinsic-width
• contain-intrinsic-height

/* Keyword values */
contain-intrinsic-width: none;

/* <length> values */
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/* width | height */
contain-intrinsic-size: 1000px 1.5em;

/* auto <length> */
contain-intrinsic-size: auto 300px;

/* auto width | auto height */
contain-intrinsic-size: auto 300px auto 4rem;

contain-intrinsic-size 可以為元素指定以下一個或兩個值。如果指定了兩個值，則第一個值適用于寬度，第二個值適用于高度。如果指定單個值，則它適用于寬度和高度。

實現

我們只需要給添加了content-visibility: auto的元素添加上contain-intrinsic-size就能夠解決滾動條抖動的問題，當然，這個高度約接近真實渲染的高度，效果會越好，如果實在無法知道準確的高度，我們也可以給一個大概的值，也會使滾動條的問題相對減少。

.card_item {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

之前沒添加contain-intrinsic-size屬性時，可視區外的元素高度都是0，現在這些元素高度都是我們設置的contain-intrinsic-size的值，這樣的話整個頁面的高度就是不會發生變化（或者說變化很小），從而頁面滾動條也不會出現抖動問題（或者說抖動減少）

性能對比

上面說了這么多，content-visibility是否真的能夠提高頁面的渲染性能呢，我們來實際對比看看：

• 首先是沒有content-visibility的頁面渲染

• 然后是有content-visibility的頁面渲染

上面是用1000個列表元素進行測試的，有content-visibility的頁面渲染花費時間大概是37ms，而沒有content-visibility的頁面渲染花費時間大概是269ms，提升了足足有7倍之多！！！

對于列表元素更多的頁面，content-visibility帶來的渲染性能提升會更加明顯。

思考

能否減小頁面的內存占用？

之前有同學問到了content-visibility: auto是否會減少頁面內存的占用，這個我們可以查看下使用前后頁面所占用內存的大小是否有變化。

我們可以通過chrome瀏覽器 設置 --> 更多工具 --> 任務管理器 查看頁面占用內存大小。

• 首先是沒有content-visibility: auto，頁面占用內存大概為96.2MB

• 然后是添加了content-visibility: auto，頁面占用內存仍然是96.2MB

也就是說，它并不會減少頁面占用內存大小，這些元素是真實存在于DOM樹中的，并且我們也可以通過JS訪問到

是否會影響腳本的加載行為？

如果我們在添加了content-visibility: auto的元素內去加載腳本，并且此時的元素處于一個不可見的狀態，那么此時元素內的腳本能夠正常加載呢？

<!-- ... 第十二個 -->
<div class="visibility_item">
        <div class="inner">
            測試腳本
            <img src="../../../../images/22-11/content-s1.png" alt="">
            <script src="./2.js"></script>
        </div>
        
</div>

很明顯它并不會影響腳本與圖片的加載行為，并且腳本再加載后能夠正常執行。結合上面第一點，我們可以得出結論，使用了content-visibility: auto的元素影響的只是子元素的渲染，對于內部靜態資源的加載還是正常進行。

但我們需要注意的是腳本的執行時機，如果要獲取DOM元素的話，此時的腳本只能獲取到它加載位置之前的DOM元素，而與它自身DOM有沒有渲染無關！

// 2.js
console.log('測試腳本')
console.log('第十一個', document.querySelectorAll('.visibility_item')[10])

console.log('第十三個', document.querySelectorAll('.visibility_item')[12])

可訪問性

使用了content-visibility: auto并且在非可視區的元素是否存在于可訪問樹中？

這里我們可以看出content-visibility: auto是屏幕外的內容在文檔對象模型中仍然可用，因此在可訪問性樹中（與visibility: hidden不同）。這意味著我們可以在頁面上搜索并導航到該內容，而無需等待它加載或犧牲渲染性能。

這個功能特性是在chrome 90 中更新的，在 chrome 85-89 中，屏幕外的子元素content-visibility: auto被標記為不可見。

兼容性

content-visibility是chrome85新增的特性，所以兼容性還不是很高，但它是一個非常實用的CSS屬性，由于跳過了渲染，如果我們大部分內容都在屏幕外，利用該content-visibility屬性可以使初始用戶加載速度更快。相信兼容性的問題在不久的將來會得到解決~

原文鏈接：https://juejin.cn/post/7168629736838463525

文將探索禁用兩行 CSS 實現文字鏤空效果。

1.鏤空效果

鏤空效果主要使用了 color: transparent 和 -webkit-text-stroke 來實現，具體看 demo 代碼。tips: 本 demo 中樣式使用了原生 CSS 嵌套。在本例中默認展現的是鏤空效果，當鼠標 hover 過后，顯示了顏色填充效果。

<style>
  .container {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    & a {
      display: block;
      font-size: 60px;
      text-decoration: none;
      color: transparent;
      -webkit-text-stroke: 2px #000;
      text-stroke: 2px #000;
      &:hover {
        color: #000;
      }
    }
  }
</style>
<div class="container">
  <a href="http://www.tencent.com" title="FED實驗室">
    <span>FED實驗室</span>
  </a>
</div>

效果如下：

2.text-stroke 介紹

WebKit 現在通過 CSS 支持對文本進行描邊。在當前的網頁中，為文字繪制的字形總是由顏色CSS屬性指定的單一顏色填充。有時作者可能希望用一種顏色描繪字形的邊緣，并用另一種顏色填充。通過只描邊文字而不填充內部，可以實現輪廓效果。

Webkit 引入了四個新的 CSS 屬性來支持文字描邊：

• text-fill-color：該屬性允許您為文字指定填充顏色。如果未設置，將使用color屬性進行填充。
• text-stroke-color：該屬性允許您為文字指定描邊顏色。如果未設置，將使用color屬性進行描邊。
• text-stroke-width：該屬性允許您指定描邊的寬度。默認為0，表示僅執行填充。您可以為此值指定一個長度，并且可以使用thin、medium和thick的值（'thin'最接近OS X的輪廓行為）。
• text-stroke：該屬性是兩個描邊屬性的簡寫。

從上面屬性解釋可以看到，我們實現鏤空效果，不一定要把 color 屬性設置為 transparent，也可以將 test-fill-color 屬性設置為 transparent 來實現。

3.text-stroke 兼容性

text-stroke 的兼容性還不太好，雖然被大多數瀏覽器所支持，但是仍然需要使用 webkit 前綴來標識。

使用 text-stroke 屬性時有幾個注意的點：

1. Firefox 和 Edge 瀏覽器僅支持 -webkit-text-stroke 屬性，而不是 -moz- 或者 -ms- 前綴。
2. 在 WebKit 中，文本描邊可以使用CSS Transition和 Animation 進行動畫處理，但動畫只能對描邊顏色進行處理，而不能對描邊寬度進行處理。