前端八股总结-CSS+HTML+页面渲染（持续更新）

Last updated on November 3, 2024 pm

CSS+HTML

https://codepen.io/pen在线编辑器

（1）CSS

0、CSS3增加的新特性

  • 2d，3d变换
  • Transition, animation
  • 媒体查询
  • 新的单位（rem, vw，vh 等）
  • 圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），
  • 旋转（transform）
  • rgba

1、outline-width

用于设置元素外轮廓线的宽度。它通常与 outline 结合使用，用来绘制围绕元素的轮廓线，但不会影响元素的布局（即不会占据空间）。

🐦属性值：

  • medium：默认值，表示中等宽度的轮廓线
  • thin：较细
  • thick：较粗
  • <length>：可以设置具体的长度值。

注意：

  • outline-width 必须与 outline-style 一起使用，否则轮廓线不会显示。
  • 与 border 不同，outline 不会影响元素的尺寸，也不会改变文档的布局。

2、长度单位

@绝对单位

表示的是固定的值，常用于打印媒体或者需要精确布局的场景。在屏幕设备上可能有不一致的显示效果，因为设备的分辨率各不相同。pt（磅）：1pt = 1/72 英寸，常用于打印。pc（派卡）：1pc = 12pt，用于印刷领域。cm（厘米）：厘米，用于精确布局或印刷。mm（毫米）：毫米，同样适用于印刷或精确布局。in（英寸）：1in = 2.54 厘米，常用于打印输出。

  • px（像素）：屏幕上的一个物理像素。最常用的单位。
@相对单位

相对单位依赖于其他属性值（如父元素的字体大小、视口大小等），因此更适合响应式设计。

🐦与字体相关：

  • em：相对于父元素的字体大小。1em 表示父元素的字体大小，2em 则是父字体大小的两倍。比如，如果父元素的字体大小是 16px，1em = 16px。
  • rem（根元素的 em）：相对于根元素（通常是 <html>）的字体大小。它避免了 em 的嵌套影响，常用于构建响应式布局。例如，如果 <html> 的字体大小是 16px，那么 1rem 就是 16px。

🐦与视口相关：

  • vw（视口宽度）：1vw 等于视口宽度的 1%。假设视口宽度是 1000px，1vw 就是 10px。
  • vh（视口高度）：1vh 等于视口高度的 1%。例如，如果视口高度是 900px，那么 1vh 就是 9px。
  • vmin：视口的宽度和高度中较小的那个值的 1%。例如，视口宽度为 1200px，高度为 800px，1vmin = 8px。
  • vmax：视口的宽度和高度中较大的那个值的 1%。以宽度 1200px、高度 800px 为例，1vmax = 12px。

3、链接的伪类顺序

我们使用伪类来表示链接的不同状态，如 :link、:visited、:hover 和 :active。这些伪类应按以下顺序进行定义，以确保正确的样式应用

  • :link — 未访问的链接状态（默认状态）。
  • :visited — 已访问的链接状态
  • :hover — 当鼠标悬停在链接上时的状态。
  • :active — 链接被点击时的状态。

4、清除浮动

在 CSS 中，浮动（float）是一种常见的布局方式，但使用浮动时容易出现父元素高度塌陷的问题（即父元素无法包裹子元素）。要解决这个问题，需要清除浮动。

🌸使用clear属性

给浮动元素之后的元素加上clear属性可以避免浮动元素影响后续布局。

clear属性有三个值：🔸clear: left;🔸clear: right;🔸clear: both;

🌸给父元素添加overflow属性

常见的值是auto或hidden，这样可以自动清除浮动并让父元素包裹住浮动的子元素。

🌸clearfix
  • 给父元素添加clearfix的样式类；
  • 使用伪元素::after，创建一个内容为空、显示为块级元素的子元素，并设置clear: both
1
2
3
4
5
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
🌸使用flexbox或grid布局

在现代 CSS 布局中，推荐使用 flexbox 或 grid 来替代浮动布局。这些新布局方式不仅能避免浮动带来的问题，还能实现更灵活的布局效果。

