HTML-八股

1、DOM和BOM

  • DOM是表示HTML或者XML文檔的標準的對象模型，將文檔中每個組件（元素、屬性等）都作為一個對象，使用JS來操作這個對象，從而動態改變頁面內容，結合等。

    DOM是以樹型結構組織文檔內容，樹的根節點的document，代表整個文檔，document對象有許多屬性和方法

  • BOM是表示瀏覽器窗口或各個組件的對象模型，用于訪問和控制瀏覽器窗口及其各個部分，如歷史記錄、地址欄

    BOM的核心對象是window對象，表示瀏覽器的窗口，也是JS的全局對象，用于控制瀏覽器的各個方面，同時還提供了其他的一些對象，如navigator（提供瀏覽器相關信息）、location（url）、history（歷史記錄）

總的來講，DOM的用于訪問和操作網頁文檔的對象模型、BOM是控制瀏覽器窗口及其各個組件的模型

2、輸入網址到頁面顯示的過程

整的來講，這個過程可以分為6個階段

  • DNS解析，網站于IP地址的轉換，DNS解析是一個遞歸的過程，涉及到DNS的優化：DNS緩存、DNS負載均衡
  • 發起TCP連接：三次握手、四次揮手
  • 發送HTTP請求：構建HTTP請求報文通過TCP協議，發送至服務器指定端口；請求行、請求報頭、請求正文
  • 服務器處理并返回HTTP報文：解析，并封裝成HTTP Request對象，一般由Web服務器進行：Nginx、Tomcat。狀態碼、響應報頭、響應報文
  • 瀏覽器解析并渲染
  • 連接結束

3、前端中的圖片格式

- 圖片類型：

分為位圖和矢量圖（向量圖）；位圖：像素點拼起來的，矢量圖：記錄元素形狀和顏色算法，不會出現失真

- 壓縮類型
  • 無壓縮：不對圖片數據進行壓縮處理：BMP
  • 有損壓縮：進行部分處理、將相鄰的像素合并或者不重要重復內容忽略，壓縮圖片體積，壓縮算法不會對圖片的所有數據進行編碼壓縮，jpg
  • 無損壓縮：使用壓縮算法對圖片的所有數據進行編碼壓縮，圖片質量沒有損耗、可以完整恢復成所有的信息
- 圖片的位數：8，16，24，32

位數越大、表示的顏色越多、顏色過度更細膩

- 圖片格式

  1. GIF：lzw壓縮算法、采用8位壓縮、支持256種顏色、適用于色彩較少的圖片，最大的特性：幀動畫

  2. JPC/JPEG：有損壓縮格式、24位壓縮，容易造成圖像數據損失，支持漸進式加載、不支持透明、半透明

    漸進式：jpg文件包含多次掃描、順尋的存在在jpg文件，先顯示模糊，隨著掃描次數增加，逐漸清晰

  3. PNG：使用LZ77派生的無損數據壓縮算法、替代GIF格式，壓縮比高、生成文件體積小

    支持8、24、32位，支持透明、半透明、能夠徹底消除鋸齒邊緣、不支持動畫

  4. Webp：目標是減少文件大小，同時支持無損壓縮和有損壓縮，缺點在于現在瀏覽器的支持率不夠理想

  5. svg：用XML定義的語言、描述二維矢量及矢量2/柵格圖形，提供了三種類型的圖形對象：矢量圖形、圖像、文本。是可交互和動態的，可以在SVG文件中嵌入動畫元素或通過腳本定義動畫，武無論怎么放大都不會失真，文件大小也比較小比JPENG和PNG。缺點渲染成本高些

4、前端跨頁面通信

  1. localStorage和sessionStorage：一個頁面將數據存在在本地存儲中，另一個頁面通過監聽storage事件實現數據的讀取及其實時更新
  2. Cookies：通過設置和讀取Cookies，實現在同一個域名下的不同頁面之間的信息交互
  3. postmessage：window.postmessage()方法允許從一個窗口向另一個窗口發送消息，并且在目標窗口上觸發mesage事件，可以指定目標窗口的origin-特定窗口接收處理消息
  4. Broadcast Channel：該API允許同一個瀏覽器的不同上下文之間進行雙向通信，提供了一個類似發布-訂閱模式的機制，創建廣播頻道，并在不同的上下文中加入頻道，實現消息的廣播與接收
  5. SharedWorker：是一個可以由多個窗口或標簽共享的WebWorker，在不同頁面之間進行跨頁面通信，通過postmessage進行雙向通信
  6. IndexedDB：客戶端數據庫，一個頁面寫入數據，另一個頁面讀取數據
  7. webSocket：建立一個全雙工連接，在客戶端和服務端進行實時通信，在不同的頁面通過服務器傳遞數據并進行實時更新

