前端面試題：瀏覽器如何解析HTML文件？

覽器解析HTML文件的過程是網頁呈現的關鍵步驟之一。具體介紹如下：

HTML文檔的接收和預處理

網絡請求處理：當用戶輸入URL或點擊鏈接時，瀏覽器發起HTTP請求，服務器響應并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網絡通信操作。
預解析優化：為了提高性能，現代瀏覽器在主線程解析HTML之前會啟動一個預解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續渲染過程的順暢進行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標記轉化為符號序列，然后通過句法分析器按照HTML規范構建出DOM樹。每個節點代表一個HTML元素，形成了多層次的樹狀結構。
生成對象接口：生成的DOM樹是頁面元素的結構化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態修改頁面內容和結構。

CSS解析與CSSOM樹構建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標簽引入的外部CSS文件和<style>標簽中的內聯CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應的樣式能夠被準確計算。這些計算過程為后續的布局提供必要的樣式信息。

JavaScript加載與執行

阻塞式加載：當解析器遇到<script>標簽時，它會停止HTML的解析，轉而先加載并執行JavaScript代碼。這是因為JS可能會修改DOM結構或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進行JS的加載和執行，而不阻塞HTML解析。

渲染樹的構建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節點及對應的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關注<body>內的可視化內容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節點開始，遞歸地計算每個節點的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續繪制的基礎。
布局過程的優化：現代瀏覽器會盡量優化布局過程，例如通過流式布局的方式減少重復計算，確保高效地完成布局任務。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進行繪制，這樣只需更新變化的部分。

因此，我們開發中要注意以下幾點：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預處理器：合理組織CSS文件的結構和覆蓋規則，利用CSS預處理器進行模塊化管理。
利用瀏覽器緩存機制：通過設置合理的緩存策略，減少重復加載相同資源，提升二次訪問的體驗。
優化圖片和多媒體資源：適當壓縮圖片和優化多媒體資源的加載，減少網絡傳輸時間和渲染負擔。

綜上所述，瀏覽器解析HTML文件是一個復雜而高度優化的過程，涉及從網絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發者需要深入理解這些步驟，以優化網頁性能和用戶體驗。通過合理組織HTML結構、優化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執行，可以顯著提升頁面加載速度和運行效率。

言

我們經常使用CSS，但是卻不怎么了解CSS，本文主要對vertical-align、BFC、position中開發過程不怎么注意的特性進行簡要總結，從本文中，你將了解到以下內容：

vertical-align為何時靈時不靈
BFC是什么？有何作用
絕對定位的奇淫技巧

CSS特性

vertical-align為什么時靈時不靈

生效條件

只能應用在display為inline、inline-block、inline-table、table-cell上。

有個高頻面試題，“如何使一個不定寬高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。這個回答是減分的，至少在某種程度上給人一種感覺CSS基礎比較薄弱。

內聯元素垂直居中對齊

開發中會遇到用字幕x代替關閉icon，用...顯示溢出或者加載中。但是會發現字母x、省略號并沒有與文本垂直方向居中對齊，這是因為文本默認是基線對齊，x、省略號默認底部在基線處。如下圖所示：

如下，為文本對齊demo:

<div class="container">
  <span>你好，世界</span>
  <span class="more">...</span>
</div>

實際顯示效果如下：

如果要實現垂直居中，利用vertical-align，搭配line-height即可，vertical-align不僅可以設置middle/top/bottom/baseline...關鍵字，也可以設置常用的度量單位，正負值均可，使用比較靈活。為什么要給.more設置line-height屬性呢？其實是因為line-height屬性可以繼承，如果不縮小.more的行高，就會撐大父元素的尺寸。

<style>
  .container{
    font-size: 64px;
    line-height: 64px;
  }
  .more{
    line-height: 16px;
    vertical-align: 16px;
  }
</style>

BFC究竟有什么作用

什么是BFC

BFC全稱block formatting context，即“塊狀格式化上下文”，與外界元素相對獨立的一片區域，具有以下特性：

計算BFC高度時，浮動元素也參與計算
屬于同一BFC容器的元素垂直方向的margin會合并
BFC容器是獨立容器，不會影響外部元素的布局

利用BFC的特性，我們可以實現以下功能：

清除浮動
防止垂直方向margin合并
實現多欄彈性布局

BFC的生效條件

以下CSS屬性會觸發元素生成BFC結界:

根元素（<html>）
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 為 absolute 或 fixed）
行內塊元素（元素的 display 為 inline-block）
表格單元格（元素的 display 為 table-cell，HTML表格單元格默認為該值）
表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
匿名表格單元格元素（元素的 display 為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別- 是HTML table、row、tbody、thead、tfoot 的默認屬性）或 inline-table）
overflow 計算值(Computed)不為 visible 地塊元素
display 值為 flow-root 的元素
contain 值為 layout、content 或 paint 的元素
彈性元素（display 為 flex 或 inline-flex 元素的直接子元素）
網格元素（display 為 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會創建一個新的BFc