5、相对定位和绝对定位

🌝相对定位（仍在文档流）

position: relative

相对定位是相当于元素自己在文档中的正常位置进行偏移的。也就是说，当元素是相对定位并通过top、right、bottom、left属性进行偏移，元素仍然占据原来的空间，只是视觉上被移动了。其他的元素仍然按照他原始的位置进行布局。（不会影响其他元素）

🌞绝对定位（脱离文档流）

position: absolute

绝对定位的元素是相对于最近的已定位的祖先元素（即设置了position: relative、absolute 或 fixed 的祖先元素）进行定位的。如果没有已经定位的祖先元素，那么该元素将相对于视口（浏览器窗口）进行定位。元素不占据原本的空间，不影响其他元素，也不被影响。

6、position

🦥static（默认属性）

当设置为static时，left/right/top/bottom/z-index属性无效。

和相对定位的元素重叠时，只要相对定位的元素z-index大于零就会显示在上方，否则是下方

🦥relative
🦥absolute（见上）
🦥fixed

脱离文档流，不为元素预留空间。一般情况下相对于屏幕视口发生偏移，元素的位置在屏幕滚动的时候不会改变。

🔺transform属性会改变position: fixed的参照对象，即fixed元素会相对于其第一个具有transform属性的祖先元素发生偏移。

🦥sticky

粘性定位，可以被认为是relative和fixed的混合。在跨越特定阈值前为相对定位，之后为固定定位。也就是说它会让元素在页面滚动时如同在正常文档流中，但是滚动到特定位置时就会固定在屏幕上。（阈值：指定的top、right、bottom、left其中之一，都不指定就和static一样）

它的阈值是相对于它最近的滚动祖先来定义，它的作用域也是它的第一个非static父元素内（也就是粘性布局的效果只在该父元素内表现出来，如果这个祖先元素不再可见（即完全滚动出视口），那么粘性元素也将不再固定在视口中）

7、overflow

overflow意为溢出容器

🐯属性值
  • visible：超出容器内容也显示（默认）
  • hidden：将超出容器的部分隐藏
  • auto：自动设置滚动条，如果垂直溢出就会出现垂直滚动条，水平溢出亦然
  • scoll：不管溢出与否都会出现滚动条
  • overflow-x，overflow-y可单独设置两个方向的滚动条
🐯作用

🔸解决margin-top的传递问题

子元素的margin-top会把父元素一起带下来（即使得父元素上方也出现margin），给父元素加overflow:hidden就可以解决。

🔸清除浮动带来的影响：父元素高度塌陷

8、white-space

属性：

  • normal：默认值。合并空白并在必要时换行。
  • nowrap：合并空白，文本不会换行。
  • pre：保留空白和换行。文本不会换行。
  • pre-wrap：保留空白，文本会在必要时换行。
  • pre-line：合并空白，保留换行符，并在必要时换行。

9、display

🦥block：

元素会生成一个块级框，独占一整行，前后有换行

  • 可设置width和height
  • 如<div> <p> <h1>默认都是块级盒子
🦥inline：

行内样式，元素不会生成框，而是和其它元素在同一行显示

  • 只占据其内容的宽度，无法设置 width 和 height。
  • 可以应用 padding 和 margin（但在某些情况下可能会影响布局）。
  • 常用于 <span>、<a>、<strong> 等元素。
🦥inline-block

结合了块级和行内元素的特性：元素在同一行内显示，但是可以设置width和height

如图：虽然显示在一行，但是有间隙，因为在写标签结束后会顺手打回车，就相当于空白符，通常情况下多个连续的空白符会合并成一个。这就是显示间隙的原因。

如果想要没有间隙，一可以改用float，二可以在父元素样式设置font-size：0；（但是子元素中的字也不会显示了…）

image-20241027191028769
🦥flex、grid、none、table、teble-row（表格行）、table-cell（单元表格）、list-item