5、DOM樹理解

  • 什么是DOM

    DOM就是將HTML文件字節流轉為渲染引擎能夠理解的內部結構，以樹型結構對HTML文檔進行表述

  • 作用：

    1. 頁面的視角來看：DOM是生成頁面的基礎數據結構
    2. 從JS腳本來看，DOM提供給JS腳本操作的接口，通過接口，JS進行訪問以及操作DOM節點，改變其樣式、內容
    3. 從安全角度來看:不安去的內容在DON解析階段就拒絕在外了

總而言之，DOM是表述HTML文件的內部數據結構，將JS和web頁面連接起來，并過濾一些不安去的內容

  • DOM樹如何生成：

    網絡進程和渲染進程之間有一個共享數據通道，網絡進程加載多少，就將數據數據傳給HTML解析器進行解析接收到數據后，就將其轉為DOM，具體來講主要經過以下幾個階段，字節流通過分詞器被分成token（片段），Token解析位DOM節點，再講DOM節點添加到DOM樹

  • JS對DOM的影響，解析到script標簽，會暫停DOM的解析，下載這段JS代碼并執行，執行完成后，HTML恢復解析過程，直至生成最終的DOM

6、行內元素、塊級元素、空元素

  • 行內元素：-斜體強調的文本，

  • 塊級元素：

    -

      1. 無序和有序列表
      2. :列表項

  • 空元素:沒有閉合標簽的元素

    -水平分割線

7、title和h1、b和strong、i和em區別

  • title和h1

    1. 用途不同：title定以HTML文檔的標題，通常顯示在瀏覽器的標簽上或者窗口的標題欄，對于SEO也很重要，h1表示文檔的主標題，通常顯示在頁面內容的頂部
    2. 所在位置不同：title位于html文檔的內，而h1位于內部
    3. 格式和樣式不同：title通常比較短，不需要進行格式化排版，而h1標簽中的文檔就不一樣了

  • b和strog

    b標簽用于指定文本加粗的外觀效果，通常只是為了強調關鍵詞，沒有較強的語義化含義。而strong表示文本的強調重點，具有更強的語義化含義，并且可以改變文本的語調和讀音

  • i和em

    i標簽用于指定文本斜體的外觀效果，通常只是為了強調關鍵詞，沒有較強的語義化含義。而em表示文本的強調重點，具有更強的語義化含義，并且可以改變文本的語調和讀音

HTML5中，i和b已經廢棄

8、什么是HTML語義化

通俗講就是從代碼層面展示頁面的結構而不是從最終視覺上展示結構，讓機器可以讀懂內容

優點：

  1. 開發者友好：使用語義類標簽增強了可讀性，開發者也能夠清晰地看出網頁的結構，也更為便于團隊的開發和維護。
  2. 搜索引擎友好： 有利于SEO，有利于搜索引擎 爬蟲 更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。
  3. 機器友好：語義類還可以支持讀屏軟件，根據文章可以自動生成目錄。方便特殊群體閱讀信息，比如屏幕閱讀器/盲人閱讀器對 strong 會有一個加重的讀音

9、script標簽為什么放在body標簽的底部

因為瀏覽器再渲染html時候是從上至下執行的，當遇到js時會停止當前頁面的渲染，轉而去下載js文件，如果放在頭部，在文件很大的情況下會造成頁面首屏加載時間很長。

解決：

  • 將script標簽放在body底部

  • 通過defer、async將js轉為異步加載

    defer屬性的作用是讓腳本在文檔解析完成之后再執行，而且會按照腳本在文檔中的先后順序執行。

    async屬性會使腳本在下載完成后立即執行，不會等待文檔解析完成，腳本的執行順序也不一定和它們在文檔中的順序相同

    <script src="script1.js" defer></script>
<script src="script2.js" async></script>

  • 通過 JavaScript 動態創建script標簽來實現異步加載。

    <script>// 創建script元素const script = document.createElement('script');script.src = 'script.js';// 設置async屬性（默認是true）script.async = true;// 將script添加到文檔中document.head.appendChild(script);
</script>

    這種方式可以完全控制腳本加載的時機

10、SSG

靜態網站生成-在構建時預先生成靜態頁面并部署到CDN或其他存儲服務中。

相比于傳統的動態網頁好處：

  • 加載速度快，提升用戶體驗和搜索引擎排名
  • 安全性高：沒有后臺代碼和數據庫，不易受SQL注入攻擊等
  • 成本低：不需要動態服務器等國設備，降低運維成本

