前端面试题：浏览器如何解析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等分剩余可用空间，可以使元素达到垂直居中效果。可以尝试调整四个方向的值，看看box-item位置是怎么移动的。

无依赖的绝对定位

当绝对定位没有设置四周定位尺寸时，会发生神奇的一幕，当前元素没有相对于最近的非 static 祖先元素定位，而是在当前位置不变，并且当前元素脱离文档流，不占据页面空间。这个特性某些情况下非常有用，比如给box-card加一个图标，借助无依赖定位 + padding/margin即可。写法比较简洁，建议尝试一下。

小结

比起其他的开发语言，想要深入了解CSS，并不是一件容易事，大多数人都是停留在用的基础上，知道这个属性/方法，至于为什么会这样了解较少。张鑫旭大佬CSS高度让人叹为观止，继续加油吧！！！

何保持页面样式基本不变的前提下将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小时内与您取得联系。

整合营销服务商