9.1、如何给行内元素设置高度

  • 将行内元素转化为行内块元素
  • 将行内元素设置为浮动元素
  • 将行内元素设置为绝对定位
  • 将行内元素包裹在flex父容器中

10、float

基本用法：
  • none（默认）：不浮动，元素保持在文档流中。
  • left：元素浮动到左侧，紧贴父容器的左边界。
  • right：元素浮动到右侧，紧贴父容器的右边界。
  • inherit：从父元素继承 float 的值。
特性：
  • 脱离文档流：浮动元素会从正常文档流中移除，不会影响后面的非浮动元素的布局。
  • 影响后续元素：后续的非浮动元素会围绕浮动元素进行排列，但不会被浮动元素覆盖。
  • 浮动对齐：多个浮动元素可以在同一行排列（如果宽度允许的话），否则它们会换行。
与inline-block对比

  • float是默认无边距的

  • 元素在排列的时候会有些错乱，而inline-block相对较整齐

image-20241027192311738image-20241027192423307

11、margin

用来设置元素外边距的属性，通过控制元素四周的空白区域来调整元素之间的间距,主要用于影响布局，避免元素直接相连或重叠

简写和单边
  • 四个值：上、右、下、左
  • 三个值：上、左右、下
  • 两个值、上下、左右

也可以单独控制每个方向的：margin-top/right/bottom/left

auto

常用于水平居中对齐

  • 水平居中：margin: 0 auto;（前提是元素有宽度）
负值margin

可以拉近或重叠元素，适用于一些特殊布局

外边距折叠

在某些情况下，相邻元素的垂直 margin 会发生折叠，即两个元素之间的总 margin 不等于两者之和，而是其中的较大值。例如：

  • 如果一个元素的 margin-bottom 是 20px，另一个紧接着的元素 margin-top 是 15px，则两者间距为 20px，而不是 35px。

规则：

  • 设定浮动或者绝对定位的元素不会发生外边距折叠
  • 仅在垂直方向（上下）发生折叠，水平方向不会折叠。
  • 父子元素的 margin 也可能会折叠（如父元素没有 border、padding 或 overflow: hidden; 等）。
百分比

使用百分比时，不论上下左右的边距都是是相对于父元素的宽度来定义，和padding一样。

12、padding

和margin基本一致。但是不会发生折叠问题，而且背景会填充到padding区域(margin不会

13、IE盒模型

与普通盒模型的差异在于元素的 width 和 height 属性是指包括内边距（padding）和边框（border）在内的总宽度和高度。这意味着：内容区域的实际宽度和高度会小于 width 和 height 的值，因为内边距和边框会占用部分空间。

为了兼容IE盒模型，可以在CSS中使用box-sizing属性。

  • content-box：默认值，符合标准盒模型
  • border-box：将内边距和边框包含在width和height内，和IE保持一致

14、border

用于为元素添加边框的属性，它可以用于任何块级元素和行内元素，增加视觉效果和结构感。边框的样式、宽度和颜色都可以独立设置。

🐆属性组成
  • border-width（长度值或者关键字都可）、border-style、border-color
    • 或者用单个border属性同时设置3个：border: 2px solid red
  • border-top、border-right、border-bottom、border-left（四个方向单独设置）
  • border-radius
🐆边框样式
1
2
3
none：没有边框     solid：实线边框    dotted：点状边框    dashed：虚线边框 
double：双线边框   groove：凹槽边框   ridge：凸起边框     inset：内嵌边框
outset：外嵌边框
🐆border-radius

border-radius:30px 20px 30px 10px：（顺时针）左上、右上、右下、左下

border-radius:30px 50px 10px：左上、右下左下、右下

border-radius:90px 50px：左上右下、右上左下

属性值可以是px（表示圆角的半径）、%、em

image-20241027211917493

15、transtion

用于定义元素在状态变化时的过渡效果。通过设置 transition，可以在元素的某些 CSS 属性值发生变化时，平滑地过渡到新值，从而增强用户体验。

🦧transition 属性通常包含以下几个部分：

  1. 属性名：要过渡的 CSS 属性，例如 background-color、transform 等。
  2. 过渡持续时间：过渡效果持续的时间，例如 0.3s（表示 300 毫秒）。
  3. 过渡效果：过渡的速度曲线，可以是 ease、linear、ease-in、ease-out、ease-in-out 等。
  4. 延迟时间：在开始过渡之前的等待时间，例如 0.2s。
1
2
3
4
5
6
7
8
9
10
11
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.3s ease 0.2s, transform 0.5s ease-in-out;
}