11、HTML5

HTML5是HTML的新標準，主要目標就是不需要額外的插件如flash等就可以傳輸所有內容，動畫、視頻、豐富的圖像用戶頁面

與4.,0相比，文當聲明類型上簡單<!DOCTYPE html>,語義結構也有優勢，如

<header>

- 新特性
  • 首先HTML5為了更好的實踐Web語義化，增加了header、footer、nav、aside、article、section等語義化標簽。
  • 在表單方面，為了增強表單，為input增加color、email、date、range、url等類型，
  • 在存儲方面提供了sessionStorage、localStorage和離線存儲，通過這些存儲方式方便數據在客戶端的存儲和獲取，
  • 在多媒體方面規定了音頻和視頻元素audio和video；
  • 另外還有地理定位、canvas畫布、拖放、多線程編程的web workers和websocket協議

12、導致白屏加載時間長的原因及解決方案

結合輸入url到頁面的畫面顯示過程看，JavaScript會阻塞DOM的生成，而CSS樣式文件會阻塞JS的執行，因此要重點關注JS文件和樣式文件

  • 解決
    1. DNS解析優化
      • DNS緩存優化
      • DNS預加載策略
      • 穩定可靠的DNS服務器
    2. TCP網絡鏈路優化
    3. 服務端優化
      • 數據庫存儲優化
      • Redis緩存
      • 中間件
      • Gzip壓縮
    4. 瀏覽器下載，解析、渲染頁面優化
      • 精簡HTML的代碼和結構
      • 優化CSS文件和結構
      • 合理放置JS代碼，避免內聯
      • 將關鍵的CSS代碼內聯在HTML中，使得CSS快速的下載，提前渲染時間
      • 延遲首屏不需要的圖片加載

13、如何控制input輸入框的輸入字數

maxlength屬性進行限制，還可以監聽input事件，對輸入值處理，如截斷等

14、上傳圖片，怎么在選擇圖片后，通過瀏覽器預覽？

- 方法1：使用window.URL.createObjectURL方法為對象生成一個blob對象路徑

直接為文件創建內存中的臨時 URL（Blob URL），無需讀取文件內容，瀏覽器可直接訪問該 URL 顯示圖片。

  • BlobURL本質是瀏覽器內存中二進制數據（Blob 對象）的臨時引用，無需編碼轉換。由 URL.createObjectURL(blob) 生成，格式為 blob:<origin>/<uuid>。注意：需要手動調用 URL.revokeObjectURL() 釋放內存，否則會持續占用。
<!-- 選擇文件的輸入框 -->
<input type="file" onchange="imgChange(this)" /> 
<!-- 預覽用的 img 標簽 -->
<img id="previewImg" style="max-width: 300px;" /> <script>
// 任選上面一種 imgChange 函數即可
// 比如用 createObjectURL 的版本：
function imgChange(img) { document.querySelector("#previewImg").src = window.URL.createObjectURL(img.files[0]); 
}
</script>

瀏覽器把文件 “臨時映射” 成一個可訪問的 URL，直接給 img 當 src，無需等文件讀完（因為是 “引用”）。

  • 使用fileReader讀取器
    1. 創建FileReader對象
    2. 調用readerAsDataURL方法讀取文件
    3. 調用onload監聽事件
    4. 通過FileReader的result屬性拿到結果
function imgChange(img) { // 1. 新建 FileReader 實例：JS 里專門讀文件內容的工具const reader = new FileReader(); // 2. 監聽“讀取完成”事件：文件讀完后自動觸發reader.onload = function (ev) { // ev.target.result 就是讀取結果（dataURL 格式，類似 base64）document.querySelector("img").src = ev.target.result; }// 3. 發起“讀文件”操作：把文件轉成 dataURL（base64 字符串）reader.readAsDataURL(img.files[0]); 
}

需要將二進制數據編碼為 Base64 字符串，因此面對體積較大的圖像，這個操作比較慢，內存隨著DOM元素自動釋放

15、怎么實現“點擊返回頂部”的功能

- 錨點

在頁面頂部放置一個指定名稱的錨點連接，然后再頁面下方放置一個返回該錨點的連接，點擊連接既可以返回

<body style="">
<div id="top"></div><a href="top" style="position: fixed; right:0; bottom:0">回到頂部</a>
- scrollTop

這個屬性表示被隱藏在內容區域上方的像素數

為滾動時：scrollTop：0，垂直滾動>0,且表示元素上方不可見內容的像素寬度

- scrollTo