BFC使用案例

清除浮動

<style>
  .container{
    /* overflow: hidden; */
    /* position: absolute; */
    /* float: left; */
  }
  .left{
    float: left;
    width: 200px;
    height: 200px;
  }
</style>
<div class="container">
  <div class="left"></div>
</div>

以上代碼，container容器高度為0，因為子元素left浮動。我們只需要把container容器轉成BFC容器，即可清楚浮動，注釋的幾種方法都可以。

防止垂直方向margin合并

<style>
  .blue, .red-inner {
    height: 50px;
    margin: 10px 0;
  }

  .blue {
    background: blue;
  }

  .red-outer {
    overflow: hidden;
    background: red;
  }
</style>
<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>

自適應布局

左側固定，右側自適應。

<style>
  .left{
    height: 200px;
    width: 200px;
    float: left;
    background-color: burlywood;
  }
  .right{
    height: 200px;
    margin-left: 200px;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

絕對定位還能玩出什么花樣

簡介

絕對定位使用場景非常多。絕對定位元素脫離文檔流，相對于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。我們通常都是設置垂直方向與水平方向的的位置，如果四個方向都不設置或者四個方向都設置會出現什么彩蛋呢？下文會給出揭曉。

left/top/right/bottom都有值的定位

當對立位置（left與right，top與bottom）都設置值且元素沒用固定寬高

此時元素的寬高是根據元素位置決定的，張鑫旭大佬在《CSS世界》中定義為格式化寬高，如下代碼，最終box-item的寬高計算為：width = 200 - 50 -50 = 100px;width = 200 - 50 -50 = 100px;

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
    background-color: coral;
  }
</style>
 <div class="box">
    <div class="box-item"></div>
  </div>

這種行為特性對于我們做自適應布局非常有用，而且兼容性非常好，比如我們要做左側固定寬度，右側自適應，除了以上BFC的寫法，我們還可以采用以下方法：

<style>
  .container{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
  }
  .left{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: burlywood;
  }
  .right{
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

當對立位置都設置了值且元素設置了固定寬高

這個時候你會發現，元素的寬高時以width/height為準，上述說的格式化寬度、高度并沒有生效。這是因為在高度計算過程中，元素的內部尺寸優先級大于外部尺寸，width/height影響的是元素內部尺寸，絕對定位影響的是外部尺寸，當元素絕對定位四個方向都設置值，此時外部尺寸會被內部尺寸覆蓋，導致實際元素寬度是width/height的值。

我們經常用margin: 0 auto;實現元素水平居中，但是不定寬高元素垂直水平居中就有些麻煩。但是有個神奇的現象，絕對定位配合margin: auto;，可以實現元素垂直水平居中，如下所示：

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    margin: auto;
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: coral;
  }
</style>
<div class="box">
  <div class="box-item"></div>
</div>

出現這種現象是因為margin:auto本質上是平分元素剩余可用空間，塊級元素一般是水平方向自動充滿，垂直方向順序排列。平常我們用margin: 0 auto;之所以能夠使塊級元素水平居中，是因為水平方向元素存在剩余可用空間，而auto平分剩余可用空間，因此就產生居中效果。而垂直方向不存在剩余可用空間，因此無法垂直居中。
上述demo，box-item之所以能夠垂直居中，得益于top/bottom設置了值，使元素產生高度100%的外部尺寸，而width/height固定元素的內部尺寸，使得 外部尺寸高度-內部尺寸高度=元素剩余可用空間高度，而auto等分剩余可用空間，可以使元素達到垂直居中效果?？梢試L試調整四個方向的值，看看box-item位置是怎么移動的。

無依賴的絕對定位

當絕對定位沒有設置四周定位尺寸時，會發生神奇的一幕，當前元素沒有相對于最近的非 static 祖先元素定位，而是在當前位置不變，并且當前元素脫離文檔流，不占據頁面空間。這個特性某些情況下非常有用，比如給box-card加一個圖標，借助無依賴定位 + padding/margin即可。寫法比較簡潔，建議嘗試一下。

小結

比起其他的開發語言，想要深入了解CSS，并不是一件容易事，大多數人都是停留在用的基礎上，知道這個屬性/方法，至于為什么會這樣了解較少。張鑫旭大佬CSS高度讓人嘆為觀止，繼續加油吧?。。?/p>

何保持頁面樣式基本不變的前提下將HTML頁面導出為PDF，下面提供一些示例代碼，純屬個人原創，如對你有幫助請記得加關注、加收藏、點贊、轉發、分享~謝謝~~

