為什麼前端優化時要避免空的src
直覺告訴我這種說法可能不太準確，於是決定驗證一下。
而且，由於驗證的是對瀏覽器渲染的影響，瀏覽器的渲染過程需要了解： 瀏覽器渲染過程
我把驗證中使用的標籤分成了兩組：有無href組和有無src組，href組驗證的標籤有、，src組以標籤為例。
首先，我建立了乙個空白文件，文件中有 1000 個 標籤，就像這樣：
由於編輯器一般都支援 emmet 語法，所以這一步很好做，也就用時 1s 左右。
然後在瀏覽器中開啟它，並選擇 developer tools 中的 performance，進行錄製，得到的結果如圖：
一張圖並不能看出來什麼，我們需要把href屬性刪掉，重新錄製一次：
和上一張圖很重合，每條關鍵時間線的位置也很相似，多次試驗下來兩組資料彷彿沒有什麼不同。
如果把頁面中的元素換成 1000 個標籤，有無空href的試驗結果也很是相似，姑且可以認為href不是很影響頁面渲染速度。
步驟同上，建立了有一千個 img 標籤的文件：
用 performance 錄製如下：
然後刪掉src屬性，錄製如下：
emmmm，差別就比較大了。從載入時間上看，有src且src為空的用例用時1940ms, 而沒有src的用例用時只有不到 400ms。
在有src且src為空的用例中，domcontentloaded事件觸發與loaded事件觸發之間的時間比較長，隔了有 1550ms 左右，而後者只有 30ms 左右。
仔細觀察之後會發現，第一張圖的domcontentloaded與loaded之間幾乎全是 type 型別為 error 的事件：
emmmm，看上去這些 error 是載入src裡的資源（其實是空的）失敗的事件，於是驗證一下：
建立乙個有 1000個img標籤的文件，保留 5 個標籤有空的src屬性，其他的標籤全部刪除src屬性。然後執行錄製如下：
雖然domcontentloaded與loaded中間穿插了乙個很大塊的 layout，但是仔細數一下黃色的小塊塊，一共有5個 type 是 error 的 event。
至此可以驗證：瀏覽器在渲染過程中會把src屬性中的空內容進行載入，直至載入失敗，影響domcontentloaded與loaded事件之間的資源準備過程，拉長了首屏渲染所用的時間。
通過實驗我們可以得出乙個結論：避免使用空的src屬性確實可以縮減瀏覽器首屏渲染的時間，因為瀏覽器在渲染過程中會把src屬性中的空內容進行載入，直至載入失敗，影響domcontentloaded與loaded事件之間的資源準備過程，拉長了首屏渲染所用的時間；但空的href屬性對首屏渲染的影響比較小。
為什麼要避免標題關鍵詞重複？
日常seo優化中，我們每天需要編寫大量文章，內容中會多次出現重複性關鍵詞，這是一件蠻正常的事情，很多人用關鍵詞重複來增加關鍵詞的密度，這也是可以理解的，但為什麼有人強調，核心關鍵詞最好在文章標題中只程式設計客棧出現一次呢?我們為什麼要避免標題關鍵詞重複呢?1 內部關鍵詞競爭 很明顯，如果你多次使用程...
為什麼web前端開發要學習後台語言
隨著多裝置 瀏覽器和 web 標準的演變革命，前端正在成為兼顧邏輯 效能 互動 體驗的綜合性崗位。web 可能是最有影響力的平台和環境之一，在那裡執行的程式必須被小心對待。一位優秀的前端工程師不僅要考慮 web 技術和語言，並且還要了解所有不同的元件 系統和概念。為什麼web前端開發要學習後台語言 ...
SEO排名優化，為什麼要常看日誌？
在做seo的過程中，我們總是會遇到各種莫名其妙的問題，比如 某一天你的 突然出現收錄緩慢的問題，而平時都是秒收錄。最開始我們在做審查的時候，總是在思考 是否搜尋引擎演算法在調整。是否自己的內容質量不高。是否是普遍大眾的情況。通常這類爬蟲主要分為如下幾種型別 映象的 爬蟲，通常都會進行偽裝。極個別的資...