scrollTo(x,y)方法滾動當前window中顯示的文檔，因此設置scrollTo(0,0)位于顯示區域的左上角

- scrollBy()

滾動當前window中顯示的文檔，x和y指定滾動的相對量，通過 “往上滾等同于當前滾動距離” 的逆向操作，實現了 “回到頂部” 的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body style="height: 2000px;"><button id="test" style="position: fixed; bottom: 0; right: 0;">回到頂部</button><script>// 獲取按鈕元素const test = document.getElementById('test');test.onclick = function () {// 方法1：通過scrollTop = 0 實現// document.body.scrollTop = document.documentElement.scrollTop = 0;// 方法2： scrollTo(x,y)// scrollTo(0,0)// 方法3：scrollBy()// 獲取當前滾動的距離var top = document.body.scrollTop || document.documentElement.scrollTop;// 調用scrollByscrollBy(0, -top)}</script>
</body>
</html>

16、SEO

Search Engine Optimization： 搜索引擎優化

利用搜索引擎的搜索規則來提高目前網站在有關搜索引擎內的自然排名的方式，為了獲取更多的免費流量，從網站結構、內容、頁面等角度進行合理規劃，使其更符合搜索引擎的索引規則。

- 原理

一、爬行和抓取

搜索引擎靠 “蜘蛛 / 機器人” 程序，從已知網頁出發，像用戶瀏覽一樣訪問頁面、抓取內容，還會跟蹤頁面鏈接（爬行），發現新網址就存入數據庫（抓取）。反向鏈接（頁面被其他站點鏈接）超重要，沒它，搜索引擎可能都找不到頁面，更沒法參與排名，抓取的文件會和用戶瀏覽器看到的內容一致，存入數據庫待后續處理。

二、索引

抓取到的網頁文件，會被拆解、分析，把文字內容、關鍵詞位置 / 格式（字體、顏色等）等信息，以類似 “大表格” 的結構化形式存進索引數據庫，主流搜索引擎的索引庫能存幾十億級網頁，為后續檢索做準備。

三、搜索詞處理

用戶輸入關鍵詞后，搜索引擎會快速做 “中文分詞、停用詞過濾（像‘的’‘了’這類無意義詞）、拼寫糾錯、判斷是否需整合搜索” 等處理，確保理解用戶真實搜索意圖，為精準匹配網頁打基礎。

四、排序

基于處理后的搜索詞，從索引庫找含該詞的網頁，再用 復雜排名算法（要實時計算網頁與關鍵詞相關性、結合過濾規則，涉及幾十上百個影響因子 ），篩選出最相關、權威、優質的網頁，按規則排序后返回搜索結果。

簡單說，SEO 就是通過優化內容、鏈接、代碼等，讓網頁在 “爬行抓取→索引→詞處理→排序” 全流程里，更被搜索引擎認可，從而提升自然排名，讓用戶搜關鍵詞時，咱們的網頁能靠前展現，獲得更多流量 。

- 優化SEO

主要分為內部和外部

0 內部優化
  • Meta標簽優化：title、keywords、description（tdk）
  • 內部鏈接的優化：相關性鏈接（Tag標簽）、各導航鏈接、圖片鏈接
  • 網站內容更新：保證站內的更新
  • 服務端渲染
1 外部優化
  • 外部鏈接類別：相關、博客、貼吧、新聞等保持鏈接的多樣性
  • 外鏈運營：每天添加一定量的外部鏈接，使得關鍵詞排名上升
  • 外鏈選擇：與自己網站相關性好的網站交互友情鏈接

17、瀏覽器亂碼的原因

  • 網頁源碼的gbk的編碼，內容的中文文字是utf-8/程序從數據庫中調出呈現是utf-8編碼的內容也會，瀏覽器不能自動檢測網頁編碼
  • 程序查詢數據庫數據顯示前進行程序轉碼
  • 瀏覽器瀏覽時出現網頁亂碼，在瀏覽器中找到轉換編碼的菜單進行轉換

18、Canvas和SVG的區別

  • Canvas:畫布

    通過JS來繪制2D圖形，是逐像素進行渲染的，位置發生改變就會重新渲染

    特點：依賴分辨率、不支持事件處理器、能以.jpg或者.png格式保存圖像，適合游戲應用

  • svg

    可縮放矢量圖形，基于可擴展標記語言XML描述的2d圖形的語義，基于XML，就說明SVG DOM中每一個元素都是可用的，可以為其添加JS事件處理器

    特點：不依賴分辨率，支持事件處理器、適合帶有大型渲染區域的應用程序（谷歌地圖）、復雜度高會減慢渲染速度、不適合游戲應用