基本思路：保持頁面樣式基本不變，使用 `html2canvas` 將頁面轉換為圖片，然后再通過 `jspdf` 將圖片分頁導出為PDF文件（中間會遇到圖片或文字等內容在分頁處被切割開的問題，如何解決了？詳見末尾干貨)

上基礎代碼：下面為項目中實際代碼截取

<div>
    <!-- 要打印的內容區 -->
    <div ref="contentRef">
        <div class="print-item print-out-flow">這是脫離文檔流的內容區域</div>
        <div class="print-item">這是一行內容，也是最小葉子元素內容</div>
    </div>
    <!-- 打印內容容器 -->
    <div ref="printContainerRef" class="print-container"></div>
</div>

/**
  * 1.使用一個隱藏div裝載有滾動條的div.innerHTML
  * 2.隱藏div使用position: absolute, z-index: -999, left: -9999px, width: 900px 控制讓用戶無感知
  * 3.根據需要覆寫隱藏div內html樣式(例如textarea多行顯示有問題, 可以新增一個隱藏的div
  *    包裹textarea的綁定值, 然后在打印樣式中覆寫樣式, 隱藏textarea并顯示對應div)
  */
handleExport() {
   // 下面是VUE組件內獲取DOM元素代碼，將內容放置到打印區（定義的隱藏DIV）中
    const contentRef = this.$refs.contentRef as HTMLElement;
    const printContainerRef = this.$refs.printContainerRef as HTMLElement;
    // 打印區的需額外處理絕對定位值, 調整使得第一個元素的.top值為0, 以便于頁面計算
    printContainerRef.innerHTML = contentRef.innerHTML;	
    
    // 所有葉子div元素加上 print-item 樣式名, 脫離文檔流的額外添加 print-out-flow
    handlePrintItem(printContainerRef);  // 解決多頁內容可能被切割問題
    
    html2canvas(printContainerRef, {allowTaint: false, useCORS: true}).then((canvas: any) => {
      const contentHeight = canvas.height;
      const contentWidth = canvas.width;
      // pdf每頁顯示的內容高度
      const pageHeight = contentWidth / 595.28 * 841.89;
      // 未生成pdf的頁面高度
      let offsetHeight = contentHeight;
      // 頁面偏移值
      let position = 0;
      // a4紙的尺寸[595.28, 841.89], canvas圖片按a4紙大小縮放后的寬高
      const imgWidth = 595.28;
      const imgHeight = 595.28 / contentWidth * contentHeight;

      const dataURL = canvas.toDataURL('image/jpeg', 1.0);
      const doc = new jsPDF('p', 'pt', 'a4');

      if (offsetHeight < pageHeight) {
        doc.addImage(dataURL, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (offsetHeight > 0) {
          doc.addImage(dataURL, 'JPEG', 0, position, imgWidth, imgHeight);
          offsetHeight -= pageHeight;
          position -= 841.89;

          if (offsetHeight > 0) {
            doc.addPage();
          }
        }
      }

      doc.save(this.generateReportFileName());
      printContainerRef.innerHTML = '';
    });
}

上干貨代碼：上面分頁導出PDF可能網上能看到類型代碼，但絕對找不到下面的代碼，純手搓解決分頁元素被切開問題（思路：獲取自身定位，如自己剛好在被分頁處，則加上一定的margin-top值將內容向下移）

/** 
 * 處理打印元素項, 修復分頁后被切割的元素
 * @param printContainerRef 打印內容div容器
 * @param itemClassName 打印最小元素標識類名
 * @param outFlowClassName 脫離文檔流的元素標識類名
 */
export function handlePrintItem(
  printContainerRef: HTMLElement,
  itemClassName: string = 'print-item',
  outFlowClassName: string = 'print-out-flow'
): void {
  const rootClientRect = printContainerRef.getBoundingClientRect();
  // 初始化頁面相關數據
  const totalHeight = rootClientRect.height;  // 內容總高度
  const a4PageHeight = (printContainerRef.clientWidth / 595.28) * 841.89; // a4紙高度
  let pageNum = Math.ceil(totalHeight / a4PageHeight);  // 總頁數
  let addPageHeight = 0;  // 修正被分割元素而增加的頁面高度總和
  let currentPage = 1;  // 當前正在處理切割的頁面
  const splitItemObj: { [key: number]: HTMLElement[] } = {};  // 內容中各頁被切割元素存儲對象

  const printItemNodes: NodeListOf<HTMLElement> = printContainerRef.querySelectorAll(`.${itemClassName}`);
  for (let item of printItemNodes) {
    // 如果當前頁已經是最后一頁, 則中斷判斷
    if (currentPage >= pageNum) {
      break;
    }

    // 獲取元素絕對定位數據
    const clientRect = item.getBoundingClientRect();
    let top = clientRect.top;
    const selfHeight = clientRect.height;
    // 如果當前元素距離頂部高度大于當前頁面頁腳高度, 則開始判斷下一頁頁腳被切割元素
    if (top > currentPage * a4PageHeight) {
      // 換頁前修正上一頁被切割元素
      addPageHeight += fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
      pageNum = Math.ceil((totalHeight + addPageHeight) / a4PageHeight);
      top = item.getBoundingClientRect().top;
      currentPage++;
    }
    // 如果元素剛好處于兩頁之間, 則記錄該元素
    if (top > (currentPage - 1) * a4PageHeight && top < currentPage * a4PageHeight && top + selfHeight > currentPage * a4PageHeight) {
      if (!splitItemObj[currentPage]) {
        splitItemObj[currentPage] = [];
      }
      splitItemObj[currentPage].unshift(item);
      // 如果當前元素是最后一個元素, 則直接處理切割元素, 否則交由處理下一頁元素時再處理切割
      if (item === printItemNodes[printItemNodes.length - 1]) {
        fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
      }
    }
  }
}

/**
  * 修復當前頁所有被切割元素
  * @param currentPage 當前頁
  * @param pageHeight 每頁高度
  * @param splitElementItems 當前被切割元素數組
  * @param outFlowClassName 脫離文檔流的樣式類名
  */
function fixSplitItems(
  currentPage: number,
  pageHeight: number,
  splitElementItems: HTMLElement[],
  outFlowClassName: string
): number {
  if (!splitElementItems || !splitElementItems.length) {
    return 0;
  }

  const yMargin = 5;  // y方向距離頁眉的距離
  const splitItemsMinTop = getSplitItemsMinTop(splitElementItems);
  if (!splitItemsMinTop) {
    return 0;
  }

  let fixHeight = currentPage * pageHeight - splitItemsMinTop + yMargin;
  const outFlowElement = splitElementItems.find((item) => item.classList.contains(outFlowClassName));
  if (outFlowElement && outFlowElement.parentElement) {
    const parentPreviousElement = outFlowElement.parentElement.previousElementSibling as HTMLElement;
    fixHeight += getMarinTopNum(parentPreviousElement, outFlowElement.parentElement);
    outFlowElement.parentElement.style.marginTop = `${fixHeight}px`;
    return fixHeight;
  }

  splitElementItems.forEach((splitElement) => {
    splitElement.style.marginTop = `${fixHeight}px`;
  });
  return fixHeight;
}

/**
  * 獲取被切割元素數組中最小高度值（如一行有多個元素被切割，則選出距離頂部最小的高度值）
  * @param splitElementItems 當前被切割元素數組
  */
function getSplitItemsMinTop(
  splitElementItems: HTMLElement[]
): number | undefined {
  // 獲取元素中最小top值作為基準進行修正
  let minTop: number | undefined;
  let minElement: HTMLElement | undefined;
  splitElementItems.forEach((splitElement) => {
    let top = splitElement.getBoundingClientRect().top;
    if (minTop) {
      minTop = top < minTop ? top : minTop;
      minElement = top < minTop ? splitElement : minElement;
    } else {
      minTop = top;
      minElement = splitElement;
    }
  });

  // 修正當前節點及其前面同層級節點的margin值
  if (minTop && minElement) {
    const previousElement = splitElementItems[splitElementItems.length - 1].previousElementSibling as HTMLElement;
    minTop -= getMarinTopNum(previousElement, minElement);
  }
  return minTop;
}

/**
  * 通過前一個兄弟元素和元素自身的位置確認一個距離頂部高度修正值
  * @param previousElement 前一個兄弟元素
  * @param curElement 當前元素
  */
function getMarinTopNum(previousElement: HTMLElement, curElement: HTMLElement): number {
  let preMarginNum = 0;
  let curMarginNum = 0;
  if (previousElement) {
    // 獲取外聯樣式需要getComputedStyle(), 直接.style時對象的值都為空
    const previousMarginBottom = window.getComputedStyle(previousElement).marginBottom;
    preMarginNum = previousMarginBottom ? Number(previousMarginBottom.replace('px', '')) : 0;
  }
  const marginTop = window.getComputedStyle(curElement).marginTop;
  curMarginNum = marginTop ? Number(marginTop.replace('px', '')) : 0;
  return preMarginNum > curMarginNum ? preMarginNum : curMarginNum;
}

以上純原創！歡迎加關注、加收藏、點贊、轉發、分享（代碼閑聊站）~

在線咨詢

上一篇：來看看HTML5培訓從入門到精通都學哪些
下一篇：css免費視頻教程，從實戰入門著手

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商