.box:hover {
    background-color: red;
    transform: scale(1.2);
}

在这个示例中，当鼠标悬停在 .box 元素上时，背景颜色会隔0.2秒后在 0.3 秒内从蓝色变为红色，同时元素会在 0.5 秒内放大 1.2 倍。这些变化会以平滑的过渡效果显示出来。

🦧过渡曲线属性的含义

  • ease：这是默认值。动画开始时慢，中间加速，结束时慢。给人一种自然的感觉。
  • linear：动画以恒定的速度进行，没有加速或减速。整个动画的速度保持一致。
  • ease-in：动画开始时慢，随着时间的推移逐渐加速。适用于想要强调开始时的轻柔效果的场景。
  • ease-out：动画开始时以恒定速度进行，但在接近结束时逐渐减速。适用于需要强调结束时的柔和效果。
  • ease-in-out：动画开始和结束时都慢，中间加速。结合了 ease-in 和 ease-out 的特性，使得整个动画过程更加平滑。

16、生成三角形

1
2
3
4
5
6
7
8
9
10
<div class="triangle"></div>
<style>
.triangle {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/}
</style>
image-20241027095932583 
1
2
3
4
5
6
7
8
9
<div class="triangle"></div>
<style>
.triangle {
    width: 0;
    height: 0;
    border-width: 0 50px 100px 50px;
    border-style: solid;
    border-color: transparent transparent #0099CC transparent;}
</style>
image-20241027100123381

17、继承

🐰默认继承父元素样式的属性：

大部分布局相关的属性（如 margin、padding、border、width、height 等）默认是不可继承的。

  • 文本相关：
1
2
3
4
🔸color         🔸font-family   🔸font-size    🔸font-style   
🔸font-weight   🔸font-weight   🔸text-align(文本对齐方式)       
🔸white-space   🔸word-spacing  🔸text-indent(文本缩进)
🔸text-transform（文本转换，大小写等）
  • 列表相关
1
2
🔸list-style(列表样式)            🔸list-style-position    
🔸list-style-type(列表类型)       🔸list-style-image(列表项的图像)
  • 表格相关
1
2
🔸border-collapse(表格边框合并方式)  🔸border-spacing(表格单元格之间的距离)
🔸caption-side(标题位置)            🔸empty-cells(空单元格的显示方式)
  • 其他
1
2
3
🔸visibility(元素的可见性)      🔸counter-increment 
🔸quotes(引用样式，引号)        🔸counter-reset
🔸direction(文本方向)          🔸text-decoration(文本装饰，如下划线)
🐰强制继承

即将属性值写为inherit

18、使元素消失的方法

🐣display: none

隐藏对应的元素，在文档中不再给它分配空间

🐣visibility: hidden

隐藏对应的元素，但是在文档布局中仍保留原来的空间，但是不会触发已绑定事件

🐣opacity: 0

不会改变页面布局，可以触发已绑定事件（能继承，rgba不能）

🐣z-index: -1

隐藏在body下面

19、画一条0.5px的线

浏览器会对小于1px的数值进行四舍五入处理

transform
1
2
3
4
5
6
<div class="line"><div>

.line	{
   height: 1px;
   transform: scaleY(0.5);
}
伪元素叠加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="line"></div>

.line {
   position: relative;
}

.line::before,
.line::after {
   content: "";  /*必须设置此值伪元素才会显示*/
   display: block;
   height: 1px;  /*两条线的高度*/
}

.line::after {
   margin-top: -1.5px;  /*两条线重叠，变成0.5px*/
}

20、gradient

在 CSS 中，gradient（渐变）是用来生成一组平滑过渡的颜色效果，通常用于背景色、按钮、边框等装饰。CSS 提供了三种主要类型的渐变：线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient）。

可以叠加多个渐变，以逗号隔开

🦉线性渐变
1
background: linear-gradient(方向, 颜色1, 颜色2, ...);
  • 方向：可以是角度（如 45deg）或关键词（如 to right 表示从左到右）。
  • 颜色：可以设置多个颜色，并用百分比控制过渡位置。

例如：

1
background: linear-gradient(to right, red, blue);
image-20241028095156314
🦉径向渐变

径向渐变是从中心向外逐渐扩展的颜色过渡，形成一个圆形或椭圆形的效果。

1
background: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2, ...);
  • 形状：可以是 circle（圆形）或 ellipse（椭圆形）。
  • 大小：控制渐变的范围，常用的值有 closest-side、farthest-corner 等。
  • 位置：设置渐变的起始位置，默认为中心 center。