19、img的secret屬性作用

在響應式設計中，經常用到根據屏幕密度設置不同的圖片，secret屬性就用于設置不同密度下，ing會自動加載不同的圖片

  • 基礎：srcset="圖片地址 密度描述" ，如 srcset="image-256.png 2x" ，適配不同屏幕密度，目前屏幕密度1x,2x,3x,4x
  • 進階：結合 sizes用來設置圖片的尺寸零界點 ，srcset 帶 w 單位（如 128w ）指定圖片質量，sizes 設尺寸臨界點（如 (max-width: 360px) 340px, 128px ），這個表示默認128px,若是視區寬度大于360px則顯示340px

避免因屏幕差異加載不合適圖片，提升頁面加載效率與顯示效果 ，適配不同設備場景

20、label標簽

定義表單控件間關聯，點擊 label 時，瀏覽器自動聚焦關聯表單控件（如 input ）

  • 方式 1：label 的 for 屬性與表單控件 id 匹配，如 <label for="Name"> 對應 <input id="Name"> 應用：點擊文字聚焦輸入框

  • 方式 2：label 直接包裹表單控件，如 <label>Date:<input></label> 復選框

    <!-- 場景：注冊/登錄頁的“同意協議” -->
<label><input type="checkbox" name="agree"> 我已閱讀并同意 <a href="/agreement">《用戶協議》</a>
</label>

  • 提升交互體驗：擴大可點擊區域，用戶點文字就能操作表單控件（輸入框、單選 / 復選框等 ）。

  • 語義化清晰：讓表單結構更易讀（對開發者、屏幕閱讀器都友好，輔助無障礙訪問 ）。

21、頁面生命周期事件

  • DOMContentLoaded — 瀏覽器已經完全解析HTML，并構建DOM樹，但是像和樣式表并沒有加載完成
  • load：不僅加載完成HTML，也加載完成了所有外部資源：圖片、樣式
  • beforeunload/unload：用戶正離開頁面

總結：

  • DOMContentLoaded：DOM 準備就緒時，document 上觸發，可在此將 JavaScript 應用于元素；腳本（如 <script>...</script> 、<script src="..."></script> ）會阻塞它，圖片等資源可繼續加載
  • load：頁面和所有資源加載完成時，window 上觸發，因通常無需等太久，很少使用
  • beforeunload：用戶想離開頁面時，window 上觸發，取消的話瀏覽器會詢問是否真離開（如存在未保存更改時）
  • unload：用戶最終離開時，window 上觸發，處理程序僅能執行簡單操作，很少使用，可用 navigator.sendBeacon 發網絡請求

22、如何input上傳多張圖片

<input type="file" name="files" multiple />

  • 禁止展示輸入的歷史記錄

    規定輸入字段是否啟用自動完成的功能

<input type="text" autocomplete="off" />

23、能否使用自閉合標簽引入腳本

不可以，因為自閉和標簽的XML語法，不是HTML，只有不需要結束的空元素（ ）或者外部元素可以使用

24、meta標簽中的viewport的作用

用戶網頁的可視區域，視區

作用：控制網頁在移動設備等終端上的可視區域顯示，讓網頁適配不同設備屏幕，優化移動端瀏覽體驗，避免因虛擬視口與設備屏幕差異導致布局錯亂，可設置寬度、縮放等規則

viewport meta標簽大致如下

<meta name="viewport" content="width=device-width", initial-scale=1.0>

width=device-width 使視口寬度適配設備寬度；initial-scale=1.0 設初始縮放比例為 1 ；還有 height（設高度 ）、maximum-scale（最大縮放 ）、minimum-scale（最小縮放 ）、user-scalable（是否允許用戶手動縮放 ）等屬性

25、Web Socket怎么兼容低版本瀏覽器

  • Adobe Flash Socket：借助 Flash 實現類似 Socket 通信，利用 Flash 對舊瀏覽器的支持來模擬 WebSocket 功能
  • ActiveX HTMLFile (IE) ：針對 IE 瀏覽器，通過 ActiveX 控件的 HTMLFile 來實現特定通信邏輯，適配舊版 IE
  • 基于 multipart 編碼發送 XHR：用 XMLHttpRequest（XHR），以 multipart 編碼方式發送請求，模擬 WebSocket 雙向通信，讓不支持 WebSocket 的瀏覽器能實現類似長連接效果
  • 基于長輪詢的 XHR：通過 XHR 定時發起請求（長輪詢），服務端有數據變化就響應，模擬 WebSocket 實時通信，適配不支持 WebSocket 的瀏覽器 ，這些都是在瀏覽器原生不支持 WebSocket 時的替代手段 。

26、ifram是什么

在一個網站中嵌入另一個網站的內容

優點：

  1. ifram能夠原封不動的吧嵌入的網頁顯示出來
  2. 多個網頁引用ifram，只需要修改一個ifram的內容
  3. 針對加載緩慢的第三方內容（廣告等）使用ifram

缺點:

  1. 產生很多頁面，管理困難
  2. 不利于SEO，代碼復雜、框架太多的情況下
  3. 很多的移動端設備無法完全顯示框架，兼容性差
  4. ifram里面的樣式、腳本資源會增加請求次數、對于大型網站不可取
  5. ifram會阻礙頁面中的onload事件，給用戶加載很慢的感覺

27、常用的meta元素

  • meta標簽是head部的一個輔助性標簽，提供關于 HTML 文檔的元數據。它并不會顯示在頁面上，但對于機器是可讀的。可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（SEO），或其他 web 服務。

  • meta標簽里的數據是供機器解讀的，其主要作用有：搜索引擎優化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩沖，網頁定級評價，控制網頁顯示的窗口等等。

    http-equiv屬性

  1. charset 用以說明網頁制作所使用的文字以及語言
  2. cache-control、Pragma、Expires 設置網頁的過期時間，一旦過期則必須到服務器上重新獲取。
  3. refresh 定時讓網頁在指定的時間n內，跳轉到頁面
  4. set-cookie Cookie設定，如果網頁過期，存盤的cookie將被刪除。

  • name屬性

    <!-- 頁面關鍵詞 keywords -->
<meta name="keywords" content="your keywords"><!-- 頁面描述內容 description -->
<meta name="description" content="your description"><!-- 定義網頁作者 author -->
<meta name="author" content="author,email address">
<!-- 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow"><!-- 優先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- 禁止自動翻譯 -->
<meta name="google" value="notranslate"><!-- 禁止轉碼 -->
<meta http-equiv="Cache-Control" content="no-transform"><!-- 選擇使用的瀏覽器解析內核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

  • viewport – 對頁面視圖相關進行定義

  • property&content

    可以讓網頁變成富媒體對象，同意網頁杯其他網站引用，不會只是一個鏈接，會提取相關信息展示

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • Cache-Control 作用：定義請求和響應遵循的緩存機制，能聲明緩存內容、修改過期時間，可多次聲明

    no-transform：指令，要求不得對資源進行轉換或轉變

    no-siteapp：指令，用于禁止百度進行轉碼

    通過 <meta http-equiv="Cache-Control" content="no-transform"> 和 <meta http-equiv="Cache-Control" content="no-siteapp"> 這兩個 meta 標簽，分別設置對應 Cache-Control 指令，控制瀏覽器緩存及百度轉碼相關行為 。

  • theme-color

28、defer和async區別

二者都為解決腳本加載執行阻塞 DOM 渲染問題，讓腳本異步加載，不阻礙頁面渲染

  • 執行時機
    • defer：腳本按 HTML 中出現順序執行，在文檔解析完成（DOM 渲染完）、DOMContentLoaded 事件前執行
    • async：腳本加載完就執行，不保證順序，誰先加載好誰先執行
  • 場景適配
    • defer 適合依賴 DOM 或需按順序執行的腳本（如頁面初始化邏輯 ）
    • async 適合獨立無依賴腳本（如統計代碼 ）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/88580.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/88580.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/88580.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

ADI的EV-21569-SOM核心板和主板轉接卡的鏈接說明

ADI的EV-21569-SOM核心板和主板轉接卡的鏈接說明

ADI提供給客戶很多DSP的核心板&#xff0c;比如EV-21569-SOM&#xff0c;EV-21593-SOM&#xff0c;EV-SC594-SOM等&#xff0c;非常多&#xff0c;但是沒有底板&#xff0c;光一個核心板怎么用呢&#xff1f;于是我就在想&#xff0c;我的21569評估板就有通用底板&#xff0c;能…
閱讀更多...
基于 Redisson 實現分布式系統下的接口限流

基于 Redisson 實現分布式系統下的接口限流

在高并發場景下&#xff0c;接口限流是保障系統穩定性的重要手段。常見的限流算法有漏桶算法、令牌桶算法等&#xff0c;而單機模式的限流方案在分布式集群環境下往往失效。本文將介紹如何利用 Redisson 結合 Redis 實現分布式環境下的接口限流&#xff0c;確保集群中所有節點的…
閱讀更多...
ubuntu播放rosbag包（可鼠標交互）

ubuntu播放rosbag包（可鼠標交互）