例如：

1
background: radial-gradient(circle farthest-side at center, yellow, green);
image-20241028095557144
🦉锥形渐变

锥形渐变是围绕中心点的角度变化渐变，颜色像蛋糕切片一样依次环绕，通常用于饼图效果

1
background: conic-gradient(from 角度, 颜色1, 颜色2, ...);
  • 角度：起始角度，默认从顶部开始。
  • 颜色：可以设置多个颜色以环绕中心点分布。

例如：

1
background: conic-gradient(from 0, pink, yellow, cyan);
image-20241028100018692

21、box-shadow

用于给元素添加阴影效果的属性，它能够让元素产生视觉层次感，使页面更具立体感。box-shadow 属性支持多层阴影效果，也可以实现内阴影。

22、text-shadow

@import

@import 是 CSS 规则，可以在 CSS 文件中使用，也可以在 <style> 标签内使用。

1
@import url("styles.css");
  • 可以在一个 CSS 文件中引入其他 CSS 文件。
  • 引入的样式表在其后面的样式之前加载。
  • 使用 @import 会导致额外的 HTTP 请求，可能影响页面加载性能。
  • 只支持在 CSS 文件中使用，不能在 HTML 文件中直接使用。

<link> 是 HTML 标签，通常放在 <head> 部分，用于引入外部样式表。

1
<link rel="stylesheet" href="style.css">
  • 能够在 HTML 中直接引用 CSS 文件。
  • 支持多个 <link> 标签，可以在页面加载时并行请求多个样式表，有利于提高加载性能。
  • <link> 提供了更多的属性，例如 rel、media、sizes 等，可以控制样式的应用范围和条件。

24、rel和href

HTML 中 <link> 标签的两个重要属性

rel

  • 全称：rel 是 “relationship” 的缩写。

  • 表示：用于定义当前文档与被链接文档之间的关系。

  • 常见值：

    • stylesheet：表示链接的文档是样式表。

    • icon：表示链接的是网站的图标。

    • preload：表示提前加载资源。

    • alternate：表示替代文档，例如不同语言或版本。

href

全称：href 是 “hypertext reference” 的缩写。

表示：用于指定被链接文档的 URL。

作用：它指向要链接的资源的位置，通常是外部文件的路径（如 CSS 文件、图标等）。

25、优化方法

26、animation(动画效果)

animation 属性用于为元素创建动画效果。它可以定义动画的持续时间、重复次数、延迟等

animation-name

指定动画的名称，对应 @keyframes 定义的动画。

animation-duration

动画的持续时间，即动画从开始到结束所需的时间。

animation-timing-function

控制动画的速度变化曲线，常见值有 linear、ease、ease-in、ease-out、ease-in-out，或者使用 cubic-bezier 自定义

animation-delay

动画开始之前的延迟时间。

animation-iteration-count

动画的播放次数，可以是数字（如 1、3）或 infinite（无限次循环）

animation-direction

设置动画的方向，可选值：

  • normal：按定义的顺序播放。
  • reverse：反方向播放。
  • alternate：交替正向和反向播放。
  • alternate-reverse：交替反向和正向播放。
animation-fill-mode

控制动画在播放前或结束后是否保持样式。

  • none：不保留动画效果。
  • forwards：保持动画结束时的样式。
  • backwards：保持动画开始时的样式。
  • both：在动画前后都保留样式。
animation-play-state

控制动画的播放状态，可以是 running（播放）或 paused（暂停）。

27、如何实现垂直居中

🐌flex

align-items

🐌grid

place-items

🐌绝对定位
1
2
3
4
5
6
.absolute-content {
  position: absolute; /* 设置为绝对定位 */
  top: 50%; /* 移动到父元素中间 */
  left: 50%; /* 移动到父元素中间 */
  transform: translate(-50%, -50%); /* 向上和向左移动自身高度和宽度的一半 */
}

28、行内元素水平居中

使用text-align控制文本居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="inline-container">
    <span class="inline-box">居中内容</span>
</div>


.inline-container {
    text-align: center;         /* 水平居中 */
    height: 100vh;             /* 设置容器高度 */
}

.inline-box {
    display: inline-block;      /* 设置为行内块元素以应用宽高 */
    height: 100px;             /* 设置盒子高度 */
    width: 200px;              /* 设置盒子宽度 */
    background-color: lightyellow; /* 背景颜色 */
}

（2）HTML

0、HTML5新特性

🔥新的语义化标签
  • article 独立的内容
  • aside：侧边栏
  • header：头部
  • nav：导航
  • section：文档中的一小节
  • footer：页脚
  • mark（默认黄色背景）
🔥画布Canvas API
🔥地理API
🔥 localStorage、sessionStorage
🔥websocket、webworker
🔥拖拽释放（Drag and drop）API
🔥音视频API（audio，video）
🔥表单控件，calendar，date，time，email，url

1、语义化的理解

  • 让页面的内容结构化，便于对浏览器和搜索引擎解析
  • 即使没有CSS的情况下也可以以一种文档的格式显示，容易阅读
  • 搜索引擎的爬虫依赖HTML标记来确认上下文和各个关键字的权重，利于SEO

2、内联框架

内联框架（Inline Frame），通常用 <iframe> 标签表示，是一种在当前HTML文档中嵌入另一个HTML文档的方式。

🐣特性和优劣：

  • 🔹嵌入内容：可以轻松地在网页中嵌入其他网页、视频、地图等多媒体内容，用户无需离开当前页面。

  • 🔹独立文档（内容分离）：内联框架中的内容是独立的，与父文档的CSS和JavaScript隔离，避免了样式和脚本冲突。

  • 🔸跨域问题：嵌入的内容可能受同源策略影响，导致无法访问内联框架中的文档内容。

  • 🔸性能开销：使用内联框架可能导致性能问题，因为每个框架都是一个独立的文档，增加了加载和渲染的开销。

  • 🔸SEO影响：搜索引擎可能对内联框架中的内容抓取不佳。

  • 🔸安全问题：嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击。

🐣属性：

  • src：指定要加载的文档URL。
  • width 和 height：设置框架的宽度和高度。
  • sandbox：应用一系列限制以提高安全性。
  • allow：控制允许的功能，如使用摄像头、麦克风等。

3、BFC

Block Formatting Contexts

属于普通流，即元素按照其在HTML中的位置至上而下布局。在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则被渲染成一个完整的新行。除非另外指定，否则所有元素默认都是普通流定位。

  • BFC 是一种独立的区域，在这个区域内，元素的布局不会影响外部的元素，而外部的布局也不会影响到内部的元素。
  • BFC 可以包裹内部的浮动元素，防止它们从容器中溢出，导致布局问题
  • 在 BFC 内部，垂直方向的 margin 不会与外部的 margin 合并

只要元素满足下面任意条件即可触发BFC特性

  • body 根元素
  • 浮动元素：float除了none以外的值
  • 绝对定位元素：absolute、fixed
  • display：inline-block、table-cells、flex/grid
  • overflow除了visable以外的值

4、href和src

  • **href**：用于链接到其他文档或资源，通常用于创建导航或样式引用。
  • **src**：用于嵌入和加载外部资源，如图像、脚本和内联框架。

5、readonly和disabled

readonly
  • 作用：让输入框内容变成只读状态，用户不能修改其内容。
  • 可提交表单：带有 readonly 的输入框内容可以提交到服务器。
  • 外观：在大多数浏览器中，readonly 不会改变输入框的样式，用户仍可以选中和复制内容。
disabled
  • 作用：将输入框禁用，用户无法点击、获取焦点或输入内容。
  • 不可提交表单：带有 disabled 属性的输入框内容不会被提交到服务器。
  • 外观：大多数浏览器会将 disabled 状态的输入框样式变灰，且用户无法选中或复制内容

（3）页面渲染

1、网页的生成过程

渲染页面：浏览器的工作原理 - Web 性能 | MDN

🐽DNS解析：

  • 用户在浏览器中输入URL，浏览器会像域名服务器发起DNS查询请求，得到IP地址。

🐽TCP握手和HTTPS握手：

  • 浏览器通过TCP三次握手与服务器建立连接，接着进行HTTPS握手，也叫TLS协商。

🐽请求和响应：

  • 建立好连接后，浏览器会代表用户发送一个GET请求，服务器接收到请求后，查找对应的资源（如HTML文件、CSS文件、JavaScript文件等），并将其作为HTTP响应发送回浏览器。

🐽解析HTML：

  • 浏览器接收到HTML文档后，开始解析。HTML被解析为DOM（文档对象模型）树，每个元素对应树中的一个节点。

🐽解析CSS：

  • 浏览器会同时解析CSS文件，生成CSSOM（CSS对象模型）树。这棵树描述了所有样式和它们如何应用于DOM节点。

🐽执行JavaScript：

  • 如果页面中包含JavaScript，浏览器会在合适的时机（通常是解析到<script>标签时）执行脚本。JavaScript可以操作DOM和CSSOM，从而可能导致重新布局和重绘。

🐽构建渲染树：

  • 浏览器结合DOM树和CSSOM树，生成渲染树。渲染树只包含需要在屏幕上显示的元素和其样式。

🐽布局（Flow）：

  • 浏览器计算渲染树中每个节点的确切位置和大小，完成布局过程。

🐽绘制（Paint）：

  • 浏览器将渲染树中的内容绘制到屏幕上。这一过程涉及将元素的视觉样式渲染为像素。

🐽页面交互：

  • 用户与页面的交互（如点击、输入等）会触发事件，可能导致进一步的DOM更新、重排和重绘。

2、重绘（Repaint）和重排（Reflow）

重排一定会引起重绘，而重绘不一定会导致重排。

🐇重绘：

当元素的外观（如颜色、背景等）发生变化，但其几何形状（大小和位置）不变时，浏览器会执行重绘。重绘是一个较轻的操作，因为只需要重新绘制受影响的部分。

🔸相对较快，影响较小，但频繁的重绘仍然可能导致性能问题。

🐇重排：

当元素的几何形状（如大小、位置）发生变化时，浏览器会执行重排。重排是一个更重的操作，因为它可能会影响文档中其他元素的位置和布局，需要重新计算页面的几何形状。

如：改变元素的宽度、高度、边距、填充或添加/删除DOM元素。

🔸性能开销更大，因为它涉及更复杂的计算，特别是在复杂布局中。

🐇如何优化？

  • 减少重绘：

    • 使用CSS类：通过切换CSS类而不是单独修改样式，减少频繁的样式变化。

    • 使用CSS动画：尽量使用CSS动画和过渡，而非JavaScript，CSS引擎在处理动画时更高效。

    • 合并样式改变：在一次重绘中，尽量合并多个样式改变，而不是逐个改变。

  • 减少重排：

    • 批量DOM操作：尽量将多次DOM操作合并为一次，例如使用文档片段（DocumentFragment）或将元素的可见性设置为display: none，进行修改后再显示。
    • 避免频繁访问布局属性：尽量减少访问可能引发重排的属性（如offsetWidth、clientHeight等），可以将需要的值存储在变量中，避免多次读取。
    • 使用绝对或固定定位：对于不需要重新布局的元素，使用绝对定位（position: absolute）可以减少重排。
    • 避免使用表格布局：使用现代的CSS布局（如Flexbox或Grid）可以更好地控制布局并减少重排。
    • 监听事件优化：使用事件委托而不是在每个元素上单独添加事件监听器，以减少内存占用和重排。

3、DocumentFragment

DocumentFragment 是一个轻量级的容器，用于在文档中临时存储和操作一组节点。它在处理DOM操作时非常有用，因为它可以帮助减少重绘和重排的次数。

  • 轻量级：DocumentFragment 本身并不是文档的一部分，所以对它的操作不会引发重排或重绘。
  • 临时存储：可以将多个节点添加到 DocumentFragment 中，进行批量处理。
  • 高效插入：将 DocumentFragment 插入到DOM中时，所有包含的节点会一次性添加，从而减少DOM操作的开销。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建一个 DocumentFragment
const fragment = document.createDocumentFragment();

// 创建多个元素
for (let i = 0; i < 5; i++) {
    const newElement = document.createElement('div');
    newElement.textContent = `Item ${i + 1}`;
    fragment.appendChild(newElement); // 将元素添加到 DocumentFragment 中
}

// 一次性将 DocumentFragment 插入到 DOM 中
document.getElementById('container').appendChild(fragment);

4、preload、prefetch 和 prerender

<link rel="preload/prefecth/prerender" href="" as="">

🐕preload

目的：用于优先加载当前页面所需的关键资源（如CSS、JS、图像等），确保在页面渲染时，这些资源已准备就绪。

  • 加快页面加载：确保用户在访问页面时，不会因为缺少关键资源而等待，从而提升用户体验。
  • 优化渲染：特别适用于需要即时显示的内容，比如关键图像、样式或JavaScript文件。

高优先级

🦮prefetch

目的：用于在用户当前页面浏览时，提前加载下一个可能会访问的页面或资源（如图像、样式）。（浏览器会在空闲时间加载 prefetch 指定的资源，不会干扰当前页面的加载。）

  • 减少等待时间：在用户导航到下一个页面时，减少加载时间，提供更顺畅的体验。
  • 利用空闲时间：通过在用户当前操作的上下文中加载下一个可能需要的资源，优化整体性能。

低优先级

🐕‍🦺prerender

目的：在后台完全渲染一个页面（通常用于用户很可能会访问的页面），使其在用户访问时几乎立即可见。（资源消耗较大，因为需要加载和渲染整个界面）

提供即时体验：用户导航到预渲染的页面时，几乎可以立即看到内容，消除了加载时间。

资源消耗：由于预渲染涉及完整页面的加载和渲染，可能会消耗较多的带宽和计算资源。

高优先级

5、图片懒加载

6、优化

HTML
  • 使用语义化HTML标签
  • 给图片加上正确的宽高，减少页面的重排
  • 使用正确的闭合标签
  • 使用link导入而不是@import导入
CSS
  • 尽量避免使用表达式
  • 把同类图片合并成一张，减少图片请求
  • 减少查询层级
JS
  • 避免频繁操作DOM
  • <script>标签放在最下方或者加上defer/async关键字
  • 删除注释
服务器
  • 尽量合并和压缩CSS、JS文件，减少文件传输时间
  • 使用CDN加速，使用户从离自己最近的服务器下载文件
八股面经
#c++
前端八股总结-CSS+HTML+页面渲染（持续更新）
http://example.com/2024/10/23/前端八股总结-CSS+HTML+页面渲染/
Author
Yaodeer
Posted on
October 23, 2024
Licensed under