1 前言 眾所周知&#xff0c;ubuntu中播放bag包最主要的工具是rviz&#xff0c;然而rviz有一個無法忍受的缺陷就是不支持鼠標回滾&#xff0c;并且顯示的時間的ros時間&#xff0c;不是世界時間&#xff0c;因此在遇到相關bug時不能與對應的世界時間對應。基于以上&#xff0c…
閱讀更多...
一文理解緩存的本質：分層架構、原理對比與實戰精粹

一文理解緩存的本質：分層架構、原理對比與實戰精粹

&#x1f4d6; 推薦閱讀&#xff1a;《Yocto項目實戰教程:高效定制嵌入式Linux系統》 &#x1f3a5; 更多學習視頻請關注 B 站&#xff1a;嵌入式Jerry 一文理解緩存的本質&#xff1a;分層架構、原理對比與實戰精粹 “緩存讓系統飛起來”——但每一層緩存有何不同&#xff1f;…
閱讀更多...
【離線數倉項目】——電商域DIM層開發實戰

【離線數倉項目】——電商域DIM層開發實戰

摘要本文主要介紹了電商域離線數倉項目中DIM層的開發實戰。首先闡述了DIM層的簡介、作用、設計特征、典型維度分類以及交易支付場景下的表示例和客戶維度表設計。接著介紹了DIM層設計規范&#xff0c;包括表結構設計規范、數據處理規范以及常見要求規范。然后詳細講解了DIM層的…
閱讀更多...
Unreal Engine 自動設置圖像

Unreal Engine 自動設置圖像

void UYtGameSettingSubsystem::RunHardwareBenchmark(int32 WorkScale, float CPUMultiplier, float GPUMultiplier) {UGameUserSettings* UserSettings UGameUserSettings::GetGameUserSettings();if (UserSettings){// 運行基準測試&#xff08;異步操作&#xff0c;可能需…
閱讀更多...
使用Spring Boot和PageHelper實現數據分頁

使用Spring Boot和PageHelper實現數據分頁

在Spring Boot項目中&#xff0c;利用PageHelper插件可以輕松實現數據分頁功能。以下是具體的實現步驟和代碼示例。添加依賴在項目的pom.xml文件中添加PageHelper和MyBatis的依賴。<dependency><groupId>com.github.pagehelper</groupId><artifactId>p…
閱讀更多...
【IT-Infra】從ITIL到CMDB，配置管理，資產管理，物理機與設備管理（含Infra系列說明）

【IT-Infra】從ITIL到CMDB，配置管理，資產管理，物理機與設備管理（含Infra系列說明）

【IT-Infra】從ITIL到CMDB&#xff0c;配置管理&#xff0c;資產管理&#xff0c;物理機與設備管理&#xff08;含Infra系列說明&#xff09; 文章目錄序&#xff1a;Infra系列說明1、ITIL 信息技術基礎架構庫&#xff08;起源&#xff09;2、CMDB 配置管理數據庫&#xff08;I…
閱讀更多...
vue使用printJS實現批量打印及單個打印 避免空白頁

vue使用printJS實現批量打印及單個打印 避免空白頁

本文介紹了使用print-js庫實現批量打印功能的實現方法。通過安裝print-js依賴后，創建一個batchPrintAction方法，該方法接收選中行數據，生成包含多個標簽頁的HTML字符串。每個標簽頁以表格形式展示6個數據字段，并設置了80mm50mm的標簽尺寸。方法使用PrintJS進行打印，配置了…
閱讀更多...
C++ 選擇排序、冒泡排序、插入排序

C++ 選擇排序、冒泡排序、插入排序

選擇排序&#xff1a;是一種簡單直觀的排序算法&#xff0c;每次均是選擇最小&#xff08;大&#xff09;的元素進行排序。選擇排序算法思想&#xff1a;1 在未排序序列中找到最小&#xff08;大&#xff09;元素&#xff0c;存放到排序序列的起始位置2 再從剩余未排序元素中繼…
閱讀更多...
Linux入門篇學習——Linux 編寫第一個自己的命令，make 工具和 makefile 文件

Linux入門篇學習——Linux 編寫第一個自己的命令，make 工具和 makefile 文件

目錄 一、Linux 編寫第一個自己的命令 1.命令的概念 2.定義一個自己的命令 二、make 工具和 makefile 文件 1.使用 make 工具 2.makefile文件 一、Linux 編寫第一個自己的命令 1.命令的概念 命令就是可執行程序。 比如說我們輸入 ls -al &#xff0c;ls 就是可執行程序的…
閱讀更多...
實驗一 接蘋果

實驗一 接蘋果

主要步驟蘋果樹制作&#xff08;蘋果與籃子的制作同理&#xff09;為蘋果添加標簽相機位置設置與游戲面板長寬比設置&#xff08;16:9&#xff09;蘋果下落設置&#xff08;將蘋果從平拋運動改為垂直下落&#xff09;通過設置物理圖層并更改碰撞矩陣表實現通過PlayerPrefs實現游…
閱讀更多...
Nginx服務器集群：橫向擴展與集群解決方案

Nginx服務器集群：橫向擴展與集群解決方案

橫向擴展&#xff1a;基礎概念 在深入了解Nginx的橫向擴展細節之前&#xff0c;首先理解橫向擴展的含義及其重要性。橫向擴展是指通過增加服務器數量來分散負載并提升整體性能。這與縱向擴展形成對比&#xff0c;縱向擴展是指在單個服務器上增加更多資源&#xff08;如CPU、內…
閱讀更多...
缺陷的生命周期（Bug Life Cycle）是什么？

缺陷的生命周期（Bug Life Cycle）是什么？

一、缺陷生命周期的定義缺陷生命周期是指一個Bug從被發現到最終關閉的完整流程&#xff0c;反映了缺陷在不同角色&#xff08;測試、開發、產品等&#xff09;間的流轉狀態。它是軟件測試流程的核心管理模型&#xff0c;直接影響團隊協作效率。二、標準缺陷生命周期階段以下是通…
閱讀更多...
AtCoder Beginner Contest 333（A,B,C,D,E,F）

AtCoder Beginner Contest 333（A,B,C,D,E,F）

AtCoder Beginner Contest 333 A 題意 輸出n個n(n<9) 代碼 #include<bits/stdc.h> using namespace std; void solve(){int n;cin>>n;for(int i1;i<n;i)cout<<n; } signed main(){ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);int T__1;//cin…
閱讀更多...
留學真相：凌晨兩點被海關攔下時，我才明白人生沒有退路

留學真相：凌晨兩點被海關攔下時，我才明白人生沒有退路

> 獨立不是選擇&#xff0c;而是生存的必修課下飛機那一刻&#xff0c;幻想中的“鍍金生活”瞬間崩塌。倫敦海關凌晨兩點的燈光下&#xff0c;你顫抖著翻找學校文件&#xff0c;手機信號格空空如也&#xff1b;大巴誤點后&#xff0c;你拖著兩個32公斤的行李箱站在陰雨中&am…
閱讀更多...
探索AIGC領域DALL·E 2的圖像生成與人類創意的融合

探索AIGC領域DALL·E 2的圖像生成與人類創意的融合

探索AIGC領域DALLE 2的圖像生成與人類創意的融合關鍵詞&#xff1a;AIGC、DALLE 2、圖像生成、人類創意、創意融合摘要&#xff1a;本文聚焦于AIGC領域中DALLE 2的圖像生成技術與人類創意的融合。首先介紹了相關背景&#xff0c;包括DALLE 2的發展歷程和人類創意在藝術創作中的…
閱讀更多...
【ECharts】多個ECharts版本共存解決方案

【ECharts】多個ECharts版本共存解決方案

多個ECharts版本共存解決方案 在單個HTML頁面中使用多個ECharts版本的關鍵在于避免全局命名空間沖突。下面我將展示一個完整的解決方案&#xff0c;包含兩種不同的實現方法。 解決方案思路命名空間隔離法&#xff1a; 使用不同的全局變量名保存不同版本的ECharts在加載新版本前…
閱讀更多...
力扣熱門算法題 204.計數質數，207.課程表，213.打家劫舍II

力扣熱門算法題 204.計數質數，207.課程表，213.打家劫舍II

力扣熱門算法題 204.計數質數&#xff0c;207.課程表&#xff0c;213.打家劫舍II&#xff0c;每題做詳細思路梳理&#xff0c;配套Python&Java雙語代碼&#xff0c; 2025.07.07 可通過leetcode所有測試用例。 目錄 204.計數質數 解題思路 完整代碼 207.課程表 解題思…
閱讀更多...
深入理解 macOS 的 quarantine、xattr 與 Gatekeeper

深入理解 macOS 的 quarantine、xattr 與 Gatekeeper

在 macOS 上安裝第三方應用時&#xff0c;你是否遇到過如下提示&#xff1f; “xxx.app 已損壞&#xff0c;無法打開。”“無法打開‘xxx.app’&#xff0c;因為它來自身份不明的開發者。”“你確定要打開這個應用嗎&#xff1f;它是從互聯網下載的。” 這些提示背